Project “RDM” Desktop App

Project "RDM" App description...

Project “RDM” Desktop App Overview

This prospective project involved multiple ux designers working together to meet a short deadline. The complete iterative design process was used beginning with the client kickoff, user interviews, information architecture, wireframing, visual design, pattern libraries and final asset deliverables to the development team. The basis for this project was to update an existing application that was dated in terms of its user experience and visual design.

My Role

My role involved working with the clients brand identity guidelines and final user interface. I created the final visual design, iconography, typography, pattern libraries and final asset deliverables for our development team while other designers worked on the information architecture, interviews and wireframes. I used the prototyping tool proto.io which allowed us to communicate how the final visual design and interactions worked together for the developers.

Challenge

Prospective client was interested in modern interfaces, clean visuals and more intuitive experiences. I was asked to present several different visual concepts for the client to review. They wanted a design that would demo well when marketed and drive their visual identity forward into something clean, minimal and organized. A large number of skeuomorphic icons needed to be redesigned and updated into the responsive svg file format.

Solution

The proposed visual design incorporated all of the client’s requests. 30 different screens were designed and tested by the end of the project. After initially proposing light and dark themed visual concepts the client chose the light version. Once the concept was chosen I began applying the visual design to completed and approved wireframes. General UI components were placed into a pattern library which helped reduce the total number of screens needing final visual treatments.

Project "RDM" App sketches description...
A sample of initial sketches exploring different patterns, shapes and content sections.

 

Portfolio visual designs description...
The initial login screen incorporated the companies accent colors and was placed on a beautiful photograph their marketing team had supplied to us. Once the user entered in their credentials the photograph would dim and the applications sidebard would load in on the left side of the screen. Careful consideration was taken when selecting the different values of color and typography treatment based off of the lighting environment this application would be used.

 

Selecting one of the options from the sidebar will present the user with a popup window that can be minimized, expanded and closed. I really focused on that streamlined look and feel the client requested making sure that the content was visually unified, balanced and and easily consumed.

 

Pattern Library description...
Example of the first three sections found inside the pattern library document. The sections were grouped by component type. This allowed the developers to quickly reference the different components without having to refernece each individual screen.