Creating user flows

A flowchart is a diagram of the sequence of actions of people or things involved in a system or activity. It shows how things work together in a sequence, what decisions happen along the way, and the outcomes.

User flows are a type of flowchart that keep the user at the center of the flow.

User flows are created using wireframes or higher fidelity mockups to show how each screen connects with the others and the decisions a user would make to accomplish a task.

Go to the User flows tab in the Figma workbook.

Copy your final wireframes to this page. Use AutoFlow (or another Figma plugin or your own method) to add arrows that show what elements correspond to different screens (e.g., a share button linking to a share pop up screen, or clicking on a hike from the map taking you to the hike’s details page, etc.). Make sure each screen is in consecutive order. Keep adding arrows until everything is connected.

Hey, what's up Kickass Fam?  

So just like a good story has a beginning, middle, and end, a good product experience helps users to go through the end-to-end journey.  

From the beginning all the way to the end.  

And to do this, UX designers create what's called user flows.

After this lesson, you'll complete your own user flows in the Figma workbook.  

So if you don't have your workbook yet, go download at kickassux.com under the free UX course page.  

Alright, let's get started.

Look at this image, it's a beautiful picture of a snowy mountain. Big deal, right? But what if I was to tell you that it's only a small piece of a larger image.

As you can see that picture was just a small portion of the greater image. The first picture only gave you a small glimpse of the entire experience.

This gives you the full view. After all, how can you understand what's there, if you can't see the big picture. That's what user flows give us a full picture of the user experience.

In this lesson, we are going to cover user flows, what they are, and how to take wireframes you just created and turn them into user flows.

But before we can dive into user flows, we first need to understand flow charts.

As defined by the Oxford dictionary, a flow chart is "a diagram of the sequence of actions of people or things involved in a system or activity."

It shows how things work together in a sequence, what decisions happen along the way, and the outcomes.  

Here is a flow chart for a robot vacuum cleaner.

It shows all the stages the vacuum goes through and the decision points along the way until the vacuum finally turns itself off.

The shapes using these flow charts have meaning.  

Pills denote to start and the end of the process.  

Arrows show the direction of the flow and the relationship between different steps in the process.  

The parallelogram denotes an input or output.  

Rectangles represent a process.  

Diamonds represent a decision.  

And the circle with an "X" shows a summing junction of points that happens simultaneously.

In this example, the vacuum turned on and planned its route at the same time before following the route.

With this out of the way, we can now talk about user flows.

User flows are a type of flow chart that keep the user at the center of the flow.  

There is a lot of confusion out there about the terminology of user flow and what it truly means.  

There are few different terms that people throw around such as wire flows, task flows, screen flows, UI flows, anyway you name it, but don't worry about the semantics.  

What matters is the technique and how valuable it is to you and your process.

There are two ways to create them. First, just like a flow chart. Here is an example of a user flow of someone trying to get directions through Google Maps.  

This type of user flow is really helpful when you want to better map out the flow of screens before getting into any details.  

The second way to create them is by using wireframes or high fidelity mockups to show how each screen connects with the others and the decision the user would make to accomplish a task.

There are a cheap and fast way to get a holistic view of the user experience.

They show how things work together. Ending with the achievement of the user's goal.  

User flows are helpful to get the entire team on the same page, so that anyone who looks at your work can understand how each page and interaction fit together.

You can use user flows to document an existing product or to design something from scratch.  

They focus on flow above all else, which means you can create the information architecture that follows user's expectations.

Now let's talk about how to create your own user flow. First thing first, choose a user goal to create the flow for.  

For example, using Google maps to get directions.  

Next, determine if you want to create a basic user flow or a more visual one using your wireframes.

What you choose will really depend on where you are in your process.

If you've been following along with the free course, we recommend you choose the more visual user flow using your wireframes.

If you want to create a basic user flow without mapping the screens together, pull out a word document and start writing down all the tasks in order that it would take to complete the user's goal. Using the example of getting directions in Google maps.  

First, I'd log in.

Then, I'd input an address.

Next, I'd view all the locations and choose the correct one to get directions.  

Then, I'd confirm the route and start the directions.  

Finally, I would close the app once we got there.  

From there, you will take that information and start inputing it into user flows. Make sure to think through what the system will have to process as well.

For example, in between logging in and the map loading the system would have to authorize the user and then load their location based on where they currently are.

You might have to do it multiple times to get the hang of it and to think through all the connections and processes.  

Let's move on to the more visual user flow.

To create this one, gather all the wireframes you've created.  

If you've been following along, you should have most of your screens wireframed.  

Start with the first screen, the user interacts with.

Then, add the next screens that branch from that first screen showing how they connect to one another.  

In this case, pressing more info would open up the modal on the second screen, providing more details about the show.

And on the second screen, pressing the "X" or anywhere outside of the modal would close and take you back to the first screen.

Then, you keep adding more and more screens showing the connection between each, until you have a complete picture. And that's it.

To recap, we talked about flow charts, which are diagrams of a sequence of actions involved in a system or activity.  

User flows are type of a flow chart that keep the user at the center of the flow.  

User flows are created using wireframes or high fidelity mockups to show how a user completes a task from beginning to end.  

Now it's your turn.  

Go to the User flow tab in the Figma workbook to create your user flows.  

If you don't have your workbook yet, go download it at kickassux.com under the free UX course page.  

You got this.

Flowchart design