UX 101: How to create user flows

Planning before working on a design

Leow Hou Teng
The UXplorer
Published in
4 min readJul 13, 2022
Creating user flows to help users get to their destination
Creating user flows to help users get to their destination. Image from FreePik

What is a user flow?

A user flow is a diagram that displays the complete path a user takes to achieve a meaningful goal.

The user flow lays out a user’s movement through the product, mapping out each step from the entry point to the final interaction.

Steps in creating a user flow

#1 Determine your users’ objectives

Identify your user and their goal. What does your user want to achieve while using your app/website? These tasks may include signing up for an account, purchasing a flight ticket, or listening to a podcast.

#2 Note where the user enters the app/website

Users may not always enter an app or a website from the home page. There could be multiple entry points.

For example, when you click on a product link your friend shared, you’ll enter a product page if the app is on your device. Similarly, when you click on a push notification, you’ll open an app via the landing page linked to the push notification.

#3 Identify what information or tools your users need

Note the information or tools the user needs to complete a step.

For example, when you book a flight ticket on a website, you may be asked to input your passport details to complete the booking. To track the steps you take in a day, you need a smartwatch to do so.

#4 Map users’ paths from their entry pages toward the final action

How would a user interact with your app/website? List the chronological steps a user will take from start to finish. Simplify the steps so that the flows are focused and clear.

An example of the steps to buying a cup of coffee:

  1. Enter a coffee shop.
  2. Wait in line.
  3. Place an order at the counter.
  4. Pay for the coffee.
  5. Wait for the coffee in the waiting section.

--

--

Leow Hou Teng
The UXplorer

UX Lead at Backbase APAC, Singapore. LinkedIn => https://www.linkedin.com/in/leowhouteng