Better UX Flow Charts: An Easy to Follow How-to Guide in 6 Steps

Get an overview of how users interact with your UI or digital touchpoints using UX flow charts.

What is a UX Flow Charts and Why Use One?

The most effective UX flow charts draw inspiration from 3 existing tools user experience professionals already use. These are:

  • Site tree diagrams.
  • Flow diagrams.
  • Wireframes.
Illustration showing the difference between site maps, flow diagrams, and wireframes.
A UX flow chart combines elements of site maps, flow diagrams and wireframes.

1. Establish the Scope of Your User Flow

Be clear about what your UX flow chart will cover. I find it preferable not just to cover the site or app you are working on but also some of the steps that precede or follow it. That helps to provide context to the project you are working on.

Example UX flow chart
A UX flow chart combines a site map or flow diagram with low resolution wireframes.

For example, when creating a UX flow chart for a website, including how users arrive on the site can prove invaluable. Also, you may wish to include any interactions that immediately follow users taking action on the site (e.g., any emails sent to users).

2. Decide Upon the Fidelity of Your UX Flow Charts

Many describe a UX flow chart as a series of boxes and arrows representing users moving between pages, screens, or other touchpoints. Personally, I have described above, I see it as more detailed than that. That said, both approaches are valid.

Which end of the spectrum you lean towards will depend on the complexity of the interaction you are trying to map.

Site Map, UX Flow Chart and Wireframes compared.
The level of fidelity you select will depend on the complexity of the interaction and time available.

If the user’s journey is strictly hierarchical with straightforward branching nodes, then a flow diagram or site tree diagram will be sufficient.

However, suppose the interactions are more complicated and have many different options and cross-linking. In that case, a detailed user flow chart will prove more helpful because you will have a clear understanding of the content of each page.

3. Find the Right Tool for Creating Your User Flow Diagram

The tool you choose will be dependent on the fidelity of the UX flow chart you are trying to create.

For example, if you want to create basic flow diagrams, you could easily do that in Powerpoint or Keynote. That said, there are also tools like Lucidchart that make the process somewhat easier.

A tool like Lucidchart makes creating site maps and flow diagrams easier.

For more complex user flow diagrams, including wireframing elements, you will need to use a tool like Figma or Sketch.

4. Start by Mapping the Structure

Start by mapping just the primary structure of all the pages. What is the main flow the user will go on, and what are the primary points their journey may branch.

For example, if you are working on a website user flow, focus on mapping the primary navigational system (found on the menu bar).

Basic site map focused on primary navigation

Draw these up as a series of interconnected boxes.

As you are planning the basic flow, you will identify secondary navigational connections. For example, you might decide the homepage needs to deep-link to something buried in the primary information architecture.

If there are only a few of these secondary links, they can be added as connections between pages. However, this can quickly make the diagram unreadable if there are too many of them.

If that is the case, make a note of this cross-link to visually represent it when we flesh out the individual pages.

Notes on a site map
Note any secondary linking or content ideas you have as you map the primary navigation.

6. Flesh Out Content and Functionality

If you are creating a more detailed UX flow chart as I described earlier, you will need to revisit each of the ‘boxes’ you identified in your initial version and visualize what is happening at that step.

In most cases, this means showing what kind of content will be displayed on the screen in low-fidelity form. However, it might also mean showing secondary links, state changes, or even backend processes, depending on the specific use case.

Detailed UX flow chart
You can visualize the notes you made on content and secondary navigation when you add detail to each page.

Finding the Balance

Ultimately creating a UX flow chart is about finding a balance. You want to visualize any complexity of the interaction, but not to the point where the flow chart becomes unreadable.

Too little information and it becomes nothing more than a traditional information architecture or flow diagram. On the other hand, too much information, and you might as well have built an interactive prototype.

UX Flow charts help me think through the journey the user will take through a digital service and consider the various stages in that journey. However, they are easier to produce than a complete set of wireframes. This middle ground makes them a valuable tool in any UX professional’s arsenal.

Boagworks Boagworld