The UX Design Process: From User Research to a Design System

Fixing a design problem in a prototype takes minutes. Fixing it after launch can take weeks of development. A structured UX process exists to catch those problems early, so that what gets built is clear, usable and aligned with business goals.

1. Research: understand users and goals

Start by learning who will use the product and what they are trying to achieve. Useful methods include short user interviews, reviewing support tickets, analysing existing analytics and looking at how competitors solve the same problem. The output is a short list of user goals, pain points and business success metrics.

2. User flows and information architecture

Map the steps a user takes to complete each key task, such as signing up, making a purchase or creating a report. Then organise content and navigation so that each task takes as few steps as possible. This is where many usability problems are solved, long before visual design.

3. Wireframes

Wireframes are simple, low-detail layouts that show structure and hierarchy without colour or styling. They make it easy to discuss what belongs on each screen and to change direction quickly.

4. Interactive prototypes

Tools such as Figma turn wireframes into clickable prototypes that feel like the real product. Stakeholders can review them, and they can be tested with real users before development begins.

5. Usability testing

Ask five to eight representative users to complete key tasks while thinking aloud. Watch where they hesitate or make mistakes. Small rounds of testing reveal most major issues, and they are far cheaper than post-launch fixes.

6. Visual design and accessibility

Once the structure works, apply the brand: typography, colour, imagery and motion. Check accessibility as you go, including colour contrast, readable font sizes, keyboard navigation and clear focus states, following WCAG guidelines. Accessible design improves usability for everyone.

7. A design system for consistency and speed

A design system is a shared library of reusable components (buttons, forms, cards, navigation) and rules (spacing, colour tokens, typography). It keeps the product consistent as it grows and lets designers and developers build new features much faster.

• Design tokens: named values for colours, spacing and type.
• Components: built once in Figma and once in code, kept in sync.
• Documentation: when and how to use each component.

8. Handoff and measurement

Developers receive specs, assets and component guidance. After launch, track task completion, conversion rates and support requests to see where the design can improve next.

How much research is enough?

Research does not need to be a months-long study. For most projects, a week of focused work answers the most important questions: who the main users are, what they are trying to do, where they struggle today and how success will be measured. Five to eight interviews with representative users usually reveal the patterns that matter. More research is worth it when the audience is very diverse, the stakes are high, or the product is entering an unfamiliar market.

Common UX mistakes that hurt conversion

• Unclear value proposition: visitors cannot tell within a few seconds what the product does and who it is for.
• Too many choices: competing calls to action and crowded navigation slow decisions.
• Long or confusing forms: every unnecessary field reduces completion rates.
• Hidden pricing or next steps: users leave when they cannot find what happens next.
• Inconsistent components: buttons, spacing and wording that change from page to page erode trust.

Designing for mobile first

On many websites and products, most visitors arrive on a phone. Designing the small screen first forces clear priorities: the most important content and actions come first, tap targets are large enough, and text stays readable without zooming. The larger layouts can then add detail rather than trying to squeeze a desktop design into a narrow screen.

Working effectively with developers

The best results come when designers and developers collaborate from the start rather than handing off at the end. Developers can flag technical constraints early, and designers can adjust before the work is expensive to change. Shared component libraries, design tokens that map directly to code and regular design reviews during development keep the final product faithful to the design.

Want a second opinion on your own project? Our UI/UX & Graphic Design team can help you scope it, estimate it and plan the first release.

Frequently asked questions

How long does a UX project take?

A focused redesign of a few key flows can take a few weeks. A full product with a design system often takes two to three months, usually in parallel with development.

What is the difference between UI and UX?

UX (user experience) is how the product works: flows, structure and ease of use. UI (user interface) is how it looks: layout, colour, typography and visual details. Both are needed for a great product.