Goal
Let the client "touch" the product before any code: clear flows, consistent UI, usable on phones and with assistive tech.
Inputs → outputs
Inputs
- SRS and user stories with acceptance criteria
- Brand assets
- Discovery results (personas, pain points)
Deliverables
- Wireframes + mockups for all key screens (desktop & mobile)
- Interactive prototype
- Usability test notes & change list
- Design tokens / component library
Teams & roles
- UX/UI Designdesigns flows and UI, runs usability tests
- Business Analysis (BA)checks designs against requirements
- Engineering (FE · BE · Mobile)checks feasibility, receives design tokens
- Quality Assurance (QA/QC)reviews accessibility on designs
- Client (Product Owner / sponsor)reviews and approves the prototype
RACI matrix
R — does the work · A — accountable, final sign-off (exactly one A per activity) · C — consulted before · I — informed after.
| Activity | BA | UX | PM | Dev | QA | Client |
|---|---|---|---|---|---|---|
| User flows & sitemap | C | A | · | · | · | · |
| Wireframes → mockups | · | A | · | C | · | C |
| Prototype & usability testing | R | A | · | · | · | R |
| Design system / design tokens | · | A | · | R | C | · |
| Approve the prototype | · | R | I | · | · | A |
BA = Business Analysis (BA); UX = UX/UI Design; PM = Project Management / Scrum Master; Dev = Engineering (FE · BE · Mobile); QA = Quality Assurance (QA/QC); Client = Client (Product Owner / sponsor)
Quality gate
Prototype approved; no open questions about main flows.
Entry criteria
- Main flows have user stories with acceptance criteria
- Brand assets exist or a refresh is agreed
Exit criteria
- Mockups for every key screen on desktop and mobile
- Prototype approved in writing
- Usability findings applied, or reasons recorded
- Design tokens handed to engineering
- Designs pass WCAG 2.2 AA checks (contrast, target size, focus order)
Activities
- 1.Draw user flows and sitemap / screen map
- 2.Low-fidelity wireframes → high-fidelity mockups
- 3.Clickable prototype, tested with 3–5 real users
- 4.Small design system: colour, type, spacing, components, light/dark
Checklist
Tick to self-review — 0/6. Ticks stay in this browser only and are not sent anywhere.
Document templates
Markdown (.md) files: open in any editor, or paste into Word / Google Docs. Each states its purpose, who fills it in and when.
Client involvement
- Give feedback on each prototype round
- Provide brand assets (logo, colours, fonts)
Tools
- Figma
- FigJam
- Storybook
- Lighthouse / axe
Reference standards
- WCAG 2.2 (W3C, 2023)
- Web accessibility guidelines — target level AA
- ISO 9241-210:2019
- Human-centred design for interactive systems
- Nielsen — 10 Usability Heuristics
- Quick heuristic evaluation of an interface
Common pitfalls
- Designing for desktop only
- No error / empty states
- Beautiful prototype that is not technically feasible
- Approving static images instead of letting users click through
Real example
cuongthai.com: the site-wide dark theme uses thetheme-darkclass, while Tailwind’sdark:variant is reserved for Notes. Putting.darkon <html> once broke Notes’ light/dark/brown switcher. Theme conventions belong in a written design system, not in someone’s memory.
Where to learn
Subjects and courses on cuongthai.com that teach this stage’s work.