When you’re designing the user experience (UX) of a digital product, you need to break it down into smaller parts. After all, the entire experience involves a lot of moving parts and a detailed design process. One small element of this process is designing user flows, which show you how a user moves through a product. But, to create better user journeys, you first need to know how to create a user flow.
More specifically, you need to learn how to make flow diagrams and charts that represent the user’s journey. This guide will tell you how.
What Is a User Flow?
A user flow is a path that a customer takes through a digital product, like a website or mobile app. Typically, you represent this using a flowchart, also known as a user flow.
The diagram shows you how many steps it takes to perform a certain action or reach a specific goal. As a result, you can see how straightforward it is, identify points of friction, and so on.
Design teams often use them to hone the user experience, ensuring they understand how users will interact with the product.
Why User Flows Are Important
User flow diagrams are an important part of the design process for a couple of reasons. Primarily, they’re useful for optimizing the user experience, but how?
Shows How the Navigation Works
You can’t understand your product without using it. However, in the early design stages, you have nothing to use. Diagrams like this can help you figure out what steps will occur in the navigation process.
This can help you iron things out and determine what screens you need.
Visualizing Your Flow
A diagram is like a bird’s eye view of your user flow. It helps you see how all the different actions and interfaces link together as part of a bigger picture.
Having a visual representation like this can be really helpful. It can even ensure that different teams align on the vision. Plus, it means you can spot dead ends, orphaned pages, or paths that have too many steps.
Optimizing Your Flow
When you launch your product, you’ll be able to iterate and hone it based on user behavior and feedback. However, it’s best to try and put out a polished product before you even get to this stage.
Taking the time to do things like create user flows means you can catch (and fix) problems before you launch.
Receiving Feedback
Speaking of feedback, user flow diagrams make it easy to gather opinions from different team members. Their simple layout means you can even show them to people outside the design field, collecting a range of feedback.
That way, you can make your product better and better before launch.
Task Flow vs. User Flow
The UX industry is full of jargon: task flow, user flow, customer journey. What does it all mean? Truthfully, there’s a lot of overlap between these terms.
The customer journey, for example, refers to the complete cycle of interaction a buyer has with a product. It starts with brand awareness and results in purchase but also goes beyond that to include the customer journey.
Within that, there’s the user flow. This begins when the customer enters the digital product and ends when they leave it or achieve their goal. With these different outcomes, there are different types of user flow.
Then, within that, there’s the task flow. The difference between task flow vs user flow is minimal, and it essentially comes down to the goal. The user flow focuses on the entire journey, which means it may diverge based on the user’s decisions. The task flow, meanwhile, is more granular; it’s a linear action with one outcome.
Understanding this difference is crucial. That said, both diagrams have their place in UX, and you might find yourself using both. Some design teams create many task flows before combining them into an overall larger user flow.
How To Create a User Flow Diagram
Creating user flows is relatively simple. You can do it with a simple pen and paper, or you can use flowchart software to map your journey. Either way, you’ll need to follow the following steps to learn how to create a user flow diagram.
1. Understand the Customer Journey
Step one is to make sure you understand the overall customer journey, which may start before they enter your site. You can figure out this journey by conducting user research and creating user personas.
After that, you can create a customer journey map to understand how, when, and why users are accessing your product. This map should outline every touchpoint where a customer interacts with your brand, including where your app comes in.
2. Identify Your Users’ Goals
With your user personas, you should also take the time to better understand your target audience. You need to understand why users are coming to your site and what their goals are. Crucially, you might need to account for different subsections of your audience. For instance, some users might want to learn more information about your industry, while others might want to make a purchase.
In this case, you’ll probably need multiple user flows to cover all your bases.
3. Identify the Beginning and End
Next, you need to identify the start and end points of your user flow. The ending is usually easy: it’s the goal you outlined above. However, the start is trickier because users can come from different places.
You might earn users through:
- Email campaigns
- Organic search
- Direct traffic
- Social media
- Press and ads
How the user enters the product impacts how they will use it. For example, a user entering a social media advert will likely want more information about your product. However, someone coming through direct traffic probably already knows your brand, so you can direct them immediately to a sale.
4. Learn What Your Users Need
The next step is to really pin down what your users need. This might sound similar to their goals, but it’s not. The goal is like the destination. It’s where your users want to be. So, you need to provide them with information to help them get there.
Essentially, this means filling out the blanks between the start and end. Each step should serve a purpose. It should address a pain point, answer a question, or provide more information.
It’s worth noting the timing of all this, too. You need to provide your users with the right information at the right time. It sounds challenging, but that’s what your flow diagram is for! This is the time to work out each and every step.
5. Map the Flow
Now, you can start to map the flow based on the actions users take. Whether you draw it on a whiteboard or use software, these are the symbols you need to know:
- Ovals/Circles: The start and end of the flow.
- Rectangles: A step in the process or a page.
- Arrows: Connect the shapes to show the direction of the journey.
- Diamonds: A decision the user can take.
- Parallelograms: Somewhere, the user needs to input information (e.g., contact information).
You can also add text to your diagram to show what’s happening at each stage. Don’t add too much, though–it should be a simple visualization.
6. Refine
UX is all about testing, testing, testing! You can’t use Google Analytics to test your flow diagrams, so you’ll need to gather feedback in other ways.
Get your team together with stakeholders from different departments to discuss the flow. Gathering different perspectives can help you hone the flow and figure out what works. Make sure you apply any changes as necessary.
After that, you can start to create wireframes and, later, high-fidelity prototypes. Remember to test at every stage of the process.
How To Create a User Flow in Figma
Figma is one of the most popular software options for design teams. There’s a lot you can do with it, but here’s how to create a user flow in Figma.
1. Add a Title
First, open the flowchart maker and start a project. Make sure you title it properly so you can find it later. Designers often have a lot of projects on the go, and you don’t want to lose your design!
2. Select a Template
Next, select one of Figma’s many templates. There are a few different types:
- Process flowcharts: These help you see the full process by breaking it down into a series of steps.
- Simple flowcharts: These simplify larger processes, making them easier to explain.
- Systems flowcharts: These help you see complex systems.
3. Define the Symbols
You can then start to add your symbols using Figma’s library. The conventions are the same as the shapes we listed above, which makes Figma easy to use and understand.
However, you can also include custom shapes if you prefer. Make sure you add a key so that everybody understands your flowchart.
4. Connect It Together
Connect all your symbols with arrows to show the sequence of events. At their most basic, arrows show the direction of one step to another. However, you can also use:
- Return arrows: Show a return to a previous point in the chart.
- Dotted-line arrows: Show a predicted action with uncertain outcomes.
- Forked arrows: Show different directions based on a user’s choice. These stem from diamonds (decision points), so make sure you label each arrow with the option it represents.
5. Finalize
Finally, you can polish and tidy up your flowchart. Figma allows you to add color schemes and more to customize it to your preferences. You can even adjust these without editing each symbol individually, saving you valuable time.
How To Create a User Flow Chart: Example
Now, you know how to create a user flow chart, but it’s helpful to walk through an example. Take a look at Adobe’s user flowchart above. This is how to create a flow like this.
- Understand the goal: The customer wants to access a mobile banking app and view their credit balance.
- Define the start and end: Presumably, the customer already has the app. So, the starting point is when they open the app. However, they may or may not already have registered with the bank. So, there are two endings: accessing their account or registering.
- Understand the user’s needs: What does the user need to do to reach these endings? They either need a page where they can enter their login information or a sign-up page.
- Make the flowchart: Design the chart with all the in-between steps.
This is a pretty simple flowchart, but it shows all the possible actions a user may take. It covers lost passwords and so on, which means the user achieves their goal no matter what.
In this way, a flowchart can help you understand where you can optimize the customer journey. There might be extra interfaces or flows you need to add. For example, you might realize you need to design a lost password email flow.
You can see more user flowchart examples here.
Design Better With Page Flows
Hopefully, this guide gave you everything you need to understand how to create a user flow. But that’s not all you need to create great products. You also need inspiration and a way to keep up with the latest design trends.
If you’re looking for design inspiration, why not learn from proven products? Page Flows is a helpful resource for finding interaction design ideas. Get started today to access our growing library of user flow recordings and finally stay up-to-date with current design trends.
