app ui flow design tool

User flows are one of the most useful yet misunderstood tools in the UX industry today. Senior designers often avoid them, while junior designers can struggle to get a grip on them.

In reality, user flows don't have to be so painstakingly challenging. In this guide, we'll bring some clarity to the complex world of user flows and share a clear step-by-step guide on how to create them.

We've broken our guide down into the following steps and sections:

Understand your user
Create a flow outline
Define the elements of your user flow
Refine your outline
What happens next?

Not sure what a user flow is? We've put together a good introduction here: What Are User Flows In UX Design?

Ready to create your own user flows? Now, let's get started.

A complete user flow

1. Understand your user

To design the best possible user flow, you have to have the best possible understanding of your user. Understanding the user's needs and motivations allows you to make informed choices when determining how to get users into that flow-like state when interacting with your product. Here are some questions to ask yourself when getting to know your user.

What are the needs of your users?
What problems would they like solved?
What features are most important to them and why?
What initial questions do they have about your product?
What information needs to be provided in order for them to effortlessly interact with your product?

Consider all the ways your user could potentially navigate through the site or app so you can identify key pathways. These pathways are generally those that are the most simple and direct. Anticipate the initial information that may be needed, like the input of an email or username versus just a phone number. Think of questions like, "Is this feature absolutely necessary?". Identifying these key pathways will make creating your user flow a breeze.

2. Create a flow outline

Like most things in design, it's best to start off with a first draft or outline. Start by writing down a basic flow like a mind map. Each box you draw should represent a step in a user action. It can be helpful to outline and breakdown your flow chart into three main stages: an entry point, steps to completion, and the final step in completing a task or the final interaction.

1. Entry point

Entry points are the means by which a user accesses the product initially. Websites can have many points of entry, while apps often have limited and distinct entry points. Websites are usually visited by a google search or clicking on product ads and shared hyperlinks. Applications, on the other hand, are most commonly entered from the app store or the downloaded version on a user's phone. However, points of entry for an application can also be an article, links, or advertisements.

The entry point of a user flow

2. Steps to completion

This is the meat of the flow chart. This stage usually consists of a login or signup screens, onboarding, a home screen, and any screens needed to navigate a task to completion. Remember to keep it simple, making sure each step is vital to the task. Your first draft doesn't have to explore every facet of your platform. For instance, an entire step-by-step outline of password recovery isn't crucial at this time. Stick to the steps needed for your user to achieve their ultimate goal.

An outline of a user flow depicting the steps the user needs to take to complete their goal

3. The final interaction

The final interaction is the final screen the user will see when they accomplish the desired task. What screen pops up last to inform them that the task is complete? An example of a final interaction for purchasing an item could be a confirmation screen to inform you that your order has been received. Another example of a final interaction is when completing signing up for an account. Is it best for your product to end with immediate access to the homepage, or would the login page be a better last step?

Part of a user flow depicting the final steps in the user interaction

3. Define the elements of your user flow

Designers use various shapes and colors to represent a unique set of elements within the interface. Each shape is an interaction or possible interaction and gives the reader more information about what is happening in a particular step. Some shapes are flexible and can be used for multiple actions, like using circles to represent entry/exit points or a connection to a different webpage or screen. Adding a key or legend to your user flow can help your colleagues and clients to better interpret and grasp your diagram. Below, we break down some of the most common shapes used within the industry and when to use them.

Rectangle

Three rectangular elements as part of a user flow

The rectangle is arguably the most common shape used in user flows. They usually represent a page or display screen. Unlike circles, there is no action to be taken. Rectangles are best used when depicting things like a homepage, onboarding screen, confirmation page, etc.

Lines with Arrows

This is probably the most important part of the user flow as the lines with arrows tie everything together and determine the flow through the chart. Lines with arrows take the reader through the chart from shape to shape, top to bottom, or left to right.

Circle

Three circles used to represent a process or task in a user flow

The circle is used mostly for displaying an action. They show a task that must be completed or steps that must be taken. Use a circle when you want to represent a process, task, or operation. To help determine if you are using a circle properly, check how it is being labeled. Circles are almost always labeled with a verb like "Select Item" or "Send Order".

Diamonds

Three diamond shapes used in a user flow to represent a question

Commonly termed a "decision diamond", this shape always asks a question. While other shapes may be interchanged for different purposes, the diamond is consistently used to show when a decision needs to be made. The possible answers to the question being asked are represented by the lines extending out of the diamond and determine which path to follow. For instance, you might ask questions like "Do you have an account?" or "Is this correct?" with yes and no arrows extending from each.

It's important to remember that there is no set rule or guideline for creating a user flow, and one person's flow chart may look different from the next. As long as you are consistent with your shapes and the reader can follow and understand the flow, you should have a successful user flow.

4. Refine your outline

The same principles you follow when designing an interface can and should be applied when designing a UX flowchart. Here are our top three must-apply UI design principles.

Make labels meaningful

Labels are the reader's lifeline when going through the user flow. The most important label is the flowchart's title. Try to use a title that describes exactly what the user flow represents. If you're not sure if your title is clear, get a colleague to read it over. If they can't tell you what the flowchart is for, you may want to redo it. Additionally, avoid using all capital letters within labels as this has been shown to decrease readability.

Two sets of user flow elements, one depicting the use of confusing labels, the other depicting the correct usage of meaningful labels

Choose colors wisely

The main purpose of color in a UX flowchart should be to help the reader identify and group resources as well as highlight important user actions. Colors are best used as a coding system rather than for styling.

Colored shapes as part of a user flow

Be consistent with the visual structure

Keeping your visual structure consistent can help ensure that your user flow is easy to follow and isn't misleading. For instance, shapes and line elements should always be used for the same purpose and accompanied by a key or legend.

Additionally, consider how you use the real estate of your design. Position elements on the screen logically and consistently for an uncluttered design. Most design tools (including Justinmind) have rulers and grids to help you align the elements on the screen.

Four user flow elements showing that visual consistency is crucial

5. Creating a user flow: What happens next?

In UX, a user flow is a great way to put yourself in the user's shoes and ensure that your product prioritizes their needs. User flows are also important from a strategic standpoint and are commonly used in UX audits. Making a flowchart at the beginning of the design process can reduce the risk of misunderstanding about design specifications and the need for rework. User flows are often provided with your deliverables to the design team or your client to provide a visual representation of how the product will flow. When it comes to mastering user experience, there's absolutely no substitute for practice. Designing effective flows takes time and repetition. Practice making user flows of existing websites or applications to refine your UX skills.

Want to learn more about the UX design process? Check out the following articles:

What is a wireframe? A comprehensive guide
Wireframing for mobile apps and websites
User flows vs. wireframes: what's the difference?
What are mental models and how are they used in UX?