User flows

Before designing screens, you design journeys — the paths users take through your product to accomplish their goals. A user flow maps those steps, and getting the flow right before you design any screen is what prevents building a beautiful interface that doesn't actually work. This lesson is about designing the path, not the pixels.

What a user flow is and why it comes first

A user flow is a diagram of the steps a user takes to complete a task — from entry point to goal — showing each screen/action and the decisions along the way:

A USER FLOW = the path to a goal, step by step

Example — "Sign up and make a first post":
  [Landing page] -> click Sign Up -> [Sign-up form] -> submit
    -> (email valid?) --no--> [Error, retry]
                      --yes--> [Welcome screen] -> [Create post] -> Publish
    -> [Success! Post is live]

It shows: entry points, each step/screen, DECISION points (branches),
and the end goal — plus error/alternative paths.

WHY FLOWS COME BEFORE SCREENS:
- You see the WHOLE journey + catch problems (dead ends, missing steps,
  needless friction) BEFORE investing in visual design.
- You find the SHORTEST sensible path to the goal (fewer steps = less
  drop-off).
- You spot every state you must design for (errors, empty, edge cases).
- Cheap to change a flow diagram; expensive to rebuild finished screens.

Design the JOURNEY first, then the screens that make each step happen.

The core discipline: map the journey before designing the screens. It's cheap to fix a flow diagram and expensive to rebuild finished UI. Flows let you see the whole path, find the shortest route to the goal, and catch dead ends and missing states before a single pixel is placed.

Designing good flows

PRINCIPLES OF A GOOD FLOW

- START FROM THE USER'S GOAL + entry point. What are they trying to do, and
  where do they begin?

- MINIMISE STEPS to the goal. Every extra step/field/click is friction +
  a chance to drop off. Ruthlessly remove the unnecessary. (Ask of each
  step: is this truly needed HERE?)

- MAP DECISION POINTS + BRANCHES — where the path splits (logged in or not?
  valid input or error?). Design ALL branches, not just the happy path.

- DESIGN THE UNHAPPY PATHS — errors, empty states, "what if they don't have
  an account", "what if it fails". Beginners design only the perfect case.

- ONE PRIMARY ACTION PER STEP — guide the user forward clearly; don't
  present five equal choices at each step.

- MATCH THE USER'S MENTAL MODEL — the flow should follow how users EXPECT
  the task to go, in a logical order.

Use simple boxes + arrows (paper, Figma, any diagram tool). The thinking
matters, not the fanciness.

Two habits make flows strong: minimise steps (every extra step is friction and drop-off) and design the unhappy paths (errors, empty states, branches) — because real users hit those constantly, and beginners design only the perfect "happy path".

The mistake beginners make

The biggest mistake is jumping straight to designing screens without mapping the flow — building beautiful individual screens that don't connect into a coherent journey, leaving dead ends, missing steps, and confusing paths discovered only after everything's built. Map the flow first. The second mistake is designing only the happy path — the perfect case where everything goes right — and forgetting errors, empty states, and branches (no account, invalid input, no results, failure). Real users hit these constantly; undesigned states are where products feel broken. Design every path. The third mistake is too many steps — a flow bloated with unnecessary screens, fields, and confirmations that add friction and drop-off. Ruthlessly find the shortest sensible path to the goal. Fewer steps, all paths designed, journey before screens.

Your turn

---

Your turn

1. Pick a key task in your product (e.g. sign up, buy something, complete an action). On paper or in a diagram tool, map the user flow: entry point -> each step -> the goal, using boxes and arrows.
2. Add the DECISION points and branches (logged in or not? valid input or error?) — and design the branches, not just the straight-through path.
3. Explicitly map the UNHAPPY paths: errors, empty states, failures, 'what if they don't have an account'. Notice how many you'd have missed by designing only the happy path.
4. Count the steps to the goal, then ruthlessly cut: for each step/field/click, ask 'is this truly needed here?' Remove the unnecessary and find the shortest sensible path.
5. Check it matches users' mental model — does the order follow how they'd naturally expect the task to go? Reorder anything that feels surprising.

Key points

• A user flow maps the steps a user takes to accomplish a goal (entry -> steps -> decisions -> goal) — you design the JOURNEY before the screens.
• Flows come first because it's cheap to change a diagram and expensive to rebuild finished screens — they reveal dead ends, missing steps, needless friction, and every state you must design, before visual design.
• Design good flows by starting from the user's goal, minimising steps (every extra step is friction + drop-off), mapping all decision branches, and keeping one primary action per step.
• Design the UNHAPPY paths (errors, empty states, failures, branches) not just the happy path — real users hit those constantly, and undesigned states are where products feel broken.
• The mistakes: jumping to screens without mapping the flow, designing only the happy path, and bloating the flow with unnecessary steps — journey before screens, all paths, shortest sensible route.