☠️ 👼🏾 👎🏻 User flow: how to create popular applications and sites 🔋 👩‍🍳 💪🏿

Hello everyone!

I am Maxim Skvortsov, UX / UI designer of Omega-R, an international company for the development and integration of IT solutions. I design and visualize the interfaces of mobile and web applications.

Based on my experience in the field of information technology and company expertise, I want to share my vision and approach to the use of one of the design design tools - user flow. Why is it used and why is it a valuable assistant for a designer? What can user flow look like and how to create it?

What is user flow?

Situation: You have found a new application that promises to do exactly what you want, and you eagerly press the download button. After a moment, the application starts and you are ready to get started. But first you have to register an account, then give the application permission to access your location and send you push notifications, after that you need to scroll through the entire tutorial, the agreement on the use of personal data, etc. The bitter truth is that the user in this interaction is more likely to close and uninstall the application, no matter how functional it is. This is why it is so important to optimize the user path in the application with user flow.

User flow is a visual representation of the sequence of actions.that the user performs to achieve his goal . It can cover either a particular function or the entire product.

To make a sequence, it is necessary to conduct a study and answer three basic questions :

Who is the user?
What is his purpose?
What steps should he take to achieve this?

These are the main questions that can sometimes be difficult to give clear answers, so supporting questions may help:

What will the user use the application for?
What motivates the user to achieve this goal?
How does the app help you reach your goal?
What can prevent a user from using the application?
What qualities of a product or service are most important for the customer and users? What are the questions, doubts and hesitations?
What qualities of the application are most important for the user?
What information do users need to complete an action?
What kind of emotional trigger drives them to action?

In the design process, many questions must always arise. The search for answers to them provides an opportunity to consider every little thing from all sides. Only in this case can the result be a truly convenient product.

User flow is a story about a user.

User flow allows you to look at the interaction of the user and the application through the eyes of the user.

If full-fledged sites provide enough space for creativity, then the development of mobile applications always forces us to seek a balance between functionality and usability. On the one hand, users should easily access the most important functions from the main screen of the application without many additional steps, easily clicking on the large buttons. On the other hand, when we talk about applications, it's not just about buttons.

Suppose you are creating an application for a music player. On the one hand, you want the user to be able to play their favorite songs with one touch. On the other hand, they need a way to define favorite tracks, search for new music (possibly in several places), control the volume and adjust the equalizer, sort music, shuffle the list, read the artist’s biography, make purchases and have all other player functions on hand. The user will want to share recommendations and playlists in social networks and see what their friends are listening to.

If the user surfs the online store while listening to the playlist and decides to skip the current track, he does not need to close the store and go back through several menu steps - access to this skip button should be on the same screen.

Creating the most functional application is not so difficult, but putting it all together in the most attractive and user-friendly way is a much more difficult task. If the developer company did not cope with it and did not create the application intuitively, then it will remain unclaimed in the stories. It is always easier for the user to download a more understandable application than to spend time reading manuals and tutorials or wander about it endlessly in search of meaning.

Designer role

Imagine that you are working on a product in one team, where there are Project Manager, Backend- and Web-developers. Suppose there is even some kind of technical task from the customer, which is written in sufficient detail and soundly. It remains just to take and make a product.

What should a designer do? Judging by the expected result, draw all the necessary screens so that the final product is convenient and beautiful, and give it to the developers.

In general, yes. But there is an underwater part of an iceberg. Many things are hidden there that few people think about. We all love convenient and intuitive interfaces, we love when everything works logically and the result of any interaction is predictable. And for all this to happen, you need to carefully work out every detail.

Just for this you need user flow - it will help determine the ways for users to achieve the goal, calculate positive and negative scenarios on the chosen path to achieve the goals of our potential users. It makes it possible to understand whether all processes in the product have a logical conclusion and are built efficiently, so that the user spends a minimum of time to achieve the goal.

Important: the larger the problem and the more functions, the more scenarios you need to work through.

Thus, user flow helps eliminate a common mistake when creating a list of required functions and simply designing interfaces based on them. Such an approach is, of course, possible. But this can lead to scenarios of interaction with the interface causing the user to go through too many steps to perform simple operations.

Value for the product team

User flow helps at the top level to coordinate scenarios with the customer for the product or functionality. Especially when customers do not have specific and detailed requirements (when they themselves do not understand well what they want). In this case, user flow can give some direction to customers, and they will already tell you in which places they would like to change the logic by providing their feedback - either in the form of a comment or by independently adjusting the current scheme. Despite the fact that creating user flow seems like a complicated and time-consuming process, it helps to eliminate a lot of mistakes during product development. With his help, as they say, "slowly harness, but quickly ride."

For PM, based on user flow, it’s convenient to start tasks for developers - it’s quite obvious and transparent what changes need to be made to the current logic or what new functions will be added.

Testers can prepare use cases (tests) and checklists, as they demonstrate user-friendly scripts in a convenient format.

User flow is very useful for the team, especially when the composition of the team is large enough - you do not need to separately explain the logic of work. Thus, user flow involves the customer in the design process, motivates the team, directs all work processes in a single direction, since each member of the team sees the picture as a whole.

Customer value

A user is almost always the one who buys or uses a product or service or is potentially ready to do so. From how comfortable this process is built, its user loyalty depends. No matter how he purchases a product or service - at the office, by call, with a specialist visiting the house, through the site, through the application - the way to acquire and use should be as simple as possible.

As for sites and mobile applications, user flow is how the user will navigate content (text, images, audio, video). User flow includes prioritization of content requirements, barriers to navigation, and the search for the quickest and most painless routes to the target action. Essentially, user flow is directly connected to the conversion funnel, and the IT company that uses user flow automatically develops an effective conversion funnel or optimizes an existing funnel.

The result of the assistance provided to him in achieving the goal embodied in the design thanks to user flow is a happy and interested user. A happy and interested user means more time spent in the application or on the site, lower bounce rates, increased conversion rates and improved user experience.

Thus, user flow directly affects the success of the site or mobile application and the customer’s profit. The user becomes the center of design, and this completely coincides with the principle of customer focus on the business.

What does it look like?

I have never seen a clearly defined standard in accordance with which the design of user flow takes place. The representation of user flow can be different and depends on how thoroughly everything needs to be worked out. It is important to achieve your goal as a designer - so that the customer and the product team understand how the user will get access to a particular function, where they will be located and how they will work.

User flow can be represented as combinations of:

task flow
wire flow (lo-fi)
screen flow (hi-fi)

Let's look at each of them and see how they can look. As an example, we take the online store of household appliances. Define the user, his goal and steps to achieve the goal.

Let our user be a young mother whose goal is to buy a multifunctional food processor. One scenario in the sequence of steps may look like this:

open the website of the store;
type in the search “food processor”;
Compare multiple products from search results
put the product you like in the basket;
make a purchase;
to pay;
close the site.

Task flow

Task flow is a simple representation of what the user does at each step to accomplish a goal or task. This is essentially a classic flowchart that defines this sequence.

This scheme does not reflect conventions and other issues that need to be addressed. And what will happen if nothing was found by the search results? And what will happen if the payment is not successful? Here, only general steps are presented that can involve many actions: for example, the search can be expanded with many filters, the payment path depends on the choice of payment tool, etc.

To draw up a diagram, you can use the list of necessary and sufficient elements from the classic block diagrams shown in the picture, or use the BPMN standard - It is aimed both at technical specialists and business users.

Wire flow (lo-fi)

Wire flow is a combination of a flowchart and wireframes. Wireframe is a low-detailed sketch of the screen design, the emphasis of which is not on the visual component, but on the location of the elements, the structure and content of the screen.

In wire flow, instead of flowchart elements, schematic screen layouts are presented, with which the user interacts on the way to achieving the goal. No need to focus on the visual details and draw each button and icon. Most often, the emphasis is on the navigation elements in the design of each individual page.

Wire flows are especially useful when creating mobile screens: the relatively small sizes of mobile screens are easily used to replace more abstract elements of flowcharts. Wire flows are comfortable for the formation and refinement of technical specifications, but are hardly suitable for the testing phase.

An example of such a scheme:

Screen flow (hi-fi)

Here we are talking about elaborate screens that are understandable to both users and developers. Usually, emphasis is placed on navigation elements and some nuances of behavior. It can be used as a regulatory document to approve the design of layouts.

Screen flow can essentially be called a prototype if you add interactivity to it. Its feature is high accuracy or perfect pixel matching: it takes into account the physical size of the screen and presents all the visual and typographic details of the product. Screen flow elements are actually screen layouts of a finished application.

The customer of the application may be pleasantly surprised by the speed of development when you show him the screen flow, and may think that the development is close to completion. As a rule, we inform the customer in advance that there is no code behind screen flow, but the presence of screen flow gives the customer a guarantee that well-prepared UX and UI will be followed by an equally perfect code.

Screen flow example:

Below is an example of how a hybrid of classic flowcharts, schematic images, and final layouts might look like in the aggregate.

As you know, the most time-consuming is the most elaborate - screen flow. It looks like a working application and is ready for interactive prototyping, testing, new iterations, approval and transfer to developers. There are many automation tools for user flow team design, including Overflow, Miro, Flowmapp, and others.

Thus, user flow, covering the entire product, systematizes and structures the process of its creation, maximally orients the product team to the needs of the user and their common understanding, allows you to create an extremely understandable and intuitive product by analyzing user scenarios. All this not only significantly speeds up the development speed, but also deepens the interaction with the customer. User flow makes an IT company always think about the customer’s business requirements in order to create an application more efficient and successful than is possible within the allocated budget and time without using user flow.

User flow: how to create popular applications and sites