What Is a User Flow and How to Map One Step by Step
Basics4 minInnovialabs editorial team
In short
A user flow is a diagram of the steps, screens and decision points a user goes through to reach one goal; you map it before mockups to spot extra steps, dead ends and forgotten scenarios early.
What a user flow is
A user flow is a diagram of a user's path to a specific goal inside a product: sign up, place an order, reset a password. It shows where the person starts, which screens they pass through, where they make decisions and how it all ends.
The main value of a flow is that it comes before mockups. On a diagram it is cheap to notice that there are too many steps, that an error has no way out, or that a whole scenario is missing.
User flow vs journey map vs sitemap
| Tool | What it shows | Scope |
|---|---|---|
| Sitemap | Structure of sections and pages | The whole product, no movement |
| User flow | Steps and branches toward one goal | One scenario inside the product |
| Customer journey map (CJM) | Experience, emotions and touchpoints | The whole customer path, including offline |
Put simply: a sitemap answers "what is in the product", a user flow answers "how do I reach the goal", and a CJM answers "what does the person feel along the way".
Notation
There is no strict standard, but this set is the most common:
- Entry point: where the user came from, such as an ad, an email or the home page. Usually an oval or rounded block.
- Screen or page: a rectangle with a name.
- Action: a label on the arrow, like "tapped Continue" or "entered code".
- Decision: a diamond with a question and two or more exits, like "Email already taken?"
- System process: something that happens without the user, like sending an email or checking a payment.
- End point: the goal reached or a deliberate exit.
What matters is agreeing on it within the team and adding a legend to the diagram.
Example: signup
- Entry: the user clicked "Create account" on the home page.
- Screen: form with email and password.
- Decision: is the data valid?
- No → error message next to the field, back to the form.
- Decision: is the email already registered?
- Yes → offer to sign in or reset the password.
- System: send an email with a confirmation code.
- Screen: code entry.
- Decision: is the code correct and not expired?
- No → option to request a new code.
- Screen: short onboarding or straight to the account.
- End: the user is registered and sees the product.
This diagram already shows which screens need to be designed (including errors) and which copy will be needed.
How to map a flow step by step
- Define the goal and the user. One flow covers one goal for one type of user.
- List the entry points. People may arrive from an ad, an email or a direct link, and the path can differ.
- Draw the happy path. The shortest route with no errors.
- Add branches. At every step, ask what can go wrong. What if the user has no data, no access, no funds on the card?
- Check the exits. Every branch needs an ending: the goal, a return, or a clear way out.
- Walk through it with the team. Developers will spot technical steps; support will spot common user problems.
How flows catch dead ends
A dead end is a state where the user can neither continue nor go back. Typical examples:
- an error with no "Try again" button;
- the email never arrived, and there is no way to request it again;
- an empty list with no hint about what to do next;
- no confirmation screen after payment.
A simple check: every diamond has all exits going somewhere, and every screen has a next step. If a branch just stops, you have found a problem before anyone designed or coded it.
Common mistakes
- One flow for everything. A diagram with a hundred blocks is unreadable; split it by goal.
- Only the happy path. Errors and edge cases are what make a flow useful.
- No entry points. The path from an ad and the path from a notification often differ.
- An outdated diagram. If the product changed and the flow did not, the team relies on the wrong picture.