Ecommerce User Flow: Map Every Step From Browse to Checkout

This guide is for founders, PMs and designers planning a shopping app or redesigning one that leaks customers. You'll learn how to map a complete user flow for an ecommerce app, from the moment someone arrives to the moment their order lands, including the edge cases most flows forget and the metrics that tell you where people drop off.

TL;DR: Map the ecommerce flow in six stages: entry, discovery, product decision, cart, checkout and post-purchase. For each stage, define the screen, the user's question, the main action and the exits. Most lost revenue hides in checkout and in the edge cases (out of stock, payment failure, wrong address), so map those explicitly.

What a user flow is (and isn't)

A user flow is the path a person takes through your app to complete a goal, drawn as screens and decisions connected by actions. Unlike a sitemap, it shows order, not organisation.

For ecommerce, the user flow is where you decide how many steps stand between "I want this" and "Order confirmed". Every step you remove is revenue you keep. Baymard Institute's long-running checkout research puts average documented cart abandonment at around 70%, and lists unexpected extra costs, forced account creation and long or complicated checkouts among the most common reasons people give for leaving.

Step 1: Define the user and the goal

Start with who is shopping and what they're trying to do, because the flow for a repeat grocery order is very different from the flow for buying a first sofa.

Write a one-line flow goal for each primary scenario:

• •"A returning customer reorders their usual coffee beans in under 30 seconds."
• •"A first-time visitor from an Instagram ad buys the advertised dress without creating an account."
• •"A gift buyer finds a present under a budget and ships it to a different address."

If you're not sure who your main shoppers are, a quick persona from the user persona generator helps you pick the scenario to design first.

Step 2: List every entry point

Users don't always start at your home screen.

A deep-linked product page must make sense without the home screen's context.

Step 3: Map the six stages

Here is the full ecommerce flow, stage by stage. For each, note the screen, the question in the user's head, the primary action, and the exits.

Stage 1: Entry and home

• •Question: "Is this the right place for what I want?"
• •Key elements: search bar at the top, categories, personalised or trending items, active promotion.
• •Primary action: search or tap a category.
• •Exits: search, category, promotion, account.

Amazon keeps search at the top of nearly every screen; a small curated catalog should lead with collections instead.

Stage 2: Discovery (search and listing)

• •Question: "Which of these is the one?"
• •Key elements: search suggestions as you type, filters and sort, product cards with image, name, price, rating and a wishlist heart.
• •Primary action: open a product.
• •Exits: product detail, filter sheet, back to home.

Design the no-results state now: suggest spelling fixes, related categories and popular items rather than a blank screen. Keep filters in a bottom sheet with a sticky "Show 124 results" button so users see the effect of their choices.

Stage 3: Product decision (product detail page)

• •Question: "Is it right for me, and what will it really cost?"
• •Key elements: swipeable photos, title, price, variant pickers (size, color), stock status, delivery estimate, returns policy, reviews, sticky "Add to bag" button.
• •Primary action: add to cart.
• •Exits: cart, continue shopping, size guide, reviews.

Show the total cost early. A delivery estimate and shipping cost on the product page prevents the "surprise costs" abandonment at checkout. If a variant is out of stock, show it disabled with a "Notify me" option instead of hiding it. For screen-level detail on this stage, see designing ecommerce product screens.

Stage 4: Cart

• •Question: "Is this everything, and what's the total?"
• •Key elements: items with thumbnail, variant and quantity stepper, remove and save-for-later, promo code field (collapsed), subtotal, shipping, taxes or an estimate, a prominent "Checkout" button.
• •Primary action: checkout.
• •Exits: edit item, continue shopping, express pay.

For multi-item shopping like fashion or grocery, confirm "Add to bag" with a small sheet ("View bag" / "Keep shopping") instead of jumping to the cart.

Stage 5: Checkout

• •Question: "How fast can I finish, and is it safe?"
• •Key elements: guest checkout option, express pay (Apple Pay, Google Pay, Shop Pay or PayPal), shipping address with autocomplete, delivery options, payment, order summary, "Place order" button with the final total.
• •Primary action: place order.
• •Exits: edit cart, change address, payment failure.

Rules that consistently help:

1. •Offer guest checkout. Ask for an account after purchase: "Save your details for next time?" When you do ask, follow the patterns in our login screen design guide.
2. •Put express pay first. Apple Pay and Google Pay can fill shipping and payment in one sheet.
3. •Use a single scrolling page or very few steps with a visible progress indicator.
4. •Autofill everything: address autocomplete, the right keyboard types, card scanning.
5. •Show the final total on the button: "Pay $84.20".
6. •Keep the user in place on errors. Never clear the form after a failed payment.

Stage 6: Confirmation and post-purchase

• •Question: "Did it work, and when will it arrive?"
• •Key elements: order number, delivery estimate, summary, track order, account creation prompt for guests.
• •Primary action: track order or continue shopping.
• •Exits: order tracking, home, share.

The flow doesn't end here. Map the follow-on flows: shipping notifications, order tracking, delivery, review request, returns and reorder. Reorder is often the most valuable flow in grocery, beauty and pet apps, so give it a one-tap path from the order history.

Step 4: Write the flow as a diagram

Once the stages are clear, draw the flow. Use rectangles for screens, diamonds for decisions and arrows labelled with actions. A text version of the happy path for a first-time buyer from an ad:

Ad deep link → Product detail → [Select size] → Add to bag
→ Bag sheet → Checkout → [Express pay available?]
   Yes → Apple Pay sheet → Confirm → Order confirmation
   No  → Guest details → Address → Delivery option → Card → Place order
→ Order confirmation → [Create account?] → Tracking

Draw the happy path first, then add a branch for each decision.

Step 5: Map the edge cases

Edge cases are the screens most design files forget.

Step 6: Attach metrics to every step

A flow is also a funnel. Instrument each stage so you can see where people leave:

A big drop between checkout started and payment submitted usually points to surprise costs, forced sign-up or a long form.

Step 7: Turn the flow into screens and test it

With the flow mapped, list every screen it implies, usually 10–15 for a basic shopping app, then design and prototype it. You can generate a first draft of the full flow in floow from the screen list, then click through it on a phone. Test with five shoppers using realistic tasks ("Buy a medium black t-shirt and ship it to a friend") and watch for hesitation at each step. Keep product text readable at small sizes; our mobile app typography guide covers price and label sizes. For ready-made starting points, browse the shopping screen sets on the templates page.

Ecommerce user flow checklist

• • Every entry point (deep links, notifications, emails) lands on a screen that works on its own.
• • Search is reachable from home and listing screens, with a helpful no-results state.
• • Product pages show price, delivery estimate and returns before add to cart.
• • The cart shows a full cost breakdown before checkout.
• • Guest checkout is available; account creation is offered after purchase.
• • Express pay appears first in checkout.
• • Forms use autofill, address autocomplete and correct keyboards.
• • Payment failures keep entered data and offer alternatives.
• • Confirmation shows order number, delivery estimate and tracking.
• • Post-purchase flows exist for tracking, returns, reviews and reorder.
• • Every step fires an analytics event.

FAQ

What is a user flow for an ecommerce app?

It's a map of the steps a shopper takes to buy something in your app, typically entry, discovery, product page, cart, checkout and confirmation, including the decisions and alternative paths along the way. It helps you design the fewest possible steps to purchase and catch edge cases before they reach users.

How many steps should an ecommerce checkout have?

As few as possible. With express pay, checkout can be a single confirmation sheet; without it, a single scrolling page or a short, clearly labelled sequence (address, delivery, payment) works well.

Should an ecommerce app require an account to buy?

Generally no. Forced account creation is one of the most commonly cited reasons for checkout abandonment in Baymard Institute's research. Offer guest checkout and invite people to save their details after the order is placed.

Design it with floow

Turn your mapped flow into connected shopping screens on floow.design and refine each step through chat. Try: "Design an iOS ecommerce flow for a sneaker store: home with search and categories, product listing with filters sheet, product detail with size picker, delivery estimate and sticky Add to bag, bag with cost breakdown, one-page guest checkout with Apple Pay first, and order confirmation with tracking."