Elijah YazdiApp + web design engineer
6 min read

Stop Losing Users: How to Map Flows That Guide Users, Not Confuse Them

User flows ensure that users don't get lost in your app. Here's how to map flows that guide rather than confuse.

Elijah Yazdi

Elijah Yazdi

March 15, 2024

Stop Losing Users: How to Map Flows That Guide Users, Not Confuse Them

Every abandoned checkout, every frustrated support ticket, every "I couldn't figure out how to..." complaint traces back to the same root cause: a user flow that wasn't designed for the user.

User flow mapping is one of the most powerful tools in a designer's kit — and one of the most commonly misused. When done well, a flow map reveals exactly where users will succeed and where they'll get lost, before you've written a single line of code. When done poorly, it creates a false sense of confidence while hiding real problems.

Here's how to map flows that actually work.

What a User Flow Actually Is (and Isn't)

A user flow is not a list of screens. It's not a sitemap. It's not a feature checklist.

A user flow is the sequence of steps a user takes to accomplish a specific goal — including every decision point, every branch, and every dead end. The keyword is goal. Every flow should start with a user intent and end with that intent satisfied.

If you can't state the goal in one sentence, your flow isn't ready to be mapped.

Good flow goal: "Teacher assigns a reading activity to third period, differentiating by reading level."

Bad flow goal: "User navigates through the assignments module."

The second statement describes the app. The first describes a person trying to do something.

The Four Elements of Every Useful Flow

Before you open a diagramming tool, you need to know four things:

1. The trigger — What caused this user to start this journey? Are they responding to a notification? Completing a routine task? Reacting to an error? The trigger shapes everything that comes after.

2. The decision points — Every fork in the road. Where does the user have to make a choice? Where might they choose wrong? Where does the system make a choice on their behalf?

3. The exits — Where can a user leave the flow successfully? Where might they abandon? Not every exit is bad — a completed task is an exit. But an exit mid-flow is a warning sign worth designing for.

4. The error states — What happens when something goes wrong? Empty states, validation errors, server failures, and edge cases all deserve their own branch in the flow. If they're not in your map, they're not in your design.

How to Actually Map a Flow

Start with research, not assumptions

The biggest mistake designers make is sitting down to map a flow from their own mental model. Your intuition about how users move through a product is almost certainly wrong in at least two important ways.

Before you draw anything, talk to the people who will use it. Even two or three short conversations will surface decision points you never would have imagined. If you can't do primary research, use support tickets, analytics data, and session recordings as proxies.

Map the happy path first

The happy path is the ideal sequence — everything goes right, the user makes all the expected choices, and they reach their goal in the minimum number of steps. Map this first, because it gives you the spine of your flow.

Don't add complexity until you have a clean, minimal happy path. If your happy path has more than seven steps, it's probably doing too much. Break it into sub-flows.

Add decision branches and error states

Once your happy path is clean, add branches. At each decision point, ask:

  • What happens if the user chooses wrong?
  • What happens if the data isn't there?
  • What happens if the user skips this step?
  • What happens if the user comes back to this step later?

Each of these branches becomes part of your flow. Each one also becomes something you need to design.

Annotate as you go

A flow map without annotations is a decoration. As you draw, add notes explaining why each step exists, what the user is thinking at each decision point, and what they need to feel confident continuing.

These annotations become your design rationale. They'll save you hours of explanation in design reviews and handoff conversations.

Common Flow Mapping Mistakes

Mapping screens instead of goals. If your flow is one box per screen with arrows connecting them, you have a screen inventory, not a flow map. Add goals, decisions, and emotions.

Ignoring error states. The happy path is rarely the path most users take. Error states, empty states, and edge cases are where products lose people. Map them.

Starting too granular. Start at the level of tasks, not interactions. "Select reading level" is a task. "Tap the dropdown" is an interaction. Map tasks first, then layer in interactions as your design gets more specific.

Never updating the map. Flow maps rot the moment they're created. As designs evolve, maps must evolve with them. A stale flow map is worse than no flow map — it creates false confidence and sends developers in the wrong direction.

A Note on Tools

The tool matters less than the thinking. Figma, Miro, Whimsical, even sticky notes on a wall — all work. What doesn't work is using the tool as a substitute for thinking. Fancy diagrams with unclear goals are just expensive decorations.

Pick the tool your team can collaborate on and update easily. That constraint matters more than any feature.

The Payoff

When you invest time in flow mapping before you invest time in high-fidelity design, you make better decisions earlier — when they're cheapest to make. You surface the hard problems before they're embedded in code. You give developers context they can actually use.

Most importantly, you stop designing features and start designing journeys. And journeys are what users actually experience.

Next time a user tells you they "got lost" in your product, pull out your flow map. If you don't have one, that's your answer.

Get articles like this in your inbox

No spam. Unsubscribe any time.

Share