UX/UI Process

Clients often ask for visual examples of the User Experience and User Interface design process; this process varies according to the type of industry and project goals; in most cases, this information is exclusive and proprietary to the business case.

Here are the typical steps involved in any digital product's UI/UX process.

 

Concept and Planning

Heuristics evaluation:

This is the base of user experience introduced by Jacob Nielsen in the early days of the web – 1994, its the based line to evaluate a website or app.

• Visibility of system status

• Match between system and the real world

• User control and freedom

• Consistency and standards

• Competitive evaluation

• Error prevention

• Recognition rather than recall

• Flexibility and efficiency of use

• Aesthetic and minimalist design

• Help users recognize, diagnose, and recover from errors

• Help and documentation

 
 

User research – Personas

As design Thinkers, we synthesize our research and findings from the very first phase, the Empathise phase. Using personas is a method help designers move on to the third phase, the Ideation phase. The personas will be used as a guide for ideation sessions such as Brainstorm.

 
 
Persona-(1).jpg
 
 

Site Flow and Architecture:

Presents a clear picture of the navigational hierarchy.

BN.jpg
 
USER JOURNEY CONTENT.png
 

User Flow and User Journey

User flows and user journeys are different documents of research, but I’m putting together to keep this explanation brief. User flows help developers understand how the system interacts with user behavior. The system needs to respond to the user when they make errors and do actions.

 
BN_0000_4.jpg
user_flow.jpg
 
 

Design and Specification

 

Wireframes

Wireframing shows the website or app at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys.

 
UX_sample2.jpg
Screen Shot 2019-06-05 at 2.42.09 PM.png
 
Enhanced Video X 1.jpg
xx_Wires2-1.jpg
 
 

Storyboards

A storyboard is an excellent instrument for ideation. In UX design, storyboards shape the user journey and the character
(persona). They help designers to string together personas, user stories, and various research findings to develop
requirements for the product.

Screen Shot 2019-06-05 at 2.54.05 PM.png
Screen-Shot-2019-06-05-at-2.53.54-PM.jpg
 
 

Visual Design

Creative of the Visual user interface, look and feel of the website or app.

Prototyping

Visual – functional

Product Launch

• Code development

• Beta testing - evaluation

• Launch

BLT.jpg
petco.jpg
 
 

UX Cases

 

UI Cases