User Journey: Design Flows Instead of Screens

We, designers, are easily obsessed with screens. As features and screens pile up, it gets more difficult to see apps with our users' eyes. Familiar? It is the point to switch and think in flows instead of screens. A user journey shows how your people reach their goals in your app. This article introduces the basics of creating a user journey with some tips and specific examples.

Why should you design flows?

Before we start drawing screens, we design the flows people go through. They can be signing up, checking out in a webshop, or steps to upload photos in a social media app.

These processes determine the path through an app’s use and what experiences it provides. Creating user flows or user journeys can serve as a tool for designing processes. As opposed to the customer journey, which analyzes all online and offline steps before and after using the product, user journeys only examine what happens inside the actual app.

The customer journey strives to get a picture of the environment where users apply the product and to get assistance as to what functions are still lacking. User journey details its use as a map. Beyond creating it, we are also examining how to educate users with a good onboarding process and what flows and loops are needed to lure them back later.

What is a user journey?

When starting to map how visitors will move through an app, many people tend to draw a large spider web. It contains all the pages and screens, with lines connecting all the possible routes. This results in a huge mess that requires extra effort and guidance to be used by anyone else. Such an approach often makes things unnecessarily complex for yourself too.

A User Journey represents a linear process: the process step by step through which the user achieves a specific goal. Each of the steps is then captured in more or less detail, always from the user's point of view.

Make sure you do not examine processes from a technical point of view in this early stage. Do not design a series of pages or screens, rather review what the users will do and in what order. Decide later from a technological aspect what to put on one screen and what on separate pages.

How to create a user journey for your project?

Knowing users’ problems and motivations, determine the two or three most important goals to achieve with your product. Think of the ideal way (flow) to get the users to each given goal - the presence of many branches indicates a probable mistake.

The journey is divided into mental steps. What the users would formulate as a separate activity (if asked what had happened to them) counts as a step. In the case of a webshop:

• Search for the shoes.
• Pick favorite.
• Check for correct size and price.
• Order.

For each journey, write down the persona’s name and exact goal to which the given journey belongs. One journey, one goal. It is up to the designer to decide how elaborated to make the journey. If necessary, it may need great detail. Many times, seeing the processes at large requires the opposite.

Today’s menu: thoughts and feelings

The image below shows one of the user journeys of the Right Now service.

In this app, amateur artists can create embedded “Buy now” buttons for their blogs which can help visitors buy the work from the blog post with one click. It is precisely determined to which user persona and goal the journey belongs to, what force drives the persona, and what kind of environment the process takes place in.

Regarding certain steps, it is worth writing down what the persona is thinking and feeling. Write imaginary thoughts above the steps, as a quote, or draw emoticons. The most important tool for designing emotions is the user journey. Emotions are always reactions to something that happened. A few examples of emotions felt while using applications include

• Joy – at succeeding at something;
• Sadness – at bad news;
• Concentration, focus – when really wanting to do something;
• Confusion, insecurity – when not understanding;
• Frustration, anxiety – with annoyances;
• Pride – in achievement;
• Fear – of an unforeseen obstacle;
• Surprise – either pleasant or not (WTF and WOW)
• Enthusiasm – about starting something;
• Interest, curiosity, suspenseful thrill – when trying out a new thing;
• Anger, disappointment – at undesired results;
• Carefulness, distrust – when making an important decision or paying for something;
• Hurry, rush – when just wanting to get it over with;
• Boredom – when nothing exciting happens.

We design the screens of the app completely differently if we know which emotions to expect on them. Reflect these emotions, and strengthen them with the design.

A success message at the end of a web checkout process can mirror the user’s joy. Fireworks and a cute dog congratulating come in handy -- if it suits our user persona, of course. However, when the user is filling out the order form, the same little dog only annoys and distracts.

More ideas = better design

Create user journeys in the early stages of product design process. This is still the experimental phase, so never stop at one idea. The goal is to find out many different versions for each journey.

It may be surprising that the majority of designers come up with the same idea for a similar problem set.

Sometimes there are good first ideas, but usually these are not the best solutions. For this reason, create at least three different journeys for each goal. Then, having come up with several solutions, decide on the winner.

No ideas? Easily create new journeys from existing ones, by mixing up the steps. Sometimes orders which at first seem a bit strange work great in reality. Delete steps from the process or add new ones. Combine steps or divide them into smaller ones. The most important thing is to experiment and not accept the first idea as the best.

Diagrams come in handy when trying out several solutions during the design phase, but it is not the only way to represent user journeys. Telling the process as a story is a good idea. For this, use comics or a storyboard. These are especially useful to help others understand the given situations.

What is a good user journey like?

The question of which version works better comes up when experimenting with different journeys. A user flow succeeds if reaching the goal comes as easily and as quickly as possible.

Take webshop checkouts as an example again. Designers in the past thought if they put all the form fields on a single page, it would significantly shorten the checkout process, which in turn would improve things for the user.

This thinking created the monster below.

Although all the necessary fields are on one page, it does not help. This does not mean a good single-page checkout is impossible. But the fact that there is technically one page, does not mean that the process is better, either.

Virgin America’s webpage presents a counterexample. They separate every step to its own page. The process consists of many steps, but each requires choosing and deciding on only one thing.

There is no general rule for the number of steps. How to break it down? It always depends on the given product, the users, the required and displayed data.

People find the decision-making situations the most difficult cognitively, but filling in forms can be annoying, too. Every step of the flow should be designed to be straightforward, clear and easy to accomplish. This way, the users will not lose their enthusiasm along the way.

And naturally, combine connected things into one step.

Have you tried designing a user journey before? I’d love to hear your story. Please share this article with those who you think struggle with designing screens instead of flows.

Take the next step to improve your product's UX

UX studio has successfully collaborated with over 250 clients worldwide. Is there anything we can do for you at this moment? Let’s get in touch and discuss your current product design challenges.

Our experts would be happy to assist you with product design, UX strategy, user research and testing, and expert training.