What is a user flow?
A user flow is a visualised series of actions a user takes to achieve a goal when using your digital product.
User flows are created in order to easily communicate design plans to different teams from the perspective of the users. This makes them an essential element to creating a customer-centric digital product.
User flows are typically composed of three main elements:
- The user: Who are your users?
- Their goals: What are they trying to accomplish or achieve with your product?
- The steps to achieve that goal: What are the actual actions they have to do in order to achieve that goal?
Below is an example of a user flow template our teams at Morphosis use. In this example template, the user is trying to register an online account on the platform.
From this user flow chart, we see that the key user touch points within the digital product are clearly mapped out, from the beginning when the users discover a digital product via organic search all the way through to the end of the flow.
However, user flows can also be used to map out various other types of user goals. For example, with Bangkok Hospital, our target users were trying to book online doctors’ appointments.
In creating a user flow chart for this particular project, we identified that the chart had to include the three following elements:
- The user is the potential patient
- The goal is to make an appointment
- The steps in order to achieve that goal involves filling an online booking form.
Ultimately, the user flow charts helped us to create simple and intuitive navigation design, minimising the number of steps users need to go through in order to make an online appointment with their doctor.
With the number of people involved in a digital product’s design and development process, the users’ perspective can often get lost in the conversation.
By creating user flow charts, you are able to highlight the key steps users need to take within your digital platform in order to achieve their goals. This can help eliminate usability issues further down the development cycle and create a better and more streamlined experience for users, allowing you to save both time and money when creating a digital product.
Learn more about user flows in the following sections:=
- Why are user flows crucial for UX design?
- What is the difference between user journey and user flow?
- What are the different types of user flow charts?
Want to learn more about our services?
Get a free consultation from our UX professionals today.
Why are user flows crucial for UX design?
When looking at a digital product, you may be only seeing the tip of the iceberg. What appears to be an aesthetically pleasing and functional design interface could have countless hidden usability issues.
This is where user flow charts come in. By effectively mapping out key touchpoints on your digital product, we are able to uncover hidden usability issues and find ways to solve them early on in the product design and development cycle, streamline the flow, and create a stronger navigation and architecture for your application or website early on in the design process.
Here are three reasons why user flows are incredibly important for creating impactful UX design.
1Create a forward-focused workflow
User flows helps us visually organise the actions taken by the users on a digital product, especially on larger scale projects. Thus, it helps us identify the individual steps to consider when designing and developing every aspect of any digital product. This leads to a more focused and streamlined workflow, reducing the overall costs for our clients.
2Discover points of friction
When laying down the foundations of your digital product, user flows provide a logical way of looking at your product from your users’ perspectives. They make it easier for designers to identify potential points of friction, such as confusing navigation and unclear call to actions.
3Highlight CRO opportunities
User flows enable us to gain insight into how users will interact with key features on different pages throughout our platform, such as drop down menus and CTA buttons. Mapping out key touchpoints can help us reposition these features to reduce drop-off rates and increase online conversions.
4Eliminate loose connections
By visualising all the different paths users can take within the online platform, we can identify and add missing functionalities and flows to eliminate ‘loose ends’ for the users.
For instance, user flow charts allowed us to discover various helpful functionalities during our project with WYKR. In this project, we are designing and developing an online job referral platform from scratch.
Flow charts helped us understand the different functionalities that needed to be in place in order to provide a seamless experience for employers, referrers and job seekers. For example, for users who have the goal of creating a job posting, flow charts helped us identify additional functions that needed to be in place, such as editing job postings, archiving them for future use, deleting postings, and so on.
What is the difference between user journey and user flow?
User journeys and user flows play a vastly different role in the different stages of UX design.
User journeys (also known as customer journeys) come in early in the design process. They help designers map out different mediums of interaction the user goes through before completing their goal, understand the different touchpoints with the digital solutions offered to users and their satisfaction or experience at every touch point
User flows, on the other hand, come in later on in the design process. They highlight all the different choices and options a user can be confronted within a digital product, shedding light on how to best structure the website and app, as well as what flows can be streamlined to give users the ability to complete tasks quickly and easily and therefore, improve the digital product’s overall user experience.
To illustrate these differences more clearly, let’s go back to our case study for Bangkok Hospital.
- User Flow: User goes to homepage -> Booking page -> Search bar -> Search for Doctors -> View doctor calendar -> Choose time -> Book doctor
- User Journey: User sees advertisement (either online or offline) -> Goes to company website -> Makes an online booking
Here’s a summary of the key similarities and differences between user journey and user flow:
|User Journey||User Flow|
|Shows multi-platform interactions||✓||⨉|
|Detailed touch points within one digital product||⨉||✓|
|Can span over a long period of time||✓||⨉|
|Created early on in the UX Research process||✓||⨉|
|Created later on in the UX design process||⨉||✓|
|Focused on highlighting how the users achieve their goals||✓||✓|
|Usually mapped into clear diagrams||✓||✓|
What are the different types of user flow charts?
User flow charts come in various forms. Mainly, there are three types of user flow charts that are used throughout the design process, including:
- User Flows
- Task Flows
- Wireflows (low fidelity) & Screenflows (high fidelity)
1User flow charts
As mentioned, user flow charts map out key areas of interactions within an online platform. They allow us to visualise how we can optimise our digital products so that they allow users to complete their goals with minimal friction.
User flow charts can be highly sophisticated, depending on the nature of the platform. For instance, they can map out the various paths users can take when trying to complete a goal.
Let’s use our project with Saver as an example. In this project, we are trying to build an online platform that allows community members to request and offer help to each other. The requests are categorised in three urgency levels: green, yellow and red.
While creating a user flow chart, we identified the following elements:
- The user is the requester
- The goal is to request help
- The steps in order to achieve that goal is to submit a request and select a helper
Task flows are a more streamlined type of user flow charts. They are linear and straightforward, often highlighting one singular path a user will take when completing a goal.
Task flows serve as an effective initial draft of the user flow chart, highlighting the most important areas of interactions before all the details are figured out.
They are also helpful in highlighting the main interactive path we want users to go through, allowing us to refine alternative paths so that users face minimal friction regardless of how they choose to complete their goals on the platform.
A typical task flow generally includes the following:
- Entry: The entry should be a shared common starting point for your users. This is where they begin when trying to complete or achieve a goal.
- Action: This is a specific action that your users have to physically do to get to their goal.
- Success: The success is what your users see when they finally complete their goal.
3Wireflows & Screenflows
Wireflows and screenflows, on the other hand, are slightly more complex. As its name would suggest, wireflows and screenflows are a combination of wireframes and traditional user flow charts. Wireflows can also include multiple pathways or branches the users can take when trying to complete their goal.
Below is an example of a wireflow we created for a project with Starfish.
With the goal of changing Thailand’s education system, Starfish wanted to build an online learning platform for teachers to learn innovative teaching techniques. To help them achieve their goal, our team at Morphosis helped them design and develop the entire platform from the ground up.
Below is an example of a wireflow we created for Starfish during our UX design process.
As shown above, wireflows are a simplified chart that shows how users flow through different pages of the digital product, combined with a visual mockup of each page.
UX Design services at Morphosis
At Morphosis digital consultancy, we have a vibrant team of experienced UX designers who are focused at delivering impactful results for our clients.
We fully embody the belief that ‘people come first’, putting the wellbeing of our employees, the interests of our individual clients, or most importantly, the needs and desires of the end users at the forefront of everything we do.
Our practised and proven service model includes:
Visit our main services page to learn more about how we can help you grow your business today.