Recommended resources
The freely available resources this lesson will direct you to.
Hello! Welcome to the first lesson in our course on analyzing user flows.
Given your extensive experience in UI/UX design, you're already skilled at creating intuitive paths for users. This course aims to build on that foundation by providing a structured framework for analyzing those paths to identify and solve common design challenges.
Today, we'll focus on the first learning outcome: Deconstructing a user flow into its core components (entry points, steps, decision points, and exits) for systematic review.
By the end of this 60-minute lesson, you'll be able to look at any user flow—whether it's your own or a competitor's—and break it down into its fundamental parts. This systematic approach is the bedrock for all the analytical techniques we'll cover in later modules.
Let's begin.
1. What is a User Flow?
While the concept of a user flow is likely familiar to you, our goal here is to establish a precise definition that serves analysis. A user flow is more than just a design artifact; it's a model of a user's journey that we can dissect to evaluate its effectiveness.
To set the stage, let's start with a resource from Figma that provides a clear and concise overview.
What is a user flow? Why it's important in UX design
This article establishes a clear, shared understanding of what a user flow is and why it's a critical tool for analysis.
Please read the first two sections of the article. In the opening section, 'What is a user flow?', read the user flow definition. Then in the following section, 'Why is user flow important in UX design?', read UX design value. As you read, focus on how these concepts frame user flows not just as a creation tool, but as an analytical one.
As the article highlights, user flows are essential for creating smoother experiences by identifying roadblocks early. This analytical power comes from breaking the flow down into its constituent parts.
2. The Core Components of a User Flow
To analyze a flow systematically, we need to deconstruct it into a set of standard components. We can think of these as the fundamental building blocks of any user journey. The same Figma article provides an excellent framework for identifying these components.
What is a user flow? Why it's important in UX design
Now, let's break down a user flow into its fundamental building blocks. This section of the Figma article outlines a step-by-step guide that we can use to identify these core components.
Please read the section 'How to create a user flow in five steps', which appears after the discussion of why user flow is important in UX design. Read the five-step process. Pay close attention to each of the five steps, as they map directly to the core components we need to identify for analysis.
Based on that reading, we can define the core components for analysis as:
- User & Goal: The context for the entire flow. Who is the user and what are they trying to achieve?
- Entry Point: Where does the user's journey begin? This could be a homepage, a marketing email, a search result, or a push notification.
- Steps: The series of actions the user takes and the pages or states they see. These are the individual moments that move the user toward their goal.
- Decision Points: The forks in the road where a user must make a choice. These are critical moments that can introduce friction or confusion (e.g., "Sign in with Google or Email?", "Add to cart or Buy now?").
- Exits (or Endpoints): The conclusion of the flow. This is where the user either successfully completes their goal (e.g., sees a confirmation page) or abandons the task.
3. The Visual Language of User Flows
To visualize and analyze these components, designers use a standard notation derived from flowcharts. This shared visual language allows teams to understand a flow's structure at a glance.
The following resource provides a clear, tabular summary of these symbols.
Designing the Perfect User Flow Diagram
To visually represent these components, designers use a standard set of symbols. This article from UXtweak provides a very clear breakdown of this 'visual grammar'.
In the mid-section of the article, find the '5 types of symbols in user flow diagrams' section. Read the diagram symbols, including the table within it, carefully. Then, at the end of the article, in the 'People also ask (FAQ)' section, quickly review the question 'What are the main parts of a user flow diagram?' and read the main diagram parts. This directly reinforces the components we're learning to identify.
To summarize the mapping between the components and their common symbols:
| Component | Symbol | Shape | Description |
|---|---|---|---|
| Entry/Exit Point | ○ | Oval | Marks the start and end of the flow. |
| Step / Process | ▭ | Rectangle | Represents a screen, page, or a specific action taken. |
| Decision Point | ⬦ | Diamond | Indicates a point where the user must make a choice, leading to different paths. |
| Direction | → | Arrow | Shows the direction of movement through the flow. |
| Input / Output | ▱ | Parallelogram | Represents a user inputting data (e.g., filling a form). |
4. Deconstructing an Example
Now, let's see how these components and symbols come together in practice. The following video provides a detailed walkthrough of creating a user flow diagram, paying special attention to decision points and alternative paths.
User Flow Diagram Tutorial - MASTER Breakdown of UX Method
This video from the Wired to Design channel demonstrates how to build a diagram from a task, explicitly considering and mapping out decision points.
Starting about four and a half minutes into the video, the symbols overview quickly reviews the standard symbols. Then, continuing through to around the 9:46 mark, watch closely as the presenter works through diagram building. As you watch, actively identify the entry point, the steps (rectangles), the key decision points (diamonds), and the final exits.
As you saw, the process of building the flow is a process of deconstruction—breaking a user's goal down into steps and decision points.
Now, let's analyze a more complex, static example.
Take a moment to trace the path for a "New user" starting from the "Onboarding" entry point.
- What is the first decision point (diamond shape) they encounter?
- What are the two possible paths leading out from that decision?
This simple exercise of tracing paths and identifying decision points is the core of systematic flow analysis.
5. From Flow Diagrams to Wireflows
As a designer, you can directly integrate this analytical structure into your work. By combining user flow logic with your wireframing skills, you can create wireflows. These diagrams map out the flow using low-fidelity screens instead of abstract shapes, providing a powerful tool for both design and communication.
Quick Thought Exercise:
Think about a recent feature you designed.
- What was the primary entry point?
- What were the one or two most critical decision points for the user?
- What defined a successful exit?
Thinking in these terms transforms a design from a series of screens into a structured, analyzable journey.
Conclusion
In this lesson, we established a foundational framework for analyzing user flows.
Key Takeaways:
- A user flow is a visual roadmap of a user's journey to complete a specific goal.
- Systematic analysis involves deconstructing this journey into five core components: Entry Points, Steps, Decision Points, and Exits, all within the context of a specific User and Goal.
- A standard set of symbols (Ovals, Rectangles, Diamonds, Arrows) provides a universal language for diagramming and analyzing these components.
Next Lesson Preview:
Now that we know how to deconstruct a flow into its parts, our next lesson will focus on evaluating its quality. We will learn to differentiate between high-friction and low-friction user flows using real-world product examples. This will be our first step in moving from deconstruction to diagnosis.