All about user flows

A guide on user flow diagrams for both beginner and expert UX and product designers.

What is a user flow?

A user flow is a diagram that visualizes all the different ways a user can achieve a specific goal.

In UX, it often represents the user experience of an app or website, based on user interactions with different UI elements (e.g. buttons, menus, etc.). Although user flows appear in many forms, all comprise some type of visuals of any fidelity (screens, shapes, or images) connected with lines known as connectors. Depending on the use case, a user flow can include extra elements, such as annotations, labels, branding elements, device skins, and most probably a legend.

User flows should not be confused with flowcharts. Contrary to user flows, flowcharts have zero focus on the user interface and can only be of low fidelity, made up exclusively of shapes and arrows.


Why make a user flow?

Being quite flexible and information-rich user flows can help throughout all stages of the product design process, from low to high-fidelity visuals. More specifically, they allow teams to

Align on the basic user experience during early ideation
Have a single source of truth throughout all project stages
Evaluate the entire or parts of the user journey, even without the final designs
Get the conversation started in cross-functional meetings
Enable both synchronous and asynchronous design critique meetings
Keep historical documentation from the beginning to product launch

Overflow not only saves us time as designers, but everyone internally that uses the link as a single source of truth for design handoff.

Erin Morris

Erin Morris

UI/UX Designer at Orange Bees

Read the case study

How to make a user flow?

Specialized tools, such as Overflow, allow you to create interactive user flows fast and easily, in a few simple steps:

Step 1 - Sync

Bring in your designs from your favorite design tool, draw shapes, or drag and drop images saved into your device.

Step 2 - Rearrange

Set up your screens in a way that makes sense. Split them into different sub-flows for a smoother presentation.

Step 3 - Connect

Draw connectors that show both forward and backward steps in the user journey. Use different styles for more straightforward navigation.

Step 4 - Annotate

Add labels, annotations, and other notes to allow your audience to follow your design story without much explanation.

Create beautiful user flows in 30’ or less

What are the different types of user flows?

User flow diagrams come in many different levels of visual fidelity and complexity. Based on those two parameters, they can be categorized as follows:

High fidelity

Made with high-fidelity visuals, ideal in the later stages of the product design process. Great for design critique and client sign-off.


Made with medium fidelity visuals, ideal as proof of design concept before the proper design process starts.

Low fidelity

Made with shapes or very low-fidelity visuals, ideal for ideation and team alignment in the early stages of the project.

Hybrid flows

A type of user flow that mixes elements of different visual fidelity. Commonly seen in lengthy projects with multiple design stages.

Five tips for better user flowsdecor connector

User flow diagrams are a very effective way to showcase the user experience of any digital product, such as a website, app, or e-store. In the case of large, complex projects, where the user can follow multiple paths that often intertwine, it’s important to follow some simple rules to ensure your user flow doesn’t look like a dish of tangled spaghetti.

Rearrange your screens

The way design screens are arranged will judge how the diagram will look once everything is added on top. It’s important that you leave plenty of space and that screens are split into rows, so that when you drag connectors they overlap as little as possible.
Another useful tip is to try to include screens that work as the core of your user experience in the middle (e.g. a hub page), so all other screens and connectors spread out around it like branches on a tree.

Rearrange your screens
Divide into subflows

If your project can be logically split into different processes, then group all those screens closer together within the same rectangle. For instance, if your app has a payment flow, make sure it looks relatively separated from the product catalog flow, the add review flow, and so on.
Not only will this make it easier for your audience to follow the logic behind your user experience, but you will also find it smoother to iterate on the project later on.

Divide into subflows
Use different styles

Styles will save your and your stakeholders’ life when presenting and reviewing complex user flows. A very straightforward tip is to use bolder colors for forward connectors and smoother colors or dotted lines for backward links. Additionally, you can use different colors for primary actions and secondary actions starting from the same screen, or use a different color whenever there is a branched decision to be made.

Use different styles
Label everything

Never assume that your audience can read your mind or way of thinking. It’s important to add labels and annotations to every connector, screen, or shape included in your user flow. Try to keep descriptions as short as possible and avoid abbreviations that some people might not understand.

Label everything
Include a legend

Legends add an extra layer of information that allows your audience to understand your user flow better. Some common things that can be included here:

  • What each connector style indicates
  • What each shape type symbolizes
  • What each shape color represents
  • Information on scale, size, and other specs
  • Color codes for your front-end developers

Include a legend
Ready to build you first user flow diagram?