User Experience (UX) design is a complex process. The goal of this process is to create a satisfactory interaction between the user and the product (site or app). If the user does not have a satisfactory experience interacting with the digital product, he will not want to use it again. If it is the product of the site, it will no longer go to that site. If it is an app, it may delete it.

To design the interaction of users with the product, the product designer must specify the user’s needs and expectations from the interaction, as well as the path of interaction with the product in the most accurate detail. There are two very important tools for this: User Journey Map and User Flow.

In this article, we are going to introduce you to these two tools and their differences.

User journey and flow map in user experience design

First of all, it should be emphasized that user journey maps and user flow are not the same things and they are different. Both are visual tools in product design, but they do not depict the same thing. The journey map and user flow answer different questions about the process of user interaction with the product. Unfortunately, even some UI/UX designers think these two tools are the same.

What is a user journey map?

One of the reliable sites in the field of design ( has defined the travel map as follows

A journey map is a visualization of the process that a person goes through to accomplish a goal.

What does a specific user with specific features want from the site or application? What can he do about it? What steps should be taken to do each task in different situations? The travel map is a visual answer to those questions. So, the designer should design an independent journey map for each possible interaction in different situations (scenarios).

What is user flow?

User Flows or UX Flows or a flowchart is an image that shows the flow of user interaction with the product. Every interaction a user may have with a site or app is part of the UX flow. Let me give an example. You want to buy perfume. You enter the ambassador site. Depending on what you’re looking for, you may take several different paths on the site to find and purchase the perfume you want:

  1. You may know the name of the perfume and write it directly in the search bar. Either that perfume is on the site or not. If so, you click on it and go to the page and go through the purchase process. If not, you either close the site and leave or go back home and click on special offers.
  2. You may be looking for perfumes of a particular brand. So, you immediately click on the brand, enter the page of that brand and the story continues.
  3. You may be looking for an inexpensive perfume. So, you go check out the special offers. On the special offers page, you may click on several perfumes and end up not buying any of them and leaving the site.

Types of user flow charts

UX flows are used to design various user interfaces as well as in web design. Each flowchart is drawn with a specific purpose. Some user flow diagrams only depict the user’s path to performing a task on the site. Among the user flow charts, 3 are more important than others: Task flows, Wire flows & User flows. The third case (user flows) is the same example as above.

1. Task Flows

Some user actions and interactions on the site are more important than others. For example, order registration until payment. When the designer knows that all users go through the same path to do a certain task on the site, he uses this type of chart to display that path.

2. Wire flows

Wireflows are a combination of wireframes and flowcharts. Wireflow shows the path of user interaction on a page. The main use of this type of flowchart is to draw the user flow on each page of mobile applications.

What is the difference between a user journey map and user flow?

The user journey map shows the stages of a user’s interaction with the known needs and expectations of interacting with the product in a specific scenario. The travel map has 4 main components:

  • Persona (actor): the user who is supposed to interact with the product in the scenario and do something in several steps.
  • Persona scenario and expectations: Why and for what purpose does the user want to use the product? If the product is an application for buying airline tickets, in one scenario a manager may want to buy a ticket very urgently for an unplanned business trip.
  • Journey steps: What steps (in the product) should that manager go through to find a ticket to reach his goal?
  • Actions and Emotions: What actions and emotions does that manager do at each stage? He is in a hurry and may not be able to find a ticket for the time he wants. In this situation, what solution does the application suggest to him?

How to use the user journey map and user flows in the design process?

In the product design process, nothing is as important as research to understand the user and his problems in interacting with the site or app. User flow is very important for the correct and accurate design of the information architecture and user interface of the product. The user flow shows the obstacles in the way of the user’s movement on the site.

A journey map is usually used to evaluate the user experience of a product. When the product is designed and the design team wants to understand how correct and efficient the solutions they found for the needs and problems of different users are. The journey map corrects the team’s mistakes and misperceptions of the users’ real needs. As a result, the product is modified.

How to create user flows

User journey maps and user flow are the product of design team meetings and analysis. They are usually drawn on paper or board first. If necessary, their digital version is prepared with the help of tools like Sketch & Adobe XD. To design the user journey and flow map, the design team should go through the following steps in order.

1. Knowing and understanding the user

To design the best user flow you need to have the best possible understanding of your user. Understanding user needs and motivations allow you to make informed decisions in the design process. Consider all the ways a user might navigate your site or app. and find the easiest and most direct routes. Finding answers to the following questions about product users will help you:

  • What are the needs of your users?
  • What problems would they like to solve?
  • What features in the product are important to them and why?
  • What initial questions do they have about the product?
  • What information should be provided so that they can easily interact with your product?

2. Draw the initial plan

As with most things in design, it’s best to start with a draft or outline first. Draw the mainstream. Your design must have three parts: the entry point (where the user enters the site or app), various interaction points, and the final interaction.

  • Entry point: Websites have many entry points. Users usually land on sites from a Google search or by clicking on ads and links. Apps have fewer entry points, especially when users have them installed on their phones.
  • Different points of interaction: This is the main part of your chart. Identify all the steps the user goes through to reach their goal and do what they entered the site or app for. (For example, the manager who wanted a plane ticket, after opening the app, enters the destination, date, and type of ticket, then…)
  • Final interaction: The last thing the user sees and is sure that they have reached their goal. In the example of the airplane ticket purchase application, the final interaction is the ticket purchase and the message that the app gives to the user that the purchase is complete.

3. Identify shapes and symbols

A user flow is a graph, diagram, or chart. That is, it consists of several shapes, lines, and writings in different colors. Each shape and color in the flow chart has its meaning and conveys a special message. The most frequent forms that designers use in drawing the user flow are:

  • Rectangle

A rectangle is the most common shape that usually represents a screen or screen. Rectangles are not used to indicate the point at which the user takes action.

  • Lines with arrows

The most important part is the user flow, which shows the direction of the user’s movement. Lines with arrows tie everything together and define the flow through the diagram.

  • circle

The circle is mostly used to show an action, i.e. a task or an action that the user should do.

  • Diamond

This shape, commonly called a “decision diamond”, always represents a question. Where the user must make a choice or answer a question in the interaction flow is indicated by a rhombus with a question on it. (For example, the question of whether you have already registered on the site?)

4. Revise the initial plan

Follow the general principles of design and user interface design. Evaluate the initial plan based on those principles and if the plan is ambiguous, resolve it.

  • Writings (short texts) on shapes or lines should be clear and meaningful.

Shapes in the flowchart without text or labels have no meaning. From the title of the chart to every single word and phrase that is written on it, it must be carefully selected. Anyone who reads the chart should understand it at a glance. Additionally, do not capitalize all letters of words and phrases. Because it has been proven that it hurts readability and makes the viewer and reader of the chart suffer.

  • Choose colors wisely

The primary purpose of color in a UX flowchart should be to help the reader identify and group shapes as well as highlight important user actions. So, be careful in choosing colors and their darkness and lightness. Colors are not for beauty. It conveys a message to the viewer.

  • Observe the visual structure

As mentioned, designing a product requires more than one user flow diagram. So, the designer should act harmoniously in the design of all those charts and use the same colors, shapes, and texts. Usually, a guide is also written for each chart so that anyone who sees it can understand the meaning of the symbols or shapes.

Leave a Reply

Your email address will not be published. Required fields are marked *