Skip to content
UX Atlas
Plate FLOW·009 · WorkflowGrid G1 · Rev. 2026-09-12

User Flows

Map the decisions, states and exits before drawing screens, because most missing work hides in the branches nobody drew.

WorkflowCraft conventionFoundational

Definition

A user flow shows the sequence of steps, decisions and system states required to complete a task. It is a thinking tool first and a communication artefact second, and its main value is exposing the states a screen-led design silently omits.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2What a flow must contain
  3. 3Three levels, three uses
  4. 4Drawing them
  5. 5Drawing one that is worth the time
  6. 6In practice
  7. 7Local chart
  8. 8Continue from here

Reach for this when

  • Before designing any multi-step task.
  • An estimate looks suspiciously small.
  • Two teams disagree about who handles a failure.
  • Several teams own different screens in one task and nobody owns the path between them.

Common mistakes

  • Happy path only.
  • Mixed levels of detail on one canvas.
  • Flows that stop matching the build and are never updated.
  • Maintaining flow diagrams as documentation, which guarantees they are wrong within a month.

What a flow must contain

  • The entry points, all of them. Most tasks can be started from more than one place.
  • Each decision the person makes, with the options available at that moment.
  • Each decision the system makes, including validation, permission and availability.
  • The states that are not screens: loading, empty, partial, expired, offline.
  • The failure branches, with what happens to work in progress.
  • The exits, including abandonment and what is preserved.

Three levels, three uses

LevelShowsUse it for
Task flowOne path through one task, no branchesAligning on the happy path quickly.
User flowDecisions, branches and statesFinding the work nobody has scoped.
Service or journey mapSteps across channels and time, including offlineProblems that leave the product: delivery, support, billing.

Drawing them

Do

  • Use one shape per meaning and say what the shapes mean on the diagram itself.
  • Name each step as a verb the person performs.
  • Show error and empty branches at the same weight as the success path.
  • Keep the flow at one level of detail. Two levels on one canvas becomes unreadable.

Do not

  • Do not draw only the happy path and call the rest edge cases. They are most of the build.
  • Do not put screen thumbnails in a flow meant for decisions. It turns into a sitemap.
  • Do not maintain a flow nobody reads. If it has stopped being used, it has stopped being true.

Drawing one that is worth the time

  1. 1

    Start at the trigger, not the home page

    People arrive from an email, a notification, a search result. Flows that start at the front door describe a journey few people take.

  2. 2

    Draw the happy path first, in one line

    If the happy path does not fit on a line, the flow has more steps than the task needs.

  3. 3

    Add the branches that change the outcome

    Not every condition. The ones where the user ends up somewhere different.

  4. 4

    Mark every point of no return

    Payments, deletions, sends. These are where confirmation, undo and error recovery have to be designed rather than assumed.

  5. 5

    Count the screens that do nothing

    Interstitials, confirmations of confirmations, steps that exist because of an old requirement. Flows make those visible in a way screens do not.

In practice

  1. i.

    The loop nobody had drawn

    What a flow catches early

    An expired verification link sent the user to sign in, which sent them to verify, which sent a new link. Three screens, each individually sensible, forming a loop that only appeared once the flow was on one page.

Local chart

FLOW·009 · Region IV · Grid G1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

User FlowTPL·005 · OFTEN USED WITHPRD to User FlowAI·002 · RELATED CONCEPTEmpty StatesPAT·010 · RELATED CONCEPTLoading StatesPAT·011 · RELATED CONCEPTMulti-Step FlowsPAT·016 · RELATED CONCEPTIdeationFLOW·008 · RELATED CONCEPTProblem FramingFLOW·007 · RELATED CONCEPTWireframingFLOW·010 · RELATED CONCEPT

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Often used with

These usually appear in the same screen or the same decision.

Related concept

Connected closely enough to change how you apply this.