User Flow

A user flow is a visual or documented representation of the steps a person takes through a product to accomplish a specific goal. It traces the path from entry point — a landing page, a notification, a deep link — through a sequence of decisions and actions to a defined outcome: a completed purchase, a submitted form, an uploaded file. Unlike a site map, which shows the static structure of an information space, a user flow captures the dynamic experience of moving through it. It answers the question: “What does this journey actually feel like, step by step?”

User flows can be represented at varying levels of fidelity. At the simplest, they’re boxes-and-arrows diagrams showing screens and decision points. At a higher fidelity, they incorporate wireframes or screenshots at each step, annotated with the user’s goals, questions, and emotional state. The right fidelity depends on the audience and the stage of the project. Early in discovery, a rough flow on a whiteboard helps the team align on the fundamental sequence. Later, a detailed flow with all edge cases and error states becomes the specification that guides wireframe creation and development.

The most common mistake in user flow design is mapping only the happy path — the ideal sequence where everything goes right. Real users take wrong turns, encounter errors, change their minds, get interrupted, and come back later. A robust user flow accounts for these scenarios: What happens if the payment fails? What if the user abandons mid-flow and returns tomorrow? What if they hit the back button at the confirmation step? These branching paths are where the design gets tested, and where most friction hides.

User flows are also diagnostic tools. When analytics show that users drop off at a particular step, mapping the flow around that step reveals why. Often, the flow itself creates the problem — asking for information too early, introducing an unexpected fork, or failing to provide the signifiers that guide users to the next action.

Why it matters

User flows force designers to think sequentially and empathetically. It’s easy to design individual screens in isolation and assume they’ll connect smoothly. Flows expose the seams: the awkward transitions, the redundant steps, the moments where the user’s mental model expects one thing and the interface delivers another. They turn a collection of screens into a coherent experience.

From a product strategy perspective, user flows are where business goals and user needs meet. Each step in a flow is an opportunity to deliver value and a risk of losing the user. Optimising flows — removing unnecessary steps, clarifying decision points, smoothing transitions — has a direct, measurable impact on conversion rates, task completion, and user satisfaction. Teams that invest time in flow design before jumping to visual design consistently ship products that perform better.

In practice

• E-commerce checkout optimisation. A retail team mapped their checkout user flow and discovered that users encountered six distinct screens between cart and confirmation. By consolidating shipping and billing into a single step, offering guest checkout to eliminate forced registration, and moving the promo code field to the cart page, they reduced the flow to three steps. Cart abandonment dropped by 18%.

• Onboarding flow for a SaaS product. Rather than dumping new users into an empty dashboard, the team designed an onboarding flow that walked users through three high-value actions: creating their first project, inviting a teammate, and connecting an integration. Each step had a clear completion state and a signifier pointing to the next action. The flow was informed by usability testing that revealed which early actions correlated with long-term retention.

• Error recovery in a banking application. When a funds transfer failed due to insufficient balance, the original flow displayed a generic error and sent the user back to the start. The redesigned flow kept the user on the transfer screen, pre-filled all previously entered data, clearly explained the error, and offered contextual options: transfer a smaller amount, move funds from another account, or set up an alert. This thoughtful branching turned a frustrating dead end into a moment that built trust and aligned with the information architecture of the broader banking experience.