In this article, I am going to explain to you what a user flow is and why they are essential in the design process. Furthermore, we will have a look at all the necessary elements needed to create such flows. Finally, I will give provide you with a few user flow examples that you can take as a foundation to craft your own user flows.

To design a successful product a comprehensive understanding of users and their particular needs is required.

“Knowledge is power.” — Sir Francis Bacon

Derived from the artist’s quote, having knowledge about the end-users you are essentially designing for, puts you at a great advantage. This enables you, the designer, to predict users’ wants and needs before they even know it for themselves.

Here’s an example of a user’s predicted needs when it comes to ordering coffee from a coffee shop such as Starbucks. When the user approaches the checkout, the cashier will ask questions about condiments for the coffee, whether the user wants specific milk, extra sugar, and if the user would like to add a cookie or something else on the side. As you have probably experienced it yourself, the shop employee is anticipating your needs while you are placing your order.

Just like the cashier, UX Designers can also predict user needs, to a certain extent, when interacting with their products. This process can be simply outlined by crafting a user flow. Essentially, a user flow represents a path that is taken by a user to navigate on an app or website with the purpose of completing a task.

So before jumping straight into the designs, UX designers usually outline user flows first. It provides a clearer notion of how users will navigate through an app or website. The following four reasons show why user flows play a pivotal role in the design process.

#1 User flows are an effective and easy way to present first rough solutions to various stakeholders. Because wire flows can also be understood by non-designers, it makes communication and collaboration easier.

#2 User flows concentrate more so on the experience and the needs of the user, instead of detailed designs. Great importance is paid to the bigger picture which is portrayed through the flows. Besides, wire flows provide a good understanding of possible options and how screens are connected.

#3 User flows are sort of early documentation in the design process. When you will go through another round of interaction, you can always refer back to them and justify the decision you have made initially.

#4 User flows allow designers to come up with quick solutions that build the foundation for early testing while increasing the speed between iterations.

‍

Basic elements of a user flow

When outlining a user flow, designers usually work with common shapes such as diamonds, rectangles, circles, and arrows. Each shape represents an interaction the user will have with the product you’re designing.

A rectangle shows a screen/page of the digital product that users will interact with while completing their tasks. E.g.: homepage or contact page.

A circle represents an action a user is going to take in order to move through a product. Actions are relevant in order to complete a task from start to finish. E.g.: select item or add to cart.

A diamond reflects a crucial question that demands a decision from the user in order to move forward through the flow or back to an earlier point of the flow. E.g.: Buy dress? or Sign up?

An arrow is used as a path indicator to understand the connections between screens. While solid lines indicate forward direction, dotted lines indicate backward direction. Further, yes and now indicators can be added additionally to make the forward or backward navigation even more prominent.

‍

User flow example for a trip booking website

In the following, I have provided you with a realistic scenario demonstrating a typical user flow of a trip booking website.

The user flow starts with a user’s entry on the website and continues all the way through to their booking confirmation. This user flow anticipates the user’s need to browse multiple trips before choosing one the user is particularly interested in. Considering every step of the journey that users take is central in developing a product that addresses their needs. When outlining your own user flows for a project, I would recommend you to refer back to your defined problem statement. This way, you will place importance on what’s most relevant.

Going forward, you should also keep in mind that the flow is likely to change based on newly popping up user needs and circumstances. Furthermore, there might also be multiple directions or paths a user can choose to navigate through your app or website. Referring back to my user flow example, I added two additional flow branches. Some users already know what they want and therefore use the search bar to get to their destination faster. On the contrary, there are also users that initially want to visit the website just to read about new and trending travel destinations which represents another entry point. Hence, I integrated these two additional navigational options.

In the real world, you are often likely to work with already existing user flows which you will more so fine-tune to align it better with the user’s needs. Regardless of you creating a new user flow or working on an already established one, you shall never forget to keep the user and their specific needs front and center of the overall product design.

Side note: I normally draw out new user flows on paper first, simply because it is fast and effective. However, after finalizing the flow with all relevant stakeholders, I then create a digital version of it using either Figma or Miro. Both platforms offer various flow templates you can work with so you don’t have to spend too much time on it. But if you plan to go above and beyond, then you can of course create your very own and unique flow from start to finish.

Now, it’s your time to shine and to create a user flow for your own project. Thanks for reading along. Good luck and until next time 👋🏻

— Carina