User flow

What is a user flow?

A user flow is a diagram that shows the path a person follows to complete a specific goal on a website or application: signing up, booking a call, buying a product. It starts at an entry point (a search result, an ad, a link), lists each screen or action, shows the decisions along the way and ends with success or abandonment. Designers use it to spot friction before building anything.

A user flow describes one persona and one task. It answers a simple question: what does this person need to do, in which order, to reach the goal?

The standard symbols of a user flow

Most teams rely on a small flowchart vocabulary:

• Rounded shape: start or end point.
• Rectangle: a page, screen or action.
• Diamond: a decision (yes or no, logged in or not).
• Arrow: the direction of movement between steps.

A short example for a contact flow, written as plain steps:

• Google result then Landing page
• Landing page then Decision: ready to contact?
• Yes then Contact form then Confirmation page
• No then Case studies then back to the decision

How to build a user flow

Define the persona and the goal, then list the entry points. Map the shortest path to the goal, add the alternative paths and error states, and remove every step that does not help. Validate the diagram with analytics or session recordings, and test it with real users once a prototype exists. Update it whenever the product changes.

User flow vs task flow vs wireflow

Three diagrams are frequently confused:

Best practices and common mistakes

• Keep one goal per diagram, otherwise it becomes unreadable.
• Include error states and dead ends, not only the happy path.
• Count the steps: each extra screen usually costs conversions.
• Base the flow on real data when possible, not on assumptions.
• Share it with developers and stakeholders early to align expectations.

User flows, UX and conversion

User flows are a direct input to UX design and conversion rate optimisation. Comparing the designed path with analytics shows where visitors drop off in the conversion funnel. They also inform the information architecture, because a clear flow depends on pages that are easy to find and labelled in plain language.

User flow at BeBranded

At BeBranded, we draw the key user flows (contact, booking, purchase) before moving to wireframes, so every screen has a purpose and every step is justified. This work is part of our design service and keeps the final interface focused on your business goals.