Prototyping & Validation

Prototyping is the practice of externalising design decisions into testable form before building the real thing. The key principle: fidelity should match the question being asked. Using high-fidelity mockups to test navigation structure is wasteful. Using wireframes to test visual polish is misleading.

Fidelity Levels

Wireframing

Wireframes answer structural questions: where does each element live on the page, what is the visual hierarchy, and how does the user navigate between states? They use grayscale and generic placeholders deliberately — color and imagery introduce visual bias that distracts from structural feedback.

What every wireframe must show

• All states: empty state, loading state, error state, populated state
• All significant viewport sizes: mobile (375px), tablet (768px), desktop (1280px)
• Navigation: how the user arrived at this page and where they can go next
• Primary, secondary, and destructive actions — clearly distinguished by visual weight
• Content placeholders that reflect real content dimensions (not Lorem Ipsum — use realistic copy)

High-Fidelity Mockups

High-fidelity mockups apply the design system decisions from the previous phase — exact colors, typography, spacing, and component variants — to produce screens that a developer can implement directly. Every value in a high-fidelity mockup should correspond to a design token.

Figma organisation for dev handoff

📄 [Project Name] — Design System
  ├── Page: Tokens (colors, type, spacing)
  ├── Page: Components (all primitive + composite components)
  └── Page: Patterns (recurring layout patterns)

📄 [Project Name] — Screens
  ├── Page: Flows (annotated user flow diagrams)
  ├── Page: Desktop (1440px)
  ├── Page: Tablet (768px)
  ├── Page: Mobile (375px)
  └── Page: States (loading, error, empty for key screens)

Usability Testing

A usability test gives real users a set of tasks to complete on a prototype, without assistance. The tester observes, listens, and records — they do not guide or explain. Five participants uncover approximately 80% of usability problems (Nielsen's Law).

Test script structure

1. Introduction (5 min) Explain the session format. Emphasise that you are testing the design, not the participant. Ask the participant to think aloud as they work.

2. Background questions (5 min) Confirm the participant matches your target user profile. Ask about their current workflow without the new feature.

3. Task scenarios (30–45 min) Present 3–6 realistic task scenarios. Each scenario gives context without revealing the solution path. Measure: task completion rate, time on task, error count, and satisfaction rating.

4. Debrief (10 min) Ask open-ended questions about the experience. What was confusing? What was missing? What worked well?

Issue severity rating

Design Handoff

Design handoff is a structured transfer of design specifications to engineering. A complete handoff eliminates the most common source of implementation drift: developers making guesses about design intent.

Handoff deliverables

• Annotated screens: every non-obvious behaviour documented inline in Figma
• Interaction specifications: animation duration, easing, trigger conditions for every transition
• Responsive specifications: how each component adapts across breakpoints
• State inventory: screenshots of every component state (default, hover, focus, disabled, loading, error)
• Accessibility annotations: ARIA roles, focus order, heading hierarchy, alt text for images
• Asset exports: icons, illustrations, and images at required resolutions and formats
• Design token mapping: which token each design decision maps to in code

Design & Architecture Phase Exit Checklist

The Design & Architecture phase is complete — and implementation may begin — when every item below is checked. This is the quality gate between definition and development.