USER JOURNEY VS USER FLOW : In Figma?
A really simple guide to knowing the differences and using them
UX Design is a complex process. In its totality, it makes users of your product happy. When done wrong, people are left with an unbearable nightmare. In UX Design, there are lot’s of complex processes that helps you a product designer or developer, achieve your goals, but in this article, I am going to talk about two of them briefly.
There are thousands of articles out there talking about User journeys and User flows and tools to use, but what am going to focus on is how to apply and create them in FIGMA even though they can be done using sticky notes and pen :). Let’s do some definitions;
User Journey:
It can also be called Customer Journey, it refers to the scenarios in which the user interacts with the product, and normally the scenarios consist of several steps. Its function is mainly to assume and demonstrate the current and possible way in which the user can interact with the product.
User Flow:
Refers to the process in which the user takes advantage of the compound routes of the series of templates designed in a product to accomplish their goal. It is created to predict and show the possible routes with which the user interacts with the product.
Down to Earth
User journeys are about the user, they require empathy, putting yourself in the shoes of the user — describe their feeling, thoughts, what they think and feel while interacting with the product. User journey are considered to be linear, because, they start from one point and end with task completion.
For example;
Using Uber as case study;
- User needs a ride home
- He/She takes phone out of the pocket
- Enters their destination
- Choose type of ride
- Confirms the destination and fare
- Waits for the ride
So in Figma, to demonstrate this journey, we will create simple rectangles, for each step add text inside the rectangle. The use the arrow tool to connect the rectangles.
User flows usually comprise the visual elements the user is going to interact with in order to get the desired outcome. Comprises the various screens the user needs to navigate. They are not just linear in nature, and often do not focus on users feeling or multiple layers of the solution.
For example;
Using Uber as case study;
- App Splash screen
- App landing with destination maps and search fields
- Search results
- Destination selection
- Ride type and fare
- Driver distance and arrival time
NB: It is advisable to create user flows with Low-Fi wireframes or mockups.
In Figma, we create various app screens with only the interactive fields required by the user in the process using simple shape tools. Then connect them with the arrow tool.
FIGMA FILE HERE: https://www.figma.com/file/YfLrvKUfvoBmgYeK1vM57ogl/USER-JOURNEY-and-FLOW?node-id=0%3A1
Let’s Conclude like this;
User Flows and Journeys seems to be similar. They both try to figure out how the user will interact with the product. However, they focus on different aspects of a created product. It is worth to create both during the design process. They will ensure that final solution will have a better UX.
So PRACTICE, AND PRACTICE AND PRACTICE.
And if you enjoyed the Story do not forget to 👏👏👏
References: https://medium.com/sketch-app-sources/user-journey-maps-or-user-flows-what-to-do-first-48e825e73aa8
https://www.mockplus.com/blog/post/user-journey-vs-user-flow
Learn more about Figma and Design using the following resources:
Also, to be part of the Figma Community;
Join Figma on SLACK: https://figma-africa.slack.com
TWITTER: https://twitter.com/figma_africa
INSTAGRAM: https://instagram.com/figmaafrica
