UI UX design

UI and UX: what each covers

A typical sequence

1. 01

   Understand

   Users, tasks and constraints.

   Output: Research summary

2. 02

   Map

   Steps and decisions for key tasks.

   Output: User flows

3. 03

   Structure

   Layout and content priority.

   Output: Wireframes

4. 04

   Test

   A clickable version with users.

   Output: Findings and changes

5. 05

   Design and hand off

   Visual interface and states.

   Output: Build-ready designs

Starting with users

Research does not have to be large. Talking to a handful of users, reading support tickets, watching analytics for drop-off points and looking at how competitors handle the same task can reveal what matters. The GOV.UK Service Manual treats user research as something done across a service's life, from discovery through to live, rather than once at the start. The aim is to agree a short list of the tasks the interface must make easy, and the people who perform them.

Low fidelity first

It is tempting to jump straight to polished screens, but changes are cheapest when designs are rough. Flows and wireframes let a team agree what each screen must do before anyone debates colours. A clickable prototype built from wireframes can be tested with users in days. Visual design then builds on a structure that already works.

Accessibility from the start

Why these criteria

WCAG 2.2 became a W3C Recommendation in December 2024. The criteria above are among those at Level A and AA that affect design decisions directly, rather than only code. Planning for them in wireframes and visual design is far easier than fixing them after build.

Example: a booking form that loses people

Handing off to developers

Developers need more than a picture of each screen. Useful handoff includes every state (empty, loading, error, success), reusable components, spacing and colour values, notes on behaviour and the accessibility decisions made. Tools such as Figma's Dev Mode let developers inspect designs and properties directly.

Knowing whether it worked

Agree in advance what you will look at after launch: task completion, support questions, drop-off at key steps, or feedback from users. No designer can promise a specific improvement, but clear before-and-after measures show whether the work helped.

Checking designs against known principles

Before testing, designs can be reviewed against established principles such as Jakob Nielsen's ten usability heuristics, which include visibility of system status, consistency and standards, error prevention and recognition rather than recall. A heuristic review is quick and catches obvious issues, but it does not replace watching real users.