My how-to list of a typical UX/UI digital product design process that is subject to continuous scrutiny.
Existing Product Analysis
If there is already a previous version live, the existing product analysis examines existing conversion rates and user experience. What are the key findings that require improvement? Search keywords, page views and heatmaps often reveal plenty and all this data can be used to benchmark and measure performance of the new system.
Understand how the competitors represent themselves and their products. What are the key differences? What works and what doesn’t? This also helps to reveal existing industry practices.
Researching as much of the user as possible. This includes demographics, likes, fears, wants, needs etc. through interviews, surveys and diary studies.
Personas, User Journeys and Empathy Maps
Create personas and describe how her or she travels through the current state process within the context of the product or service. How does he/she become aware of us? What happens next? This includes the creation of an empathy map/value proposition. This step is part of the Gelato framework.
This is where the crunching of the information starts, to create the backbone of the design of a product: user stories. What are the individual (mini-) goals for the user and what are their priorities? How will they translate to the design? This step is part of the Gelato framework.
User Flows and Scenarios
A user flow describes in a flowchart how a user should travel through the product performing key tasks. User scenarios are the personalised stories around these, which can be given more shape inside storyboards. This step is part of the Gelato framework.
Wireframes and Fast Prototyping
From basic page models to clickable/tappable prototypes for review and/or testing: wireframes are highly versatile, assist in forcing visual, concrete elements on a page and help gain feedback quickly. This step is part of the Gelato framework.
To prevent the wheel to be re-invented over and over, design can be broken up in smaller pieces and shared across multiple people and teams. New designs are drafted quicker and should remain consistent with the design language. This step is part of the Gelato framework.
Visuals and UI Design
Design high fidelity visuals (using elements from the design system) on brand to create mockups and prototypes that can be shared using tools such as Invision or Marvel. Each design should be checked for accessibility and the authoring and design rules (what is the maximum number of characters of a field?) are drafted here. This step is part of the Gelato framework.
Handover and review
Assist the BA with creating tickets and consult devs where needed. Conduct design reviews and manage accessibility checkups on delivered code. When there is time left, set up AB test goals, analytical dashboard/funnel and other analytical KPI’s / consult on SEO. This step is part of the Gelato framework.
Write instructions for designers on how to make use of the design system, coders on how the component works and authors on how to use/not to use them. This step is part of the Gelato framework.