We use cookies to improve your experience here with us.

User Flow Charts Development

Published on 05 May 2022 in Design Thinking
User Flow Charts Development banner

Discover how user flows can help reduce drop-off rates, boost engagement, and increase conversions for your business.

Mastercard
Agoda
Prudential
BCG
SCB
TTB
JP Morgan
Kerry
BBC
True
Mastercard
Agoda
Prudential
BCG
SCB
TTB
JP Morgan
Kerry
BBC
True
Mastercard
Agoda
Prudential
BCG
SCB
TTB
JP Morgan
Kerry
BBC
True

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:

  1. The user: who are your users? 

  2. Their goals: what are they trying to accomplish or achieve with your product?

  3. 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:

  1. The user is the potential patient.

  2. The goal is to make an appointment.

  3. 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. 

https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/Frame_24069_7_52b50c9526.png

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. 

https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/Frame_24069_8_55c3dc035a.png
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 stronger navigation and architecture for your application or website early on in the design process. 

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. 

https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/Frame_24069_9_1015b7cbf5.png

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. 

  1. User flow: user goes to homepage -> booking page -> search bar -> searches for doctors -> views a doctor's calendar -> chooses a time -> books an appointment

  2. 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:

  1. User flow charts

  2. Task flows

  3. 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.

https://morph-2-develop-strapi-bucket-qa.s3.ap-southeast-1.amazonaws.com/Frame_24069_10_7a22e0d65f.png

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:

  1. User research

  2. Digital product strategy

  3. UX/UI design

  4. Web development

  5. Mobile app development

  6. And more

Get in touch

Know your users. Make strategic choices. Build better products.