--- title: "What Is a User Flow in UX? | Utkarsh Panwar" description: "What is a user flow? The steps, screens and decision points a person goes through to finish one task, with the FamPay voucher flow as a worked example." url: https://www.utkarshdesign.com/glossary/user-flow author: Utkarsh Dhairya Panwar updated: 2026-10-08 --- # What is a user flow? Glossary · By [Utkarsh Dhairya Panwar](https://www.utkarshdesign.com/about) · Updated 8 Oct 2026 ![Vertical flow of FamPay voucher redemption, Voucher Screen, Copy Code, Merchant App Checkout, Spend Happens Outside FamPay, beside a phone showing a 200 rupee Amazon voucher code](https://www.utkarshdesign.com/images/YKY5FbM84S7RJWwwBzRJKLqlg.webp) **A user flow is a diagram of the path a person takes through a product to finish one task: where they start, each screen and decision along the way, and every way it can end, failures included. Draw it before screens, so the team agrees on the steps first.** ## What goes in one - An entry point: where the person arrives from (a push notification, a search result, a home screen card). - Screens or states, usually as boxes. - Actions and decisions, as arrows and diamonds: taps, form submits, yes/no branches, system checks. - Every ending, not just the happy one: success, error, abandon, hand-off to another product. Most flows skip that last item, and that's usually where the problems are. A flow that only shows the happy path is a sales diagram. ## Worked example: the FamPay voucher flow FamPay's Cashback Store sold one-time-use vouchers for brands like Amazon and Myntra. Mapping the flow end to end showed what no single screen did: the spending happened outside FamPay, in the merchant's app, and a partly spent voucher lost its remaining value. ![Three-step diagram: Buy a 1000 rupee voucher, Redeem on a 400 rupee order, Lose the 600 rupees left over, outlined in red](https://www.utkarshdesign.com/images/yCZnzLBiKujEdDy07hajMKwXgc.webp) _The branch the original flow never showed: what happens to the rest of the value._ 1. **Discover**: Browse the store and open a voucher. 2. **Buy**: Pick an amount and pay. Decision point: does the person know it's single use? 3. **Redeem**: Copy the code and leave for the merchant app, where FamPay can no longer explain anything. 4. **Access later**: Find the voucher again in history, possibly after its value is gone. ![Four-stage Cashback Store map, Discover, Buy, Redeem, Access later, with Buy and Redeem outlined in orange as the focus areas](https://www.utkarshdesign.com/images/k8G60NyNSyLVs4nlNoxen2pyYUA.webp) _Buy and Redeem: the two steps where a decision was being made without the facts._ The fix put the one-time rule at those two points: a pill and a confirmation sheet before purchase, and the same reminder at redemption. What that did to support tickets is written up in my guide to reducing support tickets with UX. ## Mistakes I see in user flows - Drawing screens instead of decisions. If no box has more than one arrow out, it's a storyboard. - Starting at the login screen. Real flows start where the intent started, often outside the product. - Stopping at the edge of your product. The FamPay problem was in the part that happened in someone else's app. - One flow for every user type. An admin and a first-time member rarely take the same path. ## User flow vs user journey, task flow and flowchart People mix up user flow and user journey most. A user journey covers the whole relationship with FamPay, from finding the app to coming back weeks later for a voucher. A user flow takes one stage, say buying the voucher, and shows every screen, tap and branch in it. I use the user journey to pick the stage that needs work and the user flow to redesign it. | Term | Scope | Difference from a user flow | | --- | --- | --- | | Task flow | One task, one path | No branches; a user flow includes the decisions and failures | | Flowchart / BPMN | Any process, often the system's | Models the system or business logic; a user flow follows the person | | User journey (user journey map) | The whole relationship: many tasks over days or weeks, across channels | Wider, and records what people think and feel at each stage; a user flow zooms into one task, screen by screen | | User story | One need, written as a sentence | Says what and why; a user flow shows how, step by step | | Information architecture | Where all content lives | The map of the building; a user flow is one walk through it | [FamPay case study](https://www.utkarshdesign.com/work/fampay): The full voucher story, from the loss diagram to the shipped screens. ## Questions people ask ### What tools do designers use to make user flows? FigJam, Figma, Miro or a whiteboard. The tool matters much less than including the branches and failure states. ### When should you create a user flow? Before designing screens for any task with a decision point or more than a couple of steps, and again when support tickets cluster around one task. ### How detailed should a user flow be? Enough that every decision and failure has its own branch. If two boxes would always be designed together, merge them; if a box hides a yes/no choice, split it. ## Sources 1. [User Journeys vs. User Flows](https://www.nngroup.com/articles/user-journeys-vs-user-flows/), Nielsen Norman Group 2. [Journey Mapping 101](https://www.nngroup.com/articles/journey-mapping-101/), Nielsen Norman Group ## Working on this? Tell me what you're building and where it's stuck: [book a 30-minute call](https://cal.com/utkarsh-design/30min), email [work@utkarshdesign.com](mailto:work@utkarshdesign.com) or [send a brief](https://www.utkarshdesign.com/contact). ## Related - [The product design process for startups](https://www.utkarshdesign.com/guides/product-design-process) - [Fampay (YC S19)](https://www.utkarshdesign.com/work/fampay) - [What is interaction design?](https://www.utkarshdesign.com/glossary/interaction-design) - [How to reduce support tickets with UX](https://www.utkarshdesign.com/guides/reduce-support-tickets-with-ux) --- Utkarsh Dhairya Panwar, Founding Product Designer and Design Engineer (IIT Roorkee; Founding Designer at CodeAnt AI, YC W24). Email: work@utkarshdesign.com · Book a call: https://cal.com/utkarsh-design/30min · Hire: https://www.utkarshdesign.com/hire · About: https://www.utkarshdesign.com/llms.txt