A step-by-step guide to creating your first user flow diagram

A step-by-step guide to creating your first user flow diagram

We’ve said it before, and we’ll say it again: A picture is worth a thousand words, which is why diagrams come in so handy. They’re a neat way to display complex information in an easily digestible format.

Websites and user journeys can be complex, which is where user flow diagrams come in handy. They’re an invaluable tool in the website designer’s arsenal, and, as the name implies, they’re for helping you see how a user makes their way (or ‘flows’) through your website or app.

This could encompass the steps they take to perform a certain action, or it could be a more general clicking around. The more you know, the better you can make the experience, and in turn, the happier those visitors will be.

Let’s take a closer look at what exactly a user flow diagram is. We’ll also run through some tips to help you create your own, so you can hit the ground running.

What is a user flow diagram?

Alright! So we’ve already partially answered this question: It’s a diagram that shows the user’s journey. But there’s more to it than just that.

A user flow can show the way someone uses a website or app in a general sense, or it can track a route someone takes to accomplish a specific task. For example, the way a shopper makes their way to the checkout on an e-commerce website: from a business perspective, ensuring they can make it to that point seamlessly without them getting frustrated and leaving is good sense. A click away is a lost customer.

User flow diagrams can map these steps, helping UX and UI designers link the user’s needs, actions, and consequences with functionality. They can then use this to inform web or app designs or make improvements to existing systems.

You can’t help your users if you don’t know what they need — and this is what user flows do: They help you spot the dead ends, the awkward journeys, and blind corners that trip them up.

User flow vs user journey: What’s the difference?

User flow focuses on how the user interacts with your app or site.

User journey includes your user’s journey as a tiny part, but it really begins long before they land on your site or app and continues long after. It includes everything from word-of-mouth recommendations and online ads, to delivery and customer services.

Why use a user flow diagram?

User flow diagrams are there to help UX and UI designers help the users navigate the website or app. Here’s what they should help you accomplish:

  • Map out the user flow
  • Ensure the process contains all the right steps
  • Get early feedback from users and stakeholders, and use this to inform your design while it’s at low fidelity (and therefore cheaper)
  • Make decisions early on, before you’ve spent too much time on the design

Here’s the bottom line: If you invest time in creating a flow diagram earlier on, it’ll save you headaches later on. It’ll also mean happy users who enjoy spending time on your site or app.

What does a user flow diagram look like?

A user flow diagram is a flowchart, but with a very specific purpose — while the two may look the same, it’s the context that makes all the difference. Here are some user flow examples.

A user flow diagram for a web-based eSports application, by Andy Davies.

A visual sitemap, by Maru.

It also depends on what stage of design you’re at. If your wireframe is made, you can use it to create a wireframe flowchart or wireflows. These pair wireframe conventions with flowchart shapes, as you’ll see in the example below.

A webflow diagram for an app, by Darmawan R. Dipo.

Pro tip: When creating a user flow diagram, use standard flowchart symbols for clarity. You’ll find the most popular symbols in the table below.

How to make a user flow diagram

1. Define your needs and your customer needs

First, you need to understand what it is you want, and what your user is looking for.

Yours will be easier to work out: You’ll want them to buy, subscribe, share, or click. If you’re not sure, refer back to your company and project objectives to help inform your choice. You then need to match this up to your user’s objectives. What do they want?

A customer journey map can help you define what that should look like. This handy diagram can match your customer’s mood to each stage of the journey, as well as the different touchpoints. This will help you define and refine your messaging so customers are as receptive to it as possible.

You can also delve into hierarchy of effects models, which are theories that define how a customer responds to certain prompts and moves through a series of common steps when they make a purchasing or subscribing decision.

2. Work out how users find you

If your website or app is already up and running, you still want to improve it. And one way to do that is through Google Analytics.

This can show you a host of valuable insights into your visitor’s data, including how they found you — whether by social media, email, PPC, organic search, and more. Google will break this down into percentages for you so you can see which channels are most popular, and where you need to improve.

Each of these channels will be at the very beginning of your data flow diagram.

3. Find out what your users want

If someone visits your site and can’t find what it is they want, they’ll click away straight away. So you need to give them the information they need, fast. Put yourself in their shoes and, at every stage, ask yourself what it is they might want.

If you’re working on an already-live site or app, you can do this yourself and seek out real users for their opinion. Sometimes, when you work on something, it’s difficult to see it from an outsider’s perspective, so this kind of feedback can be invaluable.

Pro tip: Success doesn’t need to mean a sale. Subscribing to a newsletter and allowing push notifications is just as valuable, and could well lead to a sale later on.

4. Map out your user flow

Now you know what it is your users want to do, it’s time to create your user flow diagram. Pen and paper are fine, but diagramming software that lets you drag, drop, edit, and share at the click of a button is easier.

Pro tip: Use flowchart shapes here, so your diagram is universally understandable (with no need for keys or explanation).

Factor in website or app entry points, as well as landing pages and call to actions. The flow may change over time as your website develops, so make sure it’s easily editable.

5. Share and gather feedback

The more feedback you get, the better: Other perspectives will give you a deeper understanding of how different people will interact with your site or app. This is also good from a collaboration point of view: Clients and stakeholders will appreciate an early sneak-preview. It gives them a chance to comment and will minimize the risk of nasty surprises later on.

5. Share feedback with the designers

Give this information to the people making the website or app so they can create with purpose. It’s a good idea to bring a lead designer into client meetings. You can also give clients access to your diagramming software and give them permission to leave comments directly on the designer’s work. This shortens the gap between those making the website, and those using it— while making the whole process smoother and more collaborative.

Georgina Guthrie Georgina is a displaced Brit currently working in France as a freelance copywriter. Before moving to sunnier climates, she worked as a B2B agency writer in Bristol, England, which is also where she was born. In her spare time, she enjoys old films and cooking (badly).