← Go Back

User Flow

What is a user flow?

A user flow is a diagram that shows the path a user takes through your product to complete a specific task. It includes screens or steps, decision points, and actions so you can see the journey from start to goal (or drop-off).

Use it when: you’re designing or improving a task (e.g. sign-up, checkout, onboarding) and need to align the team on the path, spot redundant steps, or plan usability testing.

Copy/paste checklist (one flow)

  • [ ] Start: Where does the user begin? (entry point)
  • [ ] Steps: Each screen or key action in order.
  • [ ] Decisions: Branches (e.g. “logged in?” yes/no).
  • [ ] End: Success (goal reached) and failure/exit points (e.g. abandon).
  • [ ] Annotations: Optional notes on pain points, assumptions, or open questions.

Use simple shapes (screens = rectangles; decisions = diamonds; arrows = direction). Keep one flow per task.

Why user flows matter

  • Give the team a shared picture of how a task works end to end.
  • Expose unnecessary steps, dead ends, or confusing branches.
  • Help you decide what to prototype and test.
  • Provide a clear script for usability testing (e.g. “complete sign-up”).

What a good user flow includes

Checklist

  • [ ] One goal per flow – e.g. “sign up” or “complete first purchase”; don’t mix multiple tasks.
  • [ ] All paths – happy path plus key alternatives (e.g. errors, back, exit).
  • [ ] Realistic – matches the product (or intended product); update when the product changes.
  • [ ] Readable – not so dense that no one can follow it; simplify or split if needed.
  • [ ] Useful – used for design decisions, dev handoff, or test planning.

Common formats

  • Task flow: linear or branched steps for one task. Best for focused flows (sign-up, checkout).
  • Flowchart: shapes and arrows; good for logic and decisions. Use when branches matter.
  • Screens + arrows: each screen as a box; arrows show transitions. Good for communicating with design and dev.

Examples

Example (the realistic one)

Flow: “Complete sign-up.” Start: Landing page CTA “Sign up”. Steps: Email/password screen → Verify email (link in email) → Profile (name, role) → Done (dashboard). Decisions: “Email already exists?” → Login prompt. “Skip profile?” → Dashboard with prompt to complete later. End: Dashboard (success); or close tab (abandon). You use this flow to spot that “verify email” might be a drop-off point and to plan a usability test on the full path.

Common pitfalls

  • Too much detail: every micro-interaction in one diagram. → Do this instead: keep it at screen or key-action level; put detail in wireframes or specs.
  • Only the happy path: you miss errors and exits. → Do this instead: add at least the main branches (error, back, abandon).
  • Out of date: the product changed but the flow didn’t. → Do this instead: treat the flow as a living doc; update when you change the product.
  • Never used: the flow is drawn then forgotten. → Do this instead: use it in kick-offs, test planning, or handoff so it drives decisions.
  • User flow vs user journey: a user journey is often higher level and may include emotion and context; a user flow is the concrete path through the product for one task. Flow = steps; journey = story.
  • User flow vs wireframe: wireframes show one screen’s layout; a user flow shows how screens connect. Use both: flow first, then wireframe each screen.
  • User flow vs sitemap: a sitemap is structure (what exists); a user flow is sequence (what the user does). Different purposes.

Next step

Pick one critical task (e.g. sign-up or first purchase), draw the current user flow (screens + decisions + end states), and share it with the team. Use it to plan a usability test or to spot one improvement.

Related Terms