What is a user flow and how to draw one: step by step

Step 1

Define the user and their goal

A user flow is a diagram of the steps a person takes in a product to complete one task, from the entry point to the result, including the system's responses. In its article on user flows, Figma advises starting with who you're drawing the flow for and what that person wants to achieve. NN/g gives examples of flow goals: buying a tennis racket on a sporting goods site, signing up for email updates, updating a profile picture. In other words, a specific task in a product, not the whole experience with a company. For a practice exercise, pick a familiar scenario: buying cinema tickets, booking a haircut, adding a card to a banking app.

• •write the goal in one sentence: "The user wants to book a haircut for Saturday";
• •clarify the context: which device, how familiar the person is with the product;
• •if there are several tasks, make a separate flow for each.

💡 If your "flow" spans several days, phone calls and office visits, you need a customer journey map (CJM), not a step diagram.

Step 2

Mark the entry point and the endpoint

Where does the person enter the scenario? It could be a Google search, a button on the home page, a push notification or a link from a friend. There can be several entry points, and they shape what the person already knows. Define the endpoint right away too: what counts as success. Figma gives examples: a confirmation page after a purchase, a success screen, or a return to the previous screen after a subtask.

• •entry point: "opens the salon app from a push reminder";
• •endpoint: "sees the booking confirmation with the date, time and stylist";
• •if there are several entry points, pick the main one for the first version and add the rest later.

Step 3

Write out the main steps — the happy path

Now write down the sequence of steps from entry to endpoint as if everything goes perfectly. This is the happy path. You don't need to capture every click: Figma advises showing the meaningful moments — forms the person fills out, buttons they tap and the elements that move them forward. Next to each step you can note what the person does and how the system responds.

• •chooses a service → chooses a stylist → chooses a date and time → confirms → sees the confirmation;
• •diagrams often use simple shapes: an oval for start and end, a rectangle for a step or screen, a diamond for a decision;
• •the key is to mark the same things the same way throughout the flow, so it reads without a half-page legend;
• •draw on paper, with sticky notes or on any online whiteboard, such as FigJam.

💡 Walk through the happy path out loud: "I open the app, I see… I tap…". Missing steps become obvious as soon as you say them.

Step 4

Add branches and errors

Real people rarely stay on the happy path. Figma calls decision points the places where frustration builds up, so this is where clear prompts and alternatives are needed. At each step, ask yourself: what can go wrong, and what might the person choose differently?

• •choice branches: "new customer" or "already has an account";
• •missing data: no free slots on the chosen date — what does the person see and where can they go;
• •errors: a wrong phone number, a lost connection, a declined payment;
• •leaving the scenario: the person changed their mind — will their choices be saved if they come back?

💡 If the flow has grown to dozens of branches, split it into several smaller ones. Figma advises keeping a flow simple and focused on one goal.

Step 5

Turn the flow into screens and check it

Once the flow is ready, mark which steps are separate screens and which happen on the same one. That gives you a list of screens to design. You can go further and draw a wireflow: NN/g describes it as a combination of wireframes and a flowchart, with simplified screens instead of rectangles. After that, the flow becomes the basis for a clickable prototype. The best way to check whether it matches how people behave is a usability test: NN/g calls it the best source of data for user flows.

• •count the steps: can any be merged or removed;
• •check that every screen has a way forward and a way back;
• •in a case study, show the flow next to the mockups: it makes the logic of your decisions visible;
• •update the flow after testing: it should describe what is, not what was planned.

💡 Show the flow in the community without explanations and ask whether the path is clear. If people have to ask questions, simplify the diagram.