Introduction

Designing a good user flow is the first step that should be taken after receiving the content from the client.

The benefits of a good designed user flow are many. It will help to better plan the UX and wireframe design; It is a great support for the designers that will have to produce the UI and it is also a great tool to be available for the developers which will have to code the final app or website.

Good user flows are also a great added values for the client which will be able to see their content organised more clearly. As designers, we often receive the content map in excel files or on text files. Too often the files we receive are presented as simple words written down with a very general hierarchy.

If we consider a veterinary app that can be used by two sets of users: the doctors and the pet owners. Below is an example of the content the designer may receive from the client. It offers a general idea of the hierarchy of the app but it doesn’t really show the full functionality and interactions.

Getting started

The first step should be to decide what software is more appropriate to design the user flow. This can be very subjective and will depend from what knowledge the designer already has.

A good approach would be to start importing the content received (or created) into Illustrator (or any other vector software) and roughly link the different sections based on the client content. Simply crete a dot for each step (or menu item), assign a tag to it and link it with an arrow to another dot.

Once all the content is transferred in Illustrator and linked with simple arrows, it will be easier to start moving it around and create a key for the different types of links.

The arrows that link all the content should be differentiated based on the type of link. For example there could be straight steps, options or cycles.

Analyse your data

It is advisable to take different approaches to the design of the user flow based on the type of data we have available.

The designer could simply receive a site map with nodes that specify the different pages. Some other time they could receive a more detailed map which include the steps that the user will take on that page.

When a more detailed map is supplied, a list of actions associated to that point during the flow will also be included. These actions could specify what the user is thinking at the time performing the action, what their emotions can be, reviews from internet or direct reviews, what the company is doing at the moment and their opportunities.

The example above focus on the site map with nodes for the different pages and how the user can interact with each page of the map. It also specify that there are two type of users, the doctor and the pet owner. For this reason there will be two user flows designed which should be have very similar paths but with slightly different actions.

If we consider the data received from the client for the pet owner flow, we can use the key displayed in the picture on the left.

The user flow will look like the image below.

Otherwise, if we consider the user flow from the doctor perspective, the flow will look like the image below

It is important to note that these flows only represent the app map nodes and not all the user actions including background thinking that can happen on a certain step.

Cycles are important

When designing a user flow it is essential to highlight the cycles in the data. These are sections that links with each other on a loop.

If we consider the whole flow from the registration to the login to the dashboard we need to highlight that: on the first screen we have an option where we can login or register; if we choose to register then we have straight steps all the way to the dashboard; otherwise if we decide to login we have straight steps to the dashboard then we can log out and cycle back to the first screen. It is also important to highlight that we could go straight from the first screen to the dashboard if we already log in previously.

These cycles are present on a whole lot of different areas and it is essential for the designer to highlight all the cycles and their behaviour.

They can be shown in different ways: it can be with a circle with multiple steps on it or with a line with a specific pattern applied to it to indicate that the flow goes back and forth from that nodes.

Focus on the user you are creating the journey for

It is important to understand from the data that we received if there are going to be more than one user flow.

The client could sometimes not understand the importance of separating the user flows into multiple one as they may see the app/website using the same pages or screen for all the users. But the way each user is going to behave in that page will be different.

In the case of our example the app will have exactly the same screens for both the doctor and the pet owner but they are going to use some of them in different ways. For example they can both access the pet conditions page but only the doctor can update that page with a new record while the pet owner can only see the data. This means that the doctor will need extra functionalities (buttons) in order to add these informations to the app other than just display the records already available.

Integrating multiple users: how to and best practice

As mentioned above it is always good to create different user flows for different users.

Other times it is also useful to display both user flows together. This is the case when the clients supplies more detailed data that doesn't just include the map nodes, but also the actions that the user is taking on this page.

For example let's consider both the doctor's and the pet owner's actions on the medication page. Here the doctor can add a medication record and view the condition for that medication; while the pet owner can view the condition, order a medication online or contact the clinic about the medication. Behind this links we can also highlight that there is a hidden cycle which does not have anything to do with the page nodes but it is used by the clinic on the background: the email reminders. When a doctor adds a medication, a new email cycle with the pet owner is started. The practice will first send them an email with the link to buy the medication. But there could also be a second point in the cycle where an email reminder is set to be sent every x days based on how long the medication lasts.

These cycles will not display on our pet owner user flow or on the doctor user flow that we are considering above, but they will need to be present where a more detailed flow is required and are essential when designing complex and complete user flows.

There are multiple cycles that will need to be displayed on the complex flow and will vary from the type of client we are dealing with.

Design choices

When designing user flows, especially if they are more complex ones, the designer should make sure to use a key to help the client and the developers understand the different steps and interaction.

Alway choose readable colours and lines that are easily identifiable when quickly glancing at the board. Consider also color coding areas and interactions.

If the flow is very complex and long, consider splitting it into areas on multiple pages or create a zoomed out version where it is possible to click and zoom into specific areas.

If there is a lot of content for each step make sure that the content is grouped and potentially displayed on a different page that can be reached with a button by clicking on the step name.

Software choices

As mentioned in the introduction every choice of software is very subjective. It must be based on the best knowledge of the designer as it is important to be comfortable with the software used.

As it is necessary to make a lot of adjustments and alignments it is better to use a vector software such as Illustrator for the first drafts draft and transfer the design into InDesign if it is necessary to create interactive flows.

Testing your journey

Always test the flow with other members of the team before passing it to designers, clients and developers to make sure there is nothing has been missed out.

It may seem obvious but it is essential for a good final product to get all the feedback possible from a variety of test subjects.

Next steps

Once the user flow is agreed and finalised it can be used to define what pages need to be created.

The following natural step would be an interactive UX wireframe prototype based on the steps highlighted in the user flow.

How to design great user flows - UX UI tutorial

Contents