Clients frequently request visual examples of the User Experience (UX) and User Interface (UI) design process. This process can vary depending on the industry and specific project objectives. In many cases, the details are proprietary and tailored to the unique business case.

However, here are the common steps involved in the UI/UX process for any digital product.

Concept and Planning

Heuristics evaluation:

This is the base of user experience introduced by Jacob Nielsen

• 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.

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.

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.

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.

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