Section
Design process
Research
Interviews, task analysis and a review of what users do today.
Information architecture
How content and features are organised, named and found.
Prototypes
Testable flows at the right fidelity to answer specific questions.
Visual design
Typography, colour and spacing on a defined grid with clear tokens.
Component system
Documented components with states and accessibility notes, matched in code.
Demonstration
How a spacing scale holds a layout together
Adjust the base unit. Every spacing step is a multiple of it, so the whole layout stays in proportion.
Specification
Design deliverables
| Journey maps | Current and proposed, editable. |
|---|---|
| Prototypes | Clickable, with testing notes. |
| Screen designs | All states, including errors and empty states. |
| Design tokens | Colour, type and spacing values exported for development. |
| Component library | Documented and versioned alongside the code. |