UX/UI Design Phase seen through screen fidelity
Four projects provide an overview and sample of my work flow as it moves from rough ideation to final, Hi-Fi wire frames.
Each phase allows stakeholders to engage with the process, visualize organization, interpret logic, review functions, and understand decision flow. Continued refinement reflects collaboration at each phase. The UX/UI design process not only takes an idea through the stages needed to finalize, but serves as a powerful communication tool throughout the life of the project.
Design Phase 1 — Logic & Rough Screens
MFin working session
The project started with a working session I led with internal subject matter experts to capture their life insurance underwriting logic and flow. This was a collaborative session, all white board sketches were photographed.
MFin screens sketches
At the end of the working session, I translated the whiteboard sketches into rough screens with additional details to capitalize on the output of the working session. These sketches were then reviewed by the subject matter experts.
JLR Fleet Manager logic sketches
Due to the fact that this was a proof-of-concept project, I created the logic based on the design brief, competitive analysis, and by applying use cases I created in collaboration with the internal stakeholder.
JLR Fleet Manager logic sketches cont’d
JLR Fleet Manager UI whiteboard sketches
With the logic complete, I began sketching the UI to capture the primary functionality and components.
JLR Fleet Manager UI whiteboard sketches cont’d
JLR Connected Services Common Elements
The above example was one of numerous quick explorations of content-to-screen proportion. Lo-fi wireframes were accurate enough to communicate the options, colors were used to designate specific areas or components.
JLR Connected Services Common Elements cont’d
This, the simplest of wireframes had only one purpose—to communicate the number of choices the user will face along with the resulting variety of screen layouts. A simple graphic was all that was required to communicate a simple message —it’s too complex.
Design Phase 2 — Blue Line / Lo-Fi Wireframes
JLR Connected Services Common Elements cont’d
These wireframes are part of series created to propose both functionality and movement between sections of a system features that was under reconsideration. These UI layout took direct inspiration from mobile UI/UX patterns with the intent of bringing familiar interactive patterns into the vehicle.
JLR Connected Services Common Elements cont’d
This example was part of a proposal for how “Recents Apps” would be displayed across the top of the App Drawer. Due to the fact that this represented entirely new functionality and user options, simple wireframes such as this were helpful to conveying the concept.
JLR Fleet Manager Lo-Fi wireframes
This diagrams was created to communicate overall structural proportions and layout, functionality, and content to the internal stakeholder.
JLR Fleet Manager Lo-Fi wireframes cont’d
When necessary, details of important components were created. The purpose of this example was to convey the content of a vehicle result tile.
Design Phase 3 — Hi-Fi screens
MFin primary screens
This project did not require Lo-Fi wireframes as their internal design team had an existing collections of Sketch components and style guide available. Thus, after the hand drawn rough sketches I went directly into Hi-Fi wireframes.
MFin, new functionality = new assets
This project required the design and creation of numerous new components and design elements. Utilizing their style guide, I collaborated with their UI designer on the new elements. After design finalization, they would be added to their style guide.
JLR Connected Services Smart Vehicle
The Connected Services Sketch Library allowed for Hi-Fi screens to be easily created. For this project — Smart Vehicle — device tiles were a new component, and I created them based on style guidelines and existing assets.
JLR Connected Services Caravan
This feature included components from both the JLR P-IVI and HERE Navigation components libraries. In other words, it was critical that the Hi-Fi screens correctly integrate components from two different sources.
Conversion to Component Libraries
JLR Fleet Manager primary screen UI
The visual design and UI components for this enterprise level project were not based on the JLR style guide. As a result, I led the exploration of numerous iterations until we arrived at a design that represented an expansion of the current company look.
JLR Fleet Manager primary screen UI cont.
This example shows a vehicle detail view.
JLR SOTA
The visual design of this projects includes numerous new components. Foremost is the large product name and CTA, both significant additions that reflected outstanding hierarchical issues raised in user testing.
JLR SOTA cont’d.
Abstract imagery was used to create emotion and excitement for new features.
JLR Fleet Manager primary screen UI
The visual design and UI components for this enterprise level project were not based on the JLR style guide. As a result, I led the exploration of numerous iterations until we arrived at a design that represented an expansion of the current company look.
JLR Fleet Manager primary screen UI cont.
This example shows a vehicle detail view.
Design Phase 4 — Prototype
JLR Fleet Manager
A Proto.io prototype was created for two distinct purposes: First, for the team to test new interactions and component behaviors, and secondly, for use by the internal stakeholder to present to upper management.
JLR SOTA
The purpose of this video is the same as the previous one. The number of new components in this featured made it especially important that the prototype captured their behavior in as realistic manner as possible.