User Flow

In the world of product design, again, we have a concept with many names. You may encounter UX flows, task flows, customer flows, wire flows, and more. Each has a slight variation (e.g., task flow focuses on a single task in the app while customer flows are oriented toward purchases), but the main idea is the same: a visual representation of a path that a user takes through a digital product. Slight variations aside, for the purposes of this course, we’ll simply refer to them as “user flows.”

If we zoom in on one single path along a sitemap, we would have a basic user flow , which might look something like this:

^{Image courtesy of justinmind.com}

If we collected every possible single flow and connected them all together, we would basically have something similar to a sitemap. So we can think of a flow as one path along the sitemap.

For example, if we’re looking at a project management tool like Trello, the sum of all flows such as starting a new project, assigning a team member to a task, etc., could be documented in the sitemap. Then, each series of actions related to a user task or goal that a user carries out in the platform would be considered a specific “user flow.” 

User Flows in more depth

The most basic flow would consist of a shape for pages/screen and arrows that represent the movement between those screens. But they can be more than this. User flows may include points in the process where a user enters the product, makes a decision, interacts with the product, achieves a goal, and more. You can use different shapes and colors to represent these elements of the flow. 

Have a look at this flow for Spotify that includes a legend describing what the different shapes and colors represent.

Why we need user flows

There are many benefits to creating user flows for your product. One of the most significant is that they allow us to keep the context of each screen in mind, that is, where the user came from, and where they’ll go after a particular screen. Instead of looking at each individual screen or page as separate, creating a user flow allows us to see how the screens fit together and thus, how the copy of those screens relates as well. For example, user flows allow us to understand where the CTA will lead, which will inform how we approach the copy for that CTA. So before we attempt to write copy for a particular screen in our app or site, we should look at the entire user flow for context. 

But user flows can communicate more than just a series of screens. By showing things like decision points, entry points, points of user interaction, and more, we can communicate more than just the movement from screen to screen, keeping all team members on the same page about the logic and structure behind the actions our users take within the product.

Because we’re all familiar with flow charts, user flows are easy to read and understand—they’re a quick win for organizing your product. And creating one is easy! Just open Miro or Whimsical, use some of the basic shapes and lines, and start bringing your product to life. You’ll be able to create visually appealing user flows in mere moments.