What is a user flow in UX design?

A user flow is a diagram of the steps a user takes through a product to complete one task, including every screen, action, and decision along the way. Designers map flows before wireframing so each screen has a defined job. The classic example is authentication: this template's flow runs from a landing page through sign-in, sign-up, Google SSO, and password reset.

What is the difference between a user flow and a user journey?

A user flow maps one task inside your product: the screens, actions, and decision branches between a user's entry point and their goal. A user journey maps the whole relationship across every touchpoint, including the ad they clicked, the emails they got, and how they felt at each stage. Flows are micro and diagrammatic; journeys are macro and narrative. Use a flow to design screens, a journey to find experience gaps.

What are some examples of user flows?

Sign-up and login flows are the most common, which is why this template uses one: account check, Google SSO decision, password reset loop. Other everyday examples include an ecommerce checkout (cart, shipping, payment, confirmation), a new-user onboarding flow (welcome, profile setup, first key action), and a search-to-purchase flow. Anything a user does in more than one step can be flowed.

What shapes are used in a user flow diagram?

User flows borrow standard flowchart notation: rounded pills for start and end points, rectangles for screens or actions, diamonds for decisions, and arrows for direction. Label every branch leaving a decision (Yes and No at minimum) so nobody guesses. This template applies that notation to a real flow; the same shapes power every flowchart in Whimsical.

What is a user flow map?

A user flow map is the same thing as a user flow diagram: a visual map of the path users take through a website or app to finish a task. The term shows up more in marketing and website contexts, but the artifact is identical. Whether you're mapping a website's signup funnel or an app's onboarding, you chart entry point, screens, decisions, and the goal state.

TemplatesFlowchartsWhimsical User Flow

User Flow

A user flow is a diagram of the path a user takes through a product to complete a task, screen by screen and decision by decision. This template is a complete worked example: the sign-in and sign-up flow for a web app, from the landing page through Google SSO, password reset, and email sign-up, all converging on entering the app. UX designers and product teams use it to map flows before wireframing.

Use this template

A worked sign-in and sign-up user flow with labelled Yes/No decision branches.

What's included

A complete worked flow. The real sign-in and sign-up path for a web app, start to finish.
Labelled decision points. 'Have an account?', 'Use Google SSO?', and 'Know your password?' diamonds, each with Yes and No branches.
A password recovery loop. Forgot password leads to reset and back to sign-in, the branch most flows forget.
A single converging endpoint. Every branch lands on Enter App, so no path dead-ends.
Secondary page links. Pricing, examples, privacy, and terms pages branch off the landing page, mirroring a real site.

Why map a user flow?

Catch dead ends on paper. Every decision diamond forces the question 'where does No go?'; the answer is cheaper here than in production.
One picture for design and engineering. The flow shows every state that needs building, including the forgot-password loop most teams remember late.
Wireframe with intent. When the flow comes first, each screen you draw has a defined entry, job, and exit.
Spot friction before users do. Each extra decision or screen is a place people stall; counting steps on a flow is the fastest audit.
A shared map of the product. New designers read the flow instead of clicking around guessing how auth works.

How to use this template

Pick one task. A user flow covers a single goal, like signing in; map other tasks as separate flows.
Set the entry point. Decide where users arrive from: a landing page, an ad, an email link, or a push notification.
Lay out screens and actions. Add a rectangle for each screen or step in the happy path, connected with arrows.
Branch at every decision. Add a diamond wherever the user or system chooses, and label each exit: Yes, No, error, success.
Close every path. Trace each branch to the goal state or an explicit exit; dangling arrows mean undesigned states.
Walk it as a user. Read the flow aloud, one decision at a time; the awkward steps announce themselves.

Map your user flow

User flow vs user journey

A user flow and a user journey answer different questions at different zoom levels. The flow is zoomed in: one task, inside one product, drawn as screens and decision branches. This template's flow covers sign-in and sign-up, nothing more. The journey is zoomed out: the entire relationship from first ad to renewal, across email, support, and the product itself, usually annotated with what the user feels at each stage. Teams need both. The journey tells you which moments matter; the flow tells you exactly how to build them.

Frequently asked questions

A user flow is a diagram of the steps a user takes through a product to complete one task, including every screen, action, and decision along the way. Designers map flows before wireframing so each screen has a defined job. The classic example is authentication: this template's flow runs from a landing page through sign-in, sign-up, Google SSO, and password reset.
A user flow maps one task inside your product: the screens, actions, and decision branches between a user's entry point and their goal. A user journey maps the whole relationship across every touchpoint, including the ad they clicked, the emails they got, and how they felt at each stage. Flows are micro and diagrammatic; journeys are macro and narrative. Use a flow to design screens, a journey to find experience gaps.
Sign-up and login flows are the most common, which is why this template uses one: account check, Google SSO decision, password reset loop. Other everyday examples include an ecommerce checkout (cart, shipping, payment, confirmation), a new-user onboarding flow (welcome, profile setup, first key action), and a search-to-purchase flow. Anything a user does in more than one step can be flowed.

User flows borrow standard flowchart notation: rounded pills for start and end points, rectangles for screens or actions, diamonds for decisions, and arrows for direction. Label every branch leaving a decision (Yes and No at minimum) so nobody guesses. This template applies that notation to a real flow; the same shapes power every flowchart in Whimsical.
A user flow map is the same thing as a user flow diagram: a visual map of the path users take through a website or app to finish a task. The term shows up more in marketing and website contexts, but the artifact is identical. Whether you're mapping a website's signup funnel or an app's onboarding, you chart entry point, screens, decisions, and the goal state.