User Flows

Your constantly-updated definition of User Flows and collection of videos and articles
418 shares

What are User Flows?

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.

A data flow diagram example

© Interaction Design Foundation, CC BY-SA 4.0

How Do You Design a User Flow?

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. 

1. Understand the User's Journey

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.

2. Match Your Goals with User Aspirations

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.

3. Pinpoint User Entry Points

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.

Considerations for Point of Entry

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.

Basic steps of web analytics process with examples

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

4. Craft the Steps to Help Users Complete Their Tasks

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.

Considerations for Process Steps

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.  

5. Visualize the User Flow

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.

6. Refine the Flow with Feedback

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.

The how and why of customer behavior

© 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

User Flow Diagram Examples

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.

1. Health App User Flow

User flow diagram for an app on Apple Watch

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.

2. E-commerce User Flow

User flow diagram for an e-commerce app

© 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.

3. Login Interface User Flow

User flow diagram for an app login

© 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.

How to Upgrade Your User Flow Diagrams?

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.

Show Hide video transcript
  1. Transcript loading…

  • 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. 

Show Hide video transcript
  1. Transcript loading…

The Difference between Journey Map and User Flow

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.  

Show Hide video transcript
  1. Transcript loading…

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.

When and Why You Should Use User Flow Diagrams?

© Interaction Design Foundation, CC BY-SA 4.0

Here are practical reasons to use user flow diagrams:

  1. Clarity in design: They help clarify the sequence of screens or pages a user will navigate through.

  2. Identify issues early: You can spot potential roadblocks in the user's journey before they become real problems.

  3. Improve team communication: They provide a visual that all team members can easily understand, regardless of technical background.

  4. Facilitate user testing: You can use them to create test user scenarios.

  5. 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.

Learn More about User Flows

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”
Customer Journey Map Customer Journey Map
Secure form
Please provide your name.
We respect your privacy
Please provide a valid email address.
316,341 designers enjoy our newsletter—sure you don’t want to receive it?

Questions related to User Flows

How to create a user flow diagram?

Follow these steps to create a user flow diagram: 

  1. Define the product's objectives and desired user outcomes.

  2. Conduct user research to understand their needs and behaviors.

  3. Develop user personas to represent different user types.

  4. List the main tasks that users will perform.

  5. Sketch a basic flow of how users move from one step to another.

  6. Break down each step in detail, including user actions and decisions.

  7. Test the flow with real users, gather feedback, and improve.

  8. Finalize the diagram, ensuring clarity and comprehensiveness.

What's the difference between user journey and user flow?

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.

Show Hide video transcript
  1. Transcript loading…

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.

What are the benefits of user flow?

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.

What is an example of a user flow?

Imagine a user flow for an online bookstore:

  1. A user lands on the homepage.

  2. They browse through a selection of bestsellers and genres.

  3. The user selects a mystery novel.

  4. They add the book to their cart.

  5. The user reviews their cart. They might add another recommended book.

  6. The user proceeds to checkout. They enter the shipping and payment information.

  7. The user reviews the order, confirms it, and completes the purchase.

  8. 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.

Who creates user flows?

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.

Answer a Short Quiz to Earn a Gift

Question 1

What is the primary purpose of a user flow diagram in UX design?

1 point towards your gift

Question 2

Why is it important to understand entry points in a user flow?

1 point towards your gift

Question 3

How do user flows help in the prototyping process?

1 point towards your gift

Question 4

What is a major benefit of simplifying user flows?

1 point towards your gift

Question 5

How does feedback improve user flows?

1 point towards your gift

Better luck next time!

0 out of 5 questions answered correctly

Do you want to improve your UX / UI Design skills? Join us now

Congratulations! You did amazing

5 out of 5 questions answered correctly

You earned your gift with a perfect score! Let us send it to you.

Letter from IxDF

Check Your Inbox

We’ve emailed your gift to name@email.com.

Do you want to improve your UX / UI Design skills? Join us now

Literature on User Flows

Here’s the entire UX literature on User Flows by the Interaction Design Foundation, collated in one place:

Learn more about User Flows

Take a deep dive into User Flows with our course Journey Mapping .

This course will show you how to use journey mapping to turn your own complex design challenges into simple, delightful user experiences. If you want to design a great shopping experience, an efficient signup flow or an app that brings users delight over time, journey mapping is a critical addition to your toolbox. 

We will begin with a short introduction to mapping — why it is so powerful, and why it is so useful in UX. Then we will get familiar with the three most common types of journey map — experience maps, customer journey maps and service blueprints — and how to recognize, read and use each one. Then you will learn how to collect and analyze data as a part of a journey mapping process. Next you will learn how to create each type of journey map, and in the final lesson you will learn how to run a journey mapping workshop that will help to turn your journey mapping insights into actual products and services. 

This course will provide you with practical methods that you can start using immediately in your own design projects, as well as downloadable templates that can give you a head start in your own journey mapping projects. 

The “Build Your Portfolio: Journey Mapping Project” includes three practical exercises where you can practice the methods you learn, solidify your knowledge and if you choose, create a journey mapping case study that you can add to your portfolio to demonstrate your journey mapping skills to future employers, freelance customers and your peers. 

Throughout the course you will learn from four industry experts. 

Indi Young will provide wisdom on how to gather the right data as part of your journey mapping process. She has written two books, Practical Empathy and Mental Models. Currently she conducts live online advanced courses about the importance of pushing the boundaries of your perspective. She was a founder of Adaptive Path, the pioneering UX agency that was an early innovator in journey mapping. 

Kai Wang will walk us through his very practical process for creating a service blueprint, and share how he makes journey mapping a critical part of an organization’s success. Kai is a talented UX pro who has designed complex experiences for companies such as CarMax and CapitalOne. 

Matt Snyder will help us think about journey mapping as a powerful and cost-effective tool for building successful products. He will also teach you how to use a tool called a perspective grid that can help a data-rich journey mapping process go more smoothly. In 2020 Matt left his role as the Sr. Director of Product Design at Lucid Software to become Head of Product & Design at Hivewire. 

Christian Briggs will be your tour guide for this course. He is a Senior Product Designer and Design Educator at the Interaction Design Foundation. He has been designing digital products for many years, and has been using methods like journey mapping for most of those years.  

All open-source articles on User Flows

Please check the value and try again.

Open Access—Link to us!

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!

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this page.

Interaction Design Foundation - IxDF. (2016, June 5). What are User Flows?. Interaction Design Foundation - IxDF.

New to UX Design? We're Giving You a Free eBook!

The Basics of User Experience Design

Download our free ebook “The Basics of User Experience Design” to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
316,341 designers enjoy our newsletter—sure you don’t want to receive it?