In this article · 12 sections
Good user experience rarely comes from inspiration alone. It comes from a repeatable process that replaces guesses with evidence. Different teams label the stages differently, but the underlying flow is consistent: understand people, define the problem, explore solutions, test them and hand them over clearly.
This guide explains each stage and what you should have in hand when it ends.
Stage 1: Research
Start by learning about the people you are designing for and the context they work in.
- User interviews reveal goals, habits and frustrations. See our guide to running user interviews.
- Competitor review shows common patterns and gaps.
- Analytics and support data show what people already do and where they struggle.
- Surveys can measure how widespread a problem is, once you know what to ask.
Output: a short summary of findings, with real quotes and observed behaviour.
Stage 2: Define the problem
Raw research needs to become a clear brief. Common artefacts include:
- Personas or user segments that describe goals and constraints, based on real research rather than imagination
- Jobs to be done, which describe the progress someone is trying to make
- Problem statements such as “New freelancers need a fast way to send a professional invoice because setup takes longer than the work itself”
- Success metrics that will tell you whether the design worked
Output: a prioritised problem statement and measurable goals.
Stage 3: Ideate and map flows
Now explore solutions, quantity before quality.
- Sketch many ideas quickly. Rough sketches are cheap and invite feedback.
- Map user flows: the steps from entry point to goal, including errors and edge cases.
- Create a simple information architecture that groups and labels content the way users think about it.
Output: a chosen direction and the main flows.
Stage 4: Wireframe
Wireframes show layout and hierarchy without colour or style. Focus on what goes where and why.
- Use realistic content, not “lorem ipsum”, so you spot problems with length and clarity.
- Design key states: empty, loading, error and success.
- Keep fidelity low enough that people critique the structure, not the colours.
Output: wireframes of the core screens.
Stage 5: Prototype
A prototype is a clickable simulation of the product. It lets you test ideas before engineers build them.
- Link screens so participants can complete real tasks.
- Match fidelity to the question: low-fidelity for flow, high-fidelity for visual and interaction details.
- Tools such as Figma make this quick.
Output: an interactive prototype ready for testing.
Stage 6: Test and iterate
Put the prototype in front of five or so representative users and ask them to complete realistic tasks. Watch where they hesitate, misread or fail. Our usability testing guide covers the method in detail. Fix the biggest problems first and test again.
Output: a list of findings and a revised design.
Stage 7: Visual design and system
Apply brand, colour, typography and components. Build reusable pieces so the product stays consistent as it grows. Check colour contrast and accessibility as you go, not at the end. A well-structured design system speeds up every later screen.
Output: high-fidelity designs and a component library.
Stage 8: Handoff
Handoff is a conversation, not a file transfer. To make it smooth:
- Share designs with specs: spacing, sizes, colours, states and behaviour
- Provide assets in the formats developers need
- Document interactions and animations, including timing and easing
- Describe edge cases: long text, no data, slow networks, errors
- Include accessibility notes such as labels and focus order
- Stay available during development to answer questions and review builds
Output: developer-ready designs and a shared understanding.
Stage 9: Measure after launch
The process does not end at release. Compare real usage with the success metrics you defined. Watch analytics, session recordings (with consent) and feedback, then feed what you learn into the next round of research.
Common mistakes
- Skipping research and designing from opinion
- Falling in love with the first idea
- Testing only with colleagues
- Polishing before the structure is right
- Treating handoff as the finish line
A short checklist
- Research summarised with real quotes
- Problem statement and metrics agreed
- Flows mapped, including errors
- Wireframes using realistic content
- Prototype tested with real users
- Accessibility checked
- Specs, assets and edge cases documented
- Post-launch measurement planned
Final thoughts
A UX process is a way to be wrong cheaply and early. Move through the stages in order, but expect to loop back as you learn. If you want a team to run this process for your product, see our UI/UX design service or contact us.
