User flow

User flows are represented through visual elements that highlight all the possible paths a user can take when using a website or application.

Each element represents a specific node in the flow chart. These nodes are characterized by a particular shape. For example, a choice is shown as a diamond, while a regular step is often shown as a rectangle.

Why is it an important UX deliverable?

User flows are essential for creating a great user experience. Creating a user flow well makes the design work faster and easier for the remainder of the project.

User flows easily communicate the flow of specific functionality to internal and external team members. For example, you can use a user flow to present your work to stakeholders and use it to make discussions easier.

Different types of user flows

Like many other UX deliverables, you can create user flows in different ways. Each has its strengths for certain situations. Here's an overview of several common user flow types.

Task flow

The task flow focuses on specific tasks performed by a user. It's used for describing tasks that all users have to accomplish in the same way.

Within a bigger application that allows users to do multiple things, you can use a task flow to highlight one task. Some of these tasks may include the following.

• Changing your password if you forgot yours.

• Checking your calendar if you have to work tomorrow.

• Removing an item from a list.

Flow chart

Flow charts consist of multiple task flows. As a result, users will take different paths based on their decisions.

For example, you can use a flow chart for an onboarding flow if your users can choose different paths depending on experience. A first-time user might go through the entire onboarding, while experienced users can take a DIY approach to onboard.

Flowcharts are an excellent way of displaying different choices that users can make and how that helps them find the right path into your app.

Wireflow

Wireflows are a combination of flowcharts and wireframes. It uses individual screens as elements within a diagram that presents the task flow.

By combining two UX deliverables, you can clearly show each screen's impact on the overall user experience. However, it is more work than the previous two options. So make sure you only use it when you've done enough research.

Screenflow

Similar to wireflows, screenflows use high-fidelity mockups instead of wireframes to add context and vision of the final product to the user flow.

Screenflows are even more work than wireflows. So again, this means that you need to have done enough research to make sure you're on the right path.

Creating screenflows during the early stages of your project is a huge risk as requirements and user needs might change.

How to create your first user flow

Now that you know what a user flow is and some of the variations you can choose from, the next step would be to create your first user flow. Here's how that would work.

Step 1 - Do your initial research

Doing research does not have to be connected to the user flow only. However, it helps you know your clients clearly and understand which actions they usually perform to complete a task.

Here's a list of tasks you can complete as a part of your initial research.

• Use qualitative user research to identify who your users are and what pain points they have with your current design or product.

• Facilitate a workshop to brainstorm new ideas and concepts for the next steps of your project. You could even use the workshop to create a user flow together with your users.

Step 2 - Understand the goals

Understanding your final goal is essential to create a user flow that is relevant to what you're trying to communicate to your stakeholders.

Since there are different types of user flows, pick the right one that allows you to tell your story better.

For example, if your goal is to convince your stakeholder to start a project, go for a low-fidelity wireflow because that's usually less work than some of the other user flow options. There's only a little time spent in case you don't get the green light.

Step 3 - List all steps

List all the steps in advance based on your research and goals. This helps you have a clear perspective of the flow, especially if it's complicated. It will also save you time when creating the flow.

To do this, you could create a list. It can be that simple! However, a more high-fidelity way of listing the steps for your user flow is to use a collaborative tool like Figjam, where you can create sticky notes for each step.

Step 4 - Create the user flow

With everything prepared, it's time to create your user flow. When finished, remember to check if it's reasonable or not (ask for help from other team members).

You can use different design tools for creating a user flow, such as Figma and Axure. Start by using the list from the previous step and create your user flow from there moving forward.

Useful resources

Why do we use user flows in UX design? - CareerFoundry

UX Flow and Its Importance for the Design Process - Eleken

The Beginner's Guide to User Flow in UX Design - UX Planet