A Guide to Understanding (and Utilizing) User Flow
If you’re brushing up on your UX knowledge and looking to add new skills to your toolset, you may have come across the term user flow before. But what exactly does it mean?
The UX world is filled with techniques that can be used to get to know your users better. It can be hard to keep them all straight—from wireframing to user journeys to user flows, each UX artifact is different and should be used at a specific point in the design process.
This guide is designed to introduce you to everything you need to know about user flow, including what it is and how to leverage it as part of an effective UX plan. By the end, you should be able to create your own deliverables with the user flow examples given, and should be equipped with all the knowledge you need to present your findings to your team.
What Is User Flow?
Put simply, the term “user flow,” also known as “UX flow,” refers to a visual representation of a specific route that a user might take through your website or app in order to achieve a goal. The route starts at a specific point of entry and covers all the steps the user must take to reach a certain outcome.
Of course, there is often more than one route a user could follow to complete the task. When thinking about user flows, it’s important to consider all the ways users could potentially navigate through your site or app so that you can identify key pathways (generally those that are the most simple and direct). These key pathways are known as red routes.
Red routes are the user flows that are absolutely critical to your design, while other routes are not as essential to your product’s success.
User Flow Example
Imagine that a user is visiting an e-commerce website and wants to purchase a product—in this case, we’ll say a hat. The steps for doing so might look like this:
- First, the user types the keyword “hats” into the website’s search bar.
- He or she is taken to a results page displaying items related to the search.
- The user clicks on the hat he or she wants.
- The user is taken to a product page to view details and select options related to the hat (size, color, etc.).
- The user clicks “add to cart.”
- The user is taken to the cart page and enters payment details.
- The user has the chance to review his or her order, including sales tax and shipping costs.
- The user clicks “complete my order.”
Note that the process is described in detail, showing exactly what each step looks like, and explaining the specific actions the user must take in order to complete the task.
Why Is User Flow Important?
User flow is important because you often want your users to pursue certain outcomes (such as making a purchase or signing up for an account) when engaging with your product. It makes sense, then, to make reaching those goals as easy and intuitive as possible. In order to help users through the process, you need to have an in-depth understanding of their experience.
UX flows can help you plan for and create easy-to-use products right from the very beginning. And if there is a problem with your product, having a clearly defined UX flow allows you to troubleshoot and pinpoint where things might be going wrong.
Returning to the e-commerce example above, it might be helpful to look at the user flow if the business begins experiencing high rates of shopping cart abandonment. This is a phenomenon where, according to Webopedia, “visitors… add items to their online shopping cart, but exit without completing the purchase.”
Looking back at our original user flow, we can see a few steps where a problem might have caused the user to abandon his or her shopping cart.
For example, maybe there is a bug in the payment details page and the user is unable to make the purchase. Or maybe the shipping costs are higher than expected, and they should be advertised more clearly on the product page before checking out.
User Flow: A Key Part of the Design Process
Understanding user flow can help inform the UX design process (more on UX design here). While the overall process is different for every organization, it usually involves some variation of these five stages:
The research phase involves thinking about the business problem that your product will solve and conducting research to gain insights from potential users.
Techniques used during this phase could include user interviews, stakeholder interviews, competitor analyses, or personas.
In the planning phase, you will dive a bit deeper into the specifics of planning for your product. This is where UX flow comes in.
At this point, you will have moved from thinking about consumer needs at a theoretical level to visualizing your product and how it will meet those needs. Techniques such as card sorting, use cases, and, of course, user flow charts can help you understand how your product will eventually fit together.
The artifacts you create during the planning phase will help you build an organized information architecture.
Once you’ve reached the design stage, you’ll have moved past the ideation phases and will be ready to plan the specific appearance of your user interface.
Using tools such as wireframes, sketches, and mood boards, you can apply the insights you’ve gained and leverage them to create a stellar prototype for your product.
Now you should be adding the finishing touches to what you’ve done so far and putting your initial prototypes to the test.
User testing, A/B testing, and heuristic evaluation (a review done by your UX experts to complement the feedback gathered from your users) are all techniques that can help you optimize your final product and prepare for launch.
Production and Feedback
After production is finalized, you’ll be ready for the beta launch.
Of course, the UX research process doesn’t end once your product has been delivered. You should still be continuously collecting feedback from your users. Internally, you can conduct a retrospective analysis to evaluate how the production process went: what was effective, what went wrong, and how things can be improved the next time around if necessary.
User Flow: A Foundation for Your Product
You should now understand how user flows fit into the overall UX design process. Since UX flow artifacts are created early on, during the planning stage, they form an important part of the foundation on which your product is built.
User Flows vs. User Journeys: How Are They Different?
In the past, you may have come across another UX term, user journey, which sounds very similar to user flow.
So, what is a user journey? Is it the same thing?
Not exactly. While the two concepts are related, user journey is more general and refers to a loose description of steps the user needs to take to complete a task.
In the first section, we saw a user flow example that involved purchasing a hat on an e-commerce website. Now, let’s rework that into a description of the user journey.
As a reminder, our user flow covered the specifics of what the user saw and did on each screen (such as typing the keyword “hats” into the search bar). The user journey, on the other hand, will be less detailed, and will just explain the actions the user is taking. It will not focus on individual screens or the architecture of the website.
- First, the user searches for “hats.”
- Next, the user chooses the hat he or she wants.
- The user selects options related to the hat.
- The user adds the hat to his or her cart.
- The user pays for the hat and leaves the website.
When putting together a user journey, you could also record the emotions users experience when interacting with the product.
During user testing, we may find that users enjoy certain features and get frustrated with others. A description of these emotions is sometimes included in the user journey artifact; the final product could look more like a journal or a map rather than a flow chart.
So, now that we’ve seen how user flows differ from user journeys, we’ll turn our attention to when to use each of these UX artifacts. How do they complement one another?
Some UX professionals choose to create user flows first when trying to improve an existing solution, but will create user journeys first when developing a new product. This is because user journeys offer a more generalized understanding of the user experience, which is important in the early stages of product development, while user flows focus on the technical aspects of a completed product.
Of course, there is no right or wrong answer for how to leverage user journeys and UX flows. Both are useful concepts that can be applied in a variety of ways.
User Flow Chart Example
Now that you understand what a user flow is, how it’s important, and where it fits into the UX design process, you might be wondering what the final user flow deliverable will look like.
Simple Task Flow Chart
To describe a user flow in a basic visual format, you can create a user flow chart.
At this stage, you should have already recorded your user flows in a simple bullet-point list, as we did in the first section of this article. You should also have identified your red routes.
Once we’ve figured out what the most critical UX flows are, we can organize them into a chart to present to colleagues and use as a decision-making tool.
Below, you will find a user flow chart for the hat example. The flow chart shows the series of steps the user must take in order to purchase a hat on our website, and also highlights areas where the process might break down, due to technical errors or user frustration.
Note that this is a highly simplified example. Your own user flow charts could include a lot more information related to your own product, including the specific copy found in your error messages and more details about where the user might encounter obstacles.
Related Read: What Does a UX Designer Do?
User Flow Charts vs. Wireframes: Creating a Wireflow
You might be wondering how creating user flow charts is different from wireframing. As discussed above, UX flow is part of the “planning” phase of the UX design process, while creating wireframes is part of the “design” phase.
What’s the difference? While user flow deliverables focus on the user’s movement throughout the site toward a goal, wireframes serve as visual guidelines for the design of a given page on a website or app.
In practice, you might want to use wireframes as a tool to help you illustrate user flow. Designers sometimes hybridize the two into documents called wireflows. A wireflow combines the advantages of wireframes and user flow charts.
Wireframes can help you visualize individual screens, but they are static and can’t effectively illustrate movement. User flow charts are good at showing movement, but they aren’t complex enough to allow you to understand what each step will look like. So by using a wireflow, we can understand both the appearance and functionality of our final product.
Here you can find more information about wireflows, as well as an example of what one might look like. A number of wireframes are organized together into a flow chart to show the user’s process of moving from one step to another.
Once you’ve created your wireflow, you can label it using descriptions of each step of the process (as defined earlier in the user flow chart). This will give you a complete picture of what the user is experiencing.
Hopefully, by now you have a sense of how important UX flow is when trying to understand the user experience. Whether you’re designing a new product or improving an existing one, this fascinating concept can help you build a strong UX foundation for your product design.
Since you’re here
If you want to work in design, you can. It’s that simple. With our UX Design Course, you’ll launch your career in design in 9 months or less – guaranteed. Browse our free UX salary guide to see what you could be making