Shopify blog
A user flow is a diagram that maps the path a visitor takes through your store to complete a specific goal, such as finding a product or creating an account. Every screen, click, and decision point is mapped, which gives your team a shared picture of how a customer experiences your site.
According to the Baymard Institute, the average documented cart abandonment rate is nearly 70%. Many of those exits happen because shoppers hit a friction point, which could be an unexpected form field, a slow-loading page, or a checkout flow that asks for too much information. A user flow helps you identify those drop-off points before they cost you sales.
This guide walks you through what user flows are, how they differ from user journeys and task flows, how to build one, and how to read the data in your store’s analytics.
What is a user flow?
A user flow is a step-by-step diagram of the path a user takes to complete a task on a website or app. Each node in the diagram represents a screen or decision point, and each arrow represents the action that moves the user forward. What you get is a visual record of how customers interact with your store, including the friction points where they hesitate or drop off and the activation moments that make them complete a purchase.
User flows are used at two stages of the design process. Before launch, UX designers build intuitive user flows to pressure-test a product or website’s logic and identify dead ends. After launch, product managers and analysts use user flow data to interpret real visitor behavior and reduce the overall drop-off rate.
How user flows work
“User flow,” “user flow chart,” “user flow diagram,” and “UX flow” all refer to the same artifact: a diagram that shows the steps between an entry point and an exit point.
Three basic elements make up a user flow:
- Entry points. Where users arrive, such as a homepage, paid ad, organic search result, email link.
- Steps and screens. Each page or screen the user encounters: e.g., collection page, product page, cart, checkout.
- Decision points. Moments where users choose between paths—e.g. adding to cart versus continuing to browse, guest checkout versus account creation—or leaving the site.
In practice, a user flow chart branches at every decision point, which distinguishes it from a simpler task flow. Mapping those branches lets teams spot gaps and identify which steps carry the highest drop-off rate.
Benefits of user flows
Mapping user flows gives your team a shared, evidence-based picture of how customers move through your store and a concrete starting point for fixing the steps where they don’t.
Better understanding of user behavior
User flows let you see your store from the perspective of the customer and how they navigate it, including the detours, backtracking, and exits you might not have considered.
Ability to make interfaces more intuitive
Once a flow is mapped, you can see which steps have high dwell times or repeated back-clicks and which create a natural path toward activation. Fixing a single friction point on a user interface, like shortening a checkout form or clarifying a call to action (CTA), can reduce your drop-off rate without needing a full redesign.
A clear product story to share with stakeholders
User flows are concrete deliverables. A diagram showing that 40% of users exit between the cart and the first checkout step is a more persuasive case for a UX investment than a verbal description of customer confusion. If you’re pitching a redesign to investors or collaborating with a development agency, a comprehensive user flow diagram gives everyone a shared reference point.
Identified friction points
Friction points are the steps in a flow where users slow down, go back, or leave. Baymard Institute’s 2025 study shows the most common reason shoppers abandoned a cart is because they were “just browsing” or “not ready to buy” (42%).
Setting that segment aside, the leading checkout-specific reasons were extra costs such as shipping being too high (40% of shoppers), being asked to create an account before making a purchase (18%), and a checkout process that was too long or complicated (17% of shoppers). Baymard’s benchmark data shows the average checkout contains 23.48 form elements, which is roughly twice the 12 to 14 elements an optimized flow needs.
User flow vs. user journey vs. task flow
A user journey maps the full customer experience across every channel and touchpoint. A task flow documents a single, linear interaction with no branching. A user flow sits between them.
| User journey | User flow | Task flow | |
|---|---|---|---|
| Definition | The end-to-end experience across all touchpoints and emotions | Steps a user takes to complete a specific goal on a site or app | A linear sequence of user interface (UI) actions for a single scenario with no branching |
| Scope | All channels and user interactions over time | One goal on one site or app | One linear interaction on one site or app |
| Focus | Emotions, motivations, and pain points at every stage | Decision points and screen transitions | Step-by-step UI actions |
| Artifact | Journey map with stages, touchpoints, and sentiment | User flow diagram with decision branches | Simple linear flowchart |
| When to use | Aligning teams on overall customer experience strategy | Designing or auditing a product experience | Documenting how a specific interaction works |
| Owner | Product, marketing, or CX teams | UX designer or product manager | UX designer or developer |
User journey
A user journey, also called a customer journey map, covers the full arc of how a customer discovers, evaluates, buys from, and returns to a brand. It spans multiple channels (organic search, Instagram, email, in-store) and includes emotional states and motivations alongside actions. The user journey is the macro view.
User flow
A user flow zooms in on one scene within that larger story. It maps a specific task (e.g., checking out, finding a product via search, completing onboarding) on a single website or app. A full customer journey is made up of multiple user flows. Unlike a user journey, a user flow doesn’t track emotions. It tracks screens, decisions, and paths.
Task flow
A task flow is the most granular level. It covers a single interaction with no branching: a strict sequence of steps for how one specific action is completed. Task flows are useful for documenting how an individual feature works, and multiple task flows combine to create a user flow.
In practice, the three work together:
- User journeys define the strategic goal (“make repeat purchase easy”)
- User flows map the paths that lead to that goal
- Task flows document how each individual step in those paths works
How to create a user flow
Building a user flow takes five steps: define the goal, identify where users enter, map the screens and decisions, sketch the user flow diagram, and validate it with real data.
1. Define the user and the goal
Start with a single user type and a single goal. A first-time visitor buying a product has different needs than a returning customer reordering a favorite. For example, you might start with “a first-time visitor who found the store via a paid Instagram ad and wants to purchase a single product.”
2. Identify entry points
Entry points are where users arrive before they start the flow. The entry point might be a:
- Homepage (via direct traffic or branded search)
- Collection or category page (via organic search or navigation)
- Product detail page (via paid ads, social, or email)
- Landing page (via a specific campaign)
Shopify’s behavior reports show landing page performance by source, so you can see which entry points drive the most sessions and where drop-off begins.
3. Map the steps and decision points
For each entry point, list every screen or state the user encounters on the way to the goal. Then identify the decision points or the moments where the user’s path branches.
These decision points might include:
- Add to cart versus continue browsing
- Create an account versus check out as guest
- Select a shipping speed versus use the default
- Save payment versus don’t save
Mark each decision with a diamond on the user flow diagram and give each outcome its own branch.
4. Sketch the diagram
With the steps mapped, sketch the flow using standard flowchart shapes. Rectangles for screens, diamonds for decisions, arrows for transitions.
Free tools for sketching user flows include FigJam, Miro, Whimsical, Lucidchart, and draw.io.
5. Validate with real data
Validate your sketched flow against actual visitor behavior using two sources:
- Shopify’s behavior reports, which show online store sessions, top landing pages, and conversion steps.
- GA4’s path exploration, which maps the actual sequence of pages visitors move through, including where they exit.
Update your user flow diagram if there are any spots where the real data diverges from your diagram.
When to use a user flow
Use user flows whenever a new feature or significant design change is being planned, or when analytics show a drop-off you need to diagnose. Three specific reasons include:
- New features. Before building a new checkout option, loyalty program, or onboarding sequence, map the intended flow.
- Redesigns. A user flow creates a shared reference for designers, developers, and stakeholders when restructuring navigation or a checkout experience.
- Improvement cycles. When analytics show a drop-off, a user flow helps identify why. GA4’s path exploration shows the exact pages users visit before exiting, and the specific steps where the exit rate spikes.
User flow examples
Here are some example user flows on an ecommerce website.
Homepage to purchase user flow example
- Entry point: Homepage
- Goal: Completed purchase
- Steps: Homepage → Collection page → Product detail page → Add to cart → Cart review → Checkout (contact, shipping, payment) → Order confirmation
Let’s say a customer’s entry point is the homepage. From there, the customer has options. They can jump to a product search, browse the product catalog, investigate additional information about the company, or use a Contact page.
The customer decides to search for a product, skims the results page, filters using faceted search options, and lands on a product they might want to purchase. The user flow would depict these actions. Next comes the checkout process. The customer reviews all items in the cart, edits the quantity, shipping info, payment info, and finalizes the transaction.
Faceted search to product user flow example
- Entry point: Collection page (organic search or navigation)
- Goal: Product detail page view
- Steps: Collection page → Apply filters (category, price, brand) → Filtered results → Product detail page → Decision: add to cart or continue browsing
Stores with large catalogs need an easy, smooth path from category page to product detail page, as Audio Advice quickly learned.
Its customers arrive with specific needs and use filters to narrow a deep catalog to the right product. Before switching to Shopify, it found slow load times frustrated customers mid-search, and the marketing team couldn’t update comparison charts or expert guides without queuing a developer request, leaving product pages stale when interest was highest.
After migrating to Shopify, Audio Advice saw a 47% increase in conversion rate year over year and a 21% increase in overall revenue. The search-to-product flow, including faster pages, navigable filters, content the marketing team could update without engineering, was the same path but just without the previous friction.
Returning customer reorder user flow example
- Entry point: Email campaign or direct visit
- Goal: Reorder of a previously purchased item
- Steps: Sign in (or stay signed in) → Account order history → Select previous order → Re-add item to cart → Confirm saved address and payment → Order confirmation
Returning customers already know your product, so the friction points they face might be slightly different to a new shopper. For example, they might struggle to login, find the previous item, and confirm payment details.
Abandoned cart recovery user flow example
- Entry point: Abandoned cart recovery email or retargeting ad
- Goal: Completed purchase
- Steps: Recovery email → Click back to cart (pre-populated) → Review items → Checkout → Order confirmation.
Cart abandonment is a drop-off point, but it’s also the start of a recovery flow.
Take Society6, for example. The artist-driven marketplace partnered with agency Pattern to rebuild its commerce experience on Shopify. After redesigning the checkout flow and mobile experience, it increased mobile conversion by 45%. Much of that improvement came from removing friction between a user’s re-entry to the cart and completing the purchase.
User flow analysis: finding drop-offs in your store
User flow analysis is the process of comparing the flow you designed for users against the paths they actually take, with the goal of finding and fixing the steps where customers drop off.
Here are three things to look for when reviewing flow data:
- Drop-off steps. Where in the flow does your exit rate spike? Baymard’s 2025 checkout research ties abandonment causes to specific steps, like unexpected shipping costs at the payment step, or account creation prompts interrupting checkout. A spike at a particular step is a signal to examine what that step asks of the user.
- Time on page vs. conversion rate. A page with high session time and low conversion warrants investigation. Baymard’s 2025 product page benchmark found that 62% of leading ecommerce sites have mediocre or worse product page UX, with size selection, image quality, and variant display among the most commonly documented failure points.
- Mobile vs. desktop gaps. Baymard’s user research found mobile navigation performance trails desktop by nine percentage points across more than 180 sites. A store where drop-off is disproportionately higher on mobile than desktop likely has a mobile-specific flow problem.
A drop-off problem isn’t always obvious until you have the systems to see it. Offbeat Bikes owner Mandalyn Renicker was spending hours every week manually reconciling inventory between her Squarespace website and Square POS. When a bike sold in-store, online shoppers couldn’t see it was gone, leading to oversells, cancelled orders, and refunds.
“Our website’s ecommerce functionality was limited,” says Mandalyn. “Navigating from product information pages to then find pricing or make a purchase wasn’t intuitive. Shoppers were getting lost in the flow.”
After moving to Shopify, inventory synced automatically across both channels, she saved over four hours a month on stock management, and year-over-year kids’ bike sales increased 100%. The user flow problem (customers unable to find pricing or check real availability) had a data problem underneath it.
Serge Blanco, a French menswear brand with more than 50 stores, ran into a similar wall at a different scale. Stock updates on its legacy system lagged behind reality, integrations failed regularly, and the mobile checkout was, as traffic manager Matthieu De Vaulx said, “complex and unintuitive.” After migrating to Shopify Plus, it reached a 5% conversion rate during peak seasons and, for the first time, had a single view of stock and customer behavior across all channels.
Both stores highlight that a flow analysis problem is often a data infrastructure problem first. Before you can fix a drop-off, you need to be able to see it clearly.
Once you can see it, start with the smallest testable change. Reordering form fields, changing a CTA from “Submit” to “Continue to shipping,” or adding a progress indicator to a multistep checkout are all changes that can be tested and measured based on identified friction points.
User flow templates and tools
The right choice of tool or template depends on whether you need a collaborative tool, a code-based approach, or a quick sketch.
Here are some options:
- FigJam (Figma). Templates available in the Figma Community. Free for up to three collaboration spaces.
- Miro. Whiteboard tool with pre-built user flow templates. Free plan includes three editable boards.
- Whimsical. Purpose-built for user flow diagrams and wireframes. Free plan available.
- Lucidchart. More structured diagramming tool with flowchart-specific shapes and export options. Free plan available.
- draw.io. Free, open-source, and browser-based. Integrates with Google Drive. No account required to start.
For Shopify-specific templates, the Figma Community includes ecommerce UI kits with common flow patterns. Start from a template, adapt the steps to your specific scenario, and validate against your own analytics data.
Build user flows that move customers through your store
A user flow is only useful if it reflects how your customers actuallybehave, not how you hope they do. Map the flow, check it against your analytics, and fix the friction points you find. Each improvement to the path between a visitor’s first click and a completed order is an improvement to your conversion rate.
Shopify Checkout is designed to reduce friction at the final, highest-stakes step of the flow. Learn how it works and how to customize it for your store.
User flow FAQ
How many steps should a user flow include?
The number varies by task complexity and user type. Complex tasks and different users may require more steps. A new user, for example, may require added steps to complete account registration steps. The goal is to capture as many steps as necessary to describe the actual user flow.
Are there different types of user flows?
Yes, there are many different types of user flows, categorized by level of complexity, type of user (target audience, secondary user), and degree of usability (easy and fluent pathways versus error prone pathways).
What makes a good user flow?
A good user flow covers one goal, one user type, and maps every screen and decision point between entry and completion. It reflects how users actually behave, verified against analytics data, rather than how the designer expects them to.
What is the difference between a user flow and a user journey?
A user journey covers the full arc of a customer’s relationship with a brand, including every channel, touchpoint, and emotion from first awareness to repeat purchase. A user flow zooms in on one specific task on one digital surface, mapping the screens and decisions between an entry point and a completed action. Multiple user flows make up a user journey.
How do you create a user flow for an ecommerce site?
Define the user type and goal, identify where they enter the store, map every screen and decision point between entry and completion, sketch the user flow diagram in a tool like FigJam or draw.io, then validate it against real data using Shopify’s behavior reports or GA4 path exploration. Where the data diverges from the diagram, update the user flow diagram.
