Mara logo

User Flow

A diagram of the path a user takes through an interface to finish one task, including every decision point, branch and error state.

Deliverables & Artifacts

A user flow maps screens and decisions for a single job: sign up, add a payment method, invite a colleague. Its value is in the branches nobody thinks about until engineering asks — what happens if the code expires, if the card is declined, if the user already has an account, if they close the tab halfway. Flows are where those questions get answered on paper instead of in a bug report.

It is narrower than a customer journey map, which spans channels and time, and it comes after information architecture, which decides where things live. A flow that only shows the happy path is not finished; it is an illustration.

In practice

A team specified a two-step invite flow. Mapping it properly produced eleven branches, including 'invited email already belongs to another workspace'. Before: that case was discovered in production and let users join the wrong account. After it was handled in the flow, it shipped correctly. The catch — the flow doubled the estimate, and the honest estimate was the one that held.

Learn more

You may ask

Frequently Asked Questions

How detailed should a user flow be?

Detailed enough that an engineer can build it without asking what happens on failure. Every decision point needs both branches, and every input needs its invalid case.

Is a user flow the same as a wireframe?

No. A flow shows the sequence and logic between screens; a wireframe shows the layout of one screen. They are usually produced together, since each exposes gaps in the other.

Related terms

All terms

Let's talk about your product.

Happy to look at what you're building and say where design would move the needle.

Contact Us