User Flow Charts Development
Let’s work together !
We can deliver a complete bespoke solution, supply a dedicated team of experts, or provide an extension team to augment your staff.
What is a user flow?
User flows are created in order to easily communicate design plans to different teams from the perspective of 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?
In creating a user flow chart for this particular project for Bangkok Hospital, we identified that the chart had to include the following three elements:
The user is the potential patient.
The goal is to make an appointment.
The steps in order to achieve that goal involve filling out an online booking form.
Ultimately, the user flow charts helped us to create a simple and intuitive navigation design, minimizing 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’ perspectives can often get lost in the conversation.
By creating user flow charts, you are able to highlight the key steps users need to take on 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 your users, allowing you to save both time and money while creating a digital product.
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.
Here are four reasons why user flows are incredibly important for creating impactful UX design.
1. To create a forward-focused workflow
User flows help us visually organize the actions users take on a digital product, especially on large-scale projects. Thus, they help us identify the steps to consider when designing and developing every aspect of a digital product. This leads to a more focused and streamlined workflow, reducing the overall costs for our clients.
2. To discover 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 calls to action.
3. To highlight CRO opportunities
User flows enable us to gain insights into how users will interact with key features on different pages on a 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.
4. To eliminate loose connections
By visualizing all the different paths that 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 were designing and developing an online job referral platform from scratch.
Flow charts helped us understand the different functionalities that needed to be in place to provide a seamless experience for employers, recruiters, and job seekers. For example, for users with 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 a user journey and user flow?
User journeys and user flows play vastly different roles 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 the different mediums of interaction that users go through before completing their goals. They also help designers understand the various user touchpoints and their satisfaction or experience at every touchpoint.
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 with in a digital product, shedding light on how to best structure a website or app. They can also reveal how 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 -> searches for doctors -> views a doctor's calendar -> chooses a time -> books an appointment
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 touchpoints within one digital product | ⨉ | ✓ |
Can span 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 users achieve their goals | ✓ | ✓ |
Usually mapped into clear diagrams | ✓ | ✓ |
What are the different types of user flow charts?
While user flow charts come in various forms, three main types are used throughout the design process. They include:
User flow charts
Task flows
Wireflows (low fidelity) and screenflows (high fidelity)
1. User flow charts
As mentioned, user flow charts map out key areas of interactions within an online platform. They allow us to visualize how we can optimize 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 while trying to complete a goal.
Let’s use our project with a company called Saver as an example. In this project, we were building an online platform that allows community members to request and offer help to each other. The requests are categorized 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 are to submit a request and select a helper
2. Task flows
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: This should be a shared common starting point for your users. It 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: This is what your users see when they finally complete their goal.
3. Wireflows and screenflows
Wireflows and screen flows, on the other hand, are slightly more complex. As their names suggest, wireflows and screen flows are a combination of wireframes and traditional user flow charts. Wireflows can also include multiple pathways or branches that users can take when trying to complete their goals.
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 goals, our team at Morphosis helped them design and develop the entire platform from the ground up.
As shown above, wireflows are simplified charts that show how users flow through different pages of a digital product, combined with a visual mockup of each page.
UX design services at Morphosis
At Morphosis, we have a vibrant team of experienced UX designers who are focused on delivering impactful results for our clients. We fully embody the belief that people come first, putting the interests of our clients and the needs and desires of end users at the forefront of everything we do.
Our proven service model includes: