User flows are diagrams that depict the path a user can take to complete a task while interacting with a product. A user flow focuses on the user's needs and the most efficient way to meet them.
© Interaction Design Foundation, CC BY-SA 4.0
Designing a user flow means guiding users through a website or app smoothly. It starts with understanding their journey. You aim to create a path that meets their needs.
Start by understanding the user and their path through your service. Create detailed personas to grasp their needs and motivations. Develop a customer journey map to cover every interaction with your organization. This understanding is crucial for designing a user flow that aligns with their experiences.
Your product will have distinct aims, from sales to sign-ups. However, these might differ from user objectives. Focus on the personas and journey map to pinpoint user goals. Align your user flow with these goals to create a more effective user experience.
Determine where your user flow begins. Analyze your customer journey maps to list all possible entry points like direct traffic, organic search, and social media. This knowledge will help you tailor the user flow to meet various user needs effectively.
With each point of entry, you may want to consider:
What is the user’s context when they enter the flow??
Do they seek active involvement with our site or product, or will they stumble upon us?
Will they be looking to solve a problem, and if so, what?
As Scott Belsky, the VP of Products and Community at Adobe, says,
“Rule of thumb for UX: More options, more problems.”
Remember to exercise caution as you simplify the diagram—too simple a flow may look elegant on paper but extremely cryptic and unusable for the user.
The simpler and clearer the process, the easier it is for a user to follow. Take the process above and consider how to simplify it for your organization.
© Interaction Design Foundation, CC BY-SA 3.0
Identify the content needed between the starting points and the final goal. Use personas and the journey map to outline steps that tackle user concerns and questions. This approach helps in optimizing the user journey through your site.
User flow diagrams vary in size and complexity, depending on the user goals and the product. Here are a few general tips to help you design an optimal user flow:
How can you minimize steps in the process?
Can you complete the process first and then seek additional information? If so, how can you incentivize that?
Once these flows are mapped for each point of entry and process, you will discover large areas of overlap. Streamline and simplify your user flows.
Now, visualize the user flow. Utilize tools like whiteboards or specialized software. Use standard UML conventions like ovals for start and end points, rectangles for steps, diamonds for decisions, and parallelograms for user inputs. Combined with concise text, these symbols clarify each stage of the flow.
Share your initial user flow diagram with team members for feedback. Incorporate insights from various departments to refine the flow. After finalization, the flow guides UX designers and developers to enhance the digital experience.
© Interaction Design Foundation, CC BY-SA 4.0
You should design the task completion funnels to flow from the point of entry to the funnel to complete the task.
This will normally involve:
Design of the entry point (Banner Ad, Search Text, Email, etc.)
Design of the landing page (How will you welcome the visitor and initiate the process they came for?)
Design of the process itself
Now, let’s talk about three sample UX flow diagrams that illustrate the complexity and clarity of user flow charts in action. Each example shows how user flow chart examples can guide the design process.
Marian Mota designed the "HealthMes App Diagram" for the Apple Watch. It highlights the path from a notification to various user actions.
© Marian Mota’s Dribbble, Fair Use
For instance, it starts with a simple notification on the home screen. This is our entry point—like the beginning of a chapter. The user glances at the short-look notifications and decides to engage. If they want more detail, they move to the custom long-look notifications. It can lead to further actions, such as sending a voice message or using a pre-set template.
The diagram doesn't stop at notifications. It shows users navigating the app's main menu to change their status, view messages, or check their favorites. Each decision point branches out. They offer options but keep the journey smooth.
Consider the "Change Status" screen. It’s a great example of offering a tailored experience without overwhelming the user. They land on a screen, choose a status, and move on—no fuss, no clutter.
© Salinthip Kaewkerd Behance, Fair Use
In e-commerce, you use user flow diagrams to visualize the shopping experience. Salinthip Kaewkerd’s diagram shows an e-commerce user flow with elegance and simplicity.
Starting at the homepage, a user can navigate various paths. They can explore products, learn about the company, or get in touch via the contact page.
For example, when users find a product they like, they proceed to the product page. It offers a wealth of information, such as price, description, and reviews. If satisfied, they add the item to their cart, a straightforward and intuitive step.
The journey continues through the cart page in a clear and user-friendly manner. The user can review their selected items, adjust quantities, and proceed to checkout. It's a crucial step where design can minimize cart abandonment.
© Sonali Banerji's Behance, Fair Use
This flowchart highlights various user paths, from the initial signup page to successful registration.
The app offers users multiple pathways to create an account, starting at the signup page. Users can use social media platforms like Facebook, Google, and LinkedIn or register with an email. This flexibility caters to the user's preference to make the process inclusive and user-friendly.
The flowchart details each step in the user path. If the user opts for email registration, they must complete a form. The system then sends a verification email, a crucial functionality, to ensure the user owns the email address they provided.
For those selecting social logins, the flowchart outlines a smooth redirection for permission. Upon granting access, users receive a pop-up to confirm their login. It integrates social media credentials seamlessly into the user journey.
This diagram excels in depicting a user-centered signup flow. It anticipates user needs and provides clear options and support. Take, for example, the ability to resend a verification email if needed. It captures what a good user journey should be: easy to follow and direct. It centers on essential features that make the experience smooth.
A good user flow diagram helps every stakeholder understand the user's journey better.
Here are seven pointers to elevate your user flow diagrams:
Start with user goals: Identify what users aim to achieve and let that drive the wireflow’s structure.
Incorporate feedback: Use insights from user testing on prototypes and wireframes to refine the work.
Simplify pathways: Streamline the user paths to reduce complexity and improve navigation.
Visual design clarity: Use consistent symbols and colors across different types of user flow for clarity.
Learn about the importance of visual skills to create better designs.
Detail entry and exit points: Mark where users enter and leave the flow to identify potential drop-off points.
Align with business objectives: Ensure the sample UX flow supports the business's overarching goals for alignment.
Iterate and evolve: Update your diagrams to reflect design or user needs changes.
In this video, Laura Klein, author of Build Better Products, talks about how great agile teams commit to iterating. She talks about what teams can do well to create better products.
© Interaction Design Foundation, CC BY-SA 4.0
You can use journey maps and user flows to understand and plan the user's experience. Despite some similarities, they serve different purposes.
A journey map captures the user's full experience with a product or service. It's a broad view, including emotions, pain points, and moments of delight. On the other hand, a user flow focuses on the sequence of steps a user takes to complete a specific task. It's more about functionality and less about feelings.
IxDF’s Journey Mapping Course dives deeper into the different types of maps UX designers create.
Here's a simple table to break down the differences:
Aspect | Journey Map | User Flow |
Focus | Emotions, motivations, experience | Steps, sequences, interactions |
Purpose | To empathize with the user | To design efficient task completion |
Structure | Complex and intricate | Linear and structured |
Used by | Strategists, marketers, UX designers | UX/UI designers, developers |
Represents | Multiple user interactions | Single user interaction |
When deciding between a user journey map and a user flow, ask yourself these questions:
Purpose: Do you aim to understand what the user’s current experience is like? Then build a journey map. Are you already designing the ideal experience? If yes, create user flows.
Channel Complexity: Does the user interact across various channels or only through a single product like a website? Use journey maps for the former and user flows for the latter.
Emotional Insight: Do you need to understand the user's feelings and thoughts during complex decisions? Journey maps will capture this depth while user flows stick to action sequences.
© Interaction Design Foundation, CC BY-SA 4.0
Here are practical reasons to use user flow diagrams:
Clarity in design: They help clarify the sequence of screens or pages a user will navigate through.
Identify issues early: You can spot potential roadblocks in the user's journey before they become real problems.
Improve team communication: They provide a visual that all team members can easily understand, regardless of technical background.
Facilitate user testing: You can use them to create test user scenarios.
Refine user experience: They allow for the review and optimization of the user's interaction with the product.
Incorporating user flow diagrams at the right time can help you create intuitive and enjoyable user experiences.
Read Wireframes Site Flows vs. User Flows: When to Use Which for more insights.
UX Pin offers useful tips to create smooth user flows in their article Creating Perfect User Flows for Smooth UX.
Get your free template for “Customer Journey Map”
Follow these steps to create a user flow diagram:
Define the product's objectives and desired user outcomes.
Conduct user research to understand their needs and behaviors.
Develop user personas to represent different user types.
List the main tasks that users will perform.
Sketch a basic flow of how users move from one step to another.
Break down each step in detail, including user actions and decisions.
Test the flow with real users, gather feedback, and improve.
Finalize the diagram, ensuring clarity and comprehensiveness.
User journey and user flow are different but related concepts in user experience design.
User journey shows a user's interactions with a product over time. It includes all touchpoints, emotions, and thoughts. See how the journey map fits into the UX design process in this video.
User flow focuses on the specific paths users take within a product. Unlike journey maps documenting existing user experiences, designers define the ideal user flows. You focus more on the steps and actions taken to complete a task. You want usability and efficiency within the product, like a website or app. User flow details the interactions within the product itself.
You create a user flow to understand and optimize the user experience. We’ll discuss the top six benefits of creating a user flow.
Clearer User Understanding: You gain insights into how users interact with your product.
Enhanced Usability: The product becomes more intuitive and user-friendly.
Improved Conversion Rates: A smoother flow can lead users to desired actions more effectively.
Identification of Pain Points: You can spot and fix areas where users might struggle.
Efficient Design Process: It helps create a focused, user-centered design.
Increased User Satisfaction: Users enjoy a better experience, likely increasing their engagement and loyalty.
Imagine a user flow for an online bookstore:
A user lands on the homepage.
They browse through a selection of bestsellers and genres.
The user selects a mystery novel.
They add the book to their cart.
The user reviews their cart. They might add another recommended book.
The user proceeds to checkout. They enter the shipping and payment information.
The user reviews the order, confirms it, and completes the purchase.
You send a confirmation email to excite them about their upcoming read.
This flow takes the user from discovery to purchase to create a seamless and engaging experience.
User experience (UX) design professionals typically create user flows. These include:
UX Designers: They focus on the overall feel of the product and user satisfaction.
UI Designers: They work on the interfaces users use to interact with the product.
Product Managers: They oversee the development of the product and ensure the user flow aligns with business goals.
Information Architects: They organize information and content intuitively for the user.
Developers: They may also contribute, especially in understanding technical feasibility and implementation details.
These professionals collaborate to create an efficient and intuitive user flow that aligns with the user's needs.
Here’s the entire UX literature on User Flows by the Interaction Design Foundation, collated in one place:
We believe in Open Access and the democratization of knowledge. Unfortunately, world class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!
