Skip to content
Design Academy My progress

Stage 7 · Lesson 9 of 11

Prototyping realistic user flows

Prototypes good enough to test with.

  • Intermediate
  • 35 min
  • 3 check questions
  • Exercise: 1 h 30 min

By the end of this lesson you can

  • Prototype complete flows, including branches and errors.
  • Choose the right fidelity and tool for the question.
  • Use prototypes to communicate and test interaction ideas.

The idea

In Stage 5 you learned prototyping features. Here the focus is what to prototype for interaction design.

Flows, not screens

Prototype a complete task from start to finish, including decisions, branches and failure paths. Real users go off the happy path, so include at least one error and one alternative route.

Choose fidelity by question

  • Is the flow logical? Low-fidelity click-through.
  • Do people understand the labels and content? Mid-fidelity with real copy.
  • Does the interaction feel right? High-fidelity with motion, or a coded prototype.

Advanced prototyping

Some questions need logic: forms that validate, lists that filter, totals that update. Design tools offer variables and conditions; tools such as ProtoPie, Framer or simple coded prototypes handle complex logic, real data and device sensors.

Make it realistic enough

Use real content and realistic data. Fake perfection (every product in stock, every name short) hides problems.

Why it matters in real projects

Interaction problems often appear only when people move through a whole flow: a missing back route, a confusing branch or an error with no recovery. Prototyping complete flows reveals these early and gives stakeholders and developers a shared, concrete picture of the experience.

A realistic example

A team prototypes only the happy path of a password reset: enter email, receive code, choose new password, done. In testing, a participant mistypes the code, and the prototype has nowhere to go.

The designer adds branches: wrong code (with retry and "send a new code"), expired code, and email not recognised (with a neutral message that does not reveal whether an account exists). The next test reveals that the code expiry time is too short for people switching between apps.

Step by step

  1. Define the question

    Write what the prototype must answer.

  2. Map the flow

    Include main path, branches and errors.

  3. Choose fidelity and tool

    Match them to the question.

  4. Use real content

    Add realistic data and copy.

  5. Build and walk through

    Build the flow and walk every branch yourself.

  6. Test with people

    Run it with at least three people.

Common mistakes

  • Mistake Only the happy path.

    Instead Include errors and alternative routes.

  • Mistake Higher fidelity than the question needs.

    Instead Match fidelity to the question.

  • Mistake Perfect fake data.

    Instead Use realistic, messy content.

Check your understanding

Choose an answer, then check it. There is an explanation either way.

Question 1 of 3What fidelity suits testing flow logic?
Show answer

Low. Logic does not need polish.

Question 2 of 3Why include error paths?
Show answer

Real users make mistakes and need recovery. Errors are part of real use.

Question 3 of 3When might you use a coded prototype?
Show answer

For complex logic, real data or device sensors. Code handles what design tools cannot.

Practice exercise

Exercise · about 1 h 30 min

Full-flow prototype

Prototype a complete booking flow for a hair salon.

Steps

  1. Map the main path, two branches and two errors.
  2. Choose fidelity and build the prototype.
  3. Use realistic availability and names.
  4. Test with three people and note issues.

Deliverable

A prototype link, a flow map and test notes.

Self-assessment

Tick each item when it is true of your exercise. Be honest; this is for you.

4 items

Summary

  • Prototype complete flows, including branches and errors.
  • Match fidelity and tool to the question.
  • Use realistic content.
  • Test with people early.

Further reading

Third-party sources, chosen for reliability. They open in a new tab.

Your notes

Marking complete updates your course and roadmap progress.

Back to Interaction design and prototyping Roadmap

PreviousTransitions and animations Next lessonAvoiding confusing interactions