My UX/UI Design Process
Summary
Mission
Communicate my design process utilizing the 4 phases of Design Thinking—Discovery, Definition, Design, Delivery.
Phase 1:
Discovery
Goal
Fully explore the problem space.
Make sure I fully understand the stakeholders product vision, how they measure ‘success’, technical constraints, and what problems we are solving for the user. In this phase, it is important to understand what research and data is available to inform decision making.
My Process
White board sketches. Logic Flows. Anything that helps understand the problem space. It is important that the teams leaves this phase with common understanding and agreement.
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.
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.
JLR Fleet Manager logic sketches
I created the logic based on the design brief, competitive analysis, and by applying use cases I created in collaboration with the internal stakeholder.
Phase 2:
Definition
Goal
Synthesize Phase 1 by creating rough wireframes and interactions models to identify themes. The refinement in this phase should help uncover additional unanswered questions of pain points.
My Process
make sure the user needs and their jobs to be done fully align with the product vision. The work should detailed enough that engineering can provide a accurate estimation of effort and the product team can create a development roadmap.
JLR Connected Services Common Elements
Quick explorations of content-to-screen proportions, colors were used to designate specific areas or components.
JLR Connected Services Common Elements cont’d
This set had only one purpose—to communicate the number of choices the user would face—it’s too complex. Back to the drawing board.
JLR Connected Services Common Elements cont’d
These wireframes are part of series created to propose both functionality and interaction. These interactions were inspired from mobile UI/UX patterns with the intent of bringing familiar interactive patterns into the vehicle.
JLR Connected Services Common Elements cont’d
This is how “Recent Apps” would be displayed across the top of the App Drawer. Since this represented new functionality, 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.
Phase 3:
Design
Goal
Create high fidelity screens including all edge cases. In corporate the brand elements and expand the component library if necessary. Functional prototypes are created at this time.
My Process
Utilize brand elements and component libraries to be the wireframes to life.
MFin primary screens
MFin, new functionality = new assets
Utilizing their style guide, I collaborated with their UI designer on the new components. After design finalization, they would be added to the library.
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.
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 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
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.
Phase 4:
Delivery
Goal
Perform usability testing and insight analysis to ultimately start delivering functional specs to the development teams.
My Process
Work with the product team to identify and determine what insights they would like to gain from usability testing. Make functional specifications aligning to the needs of the development teams.