Why 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 the steps before and after using the product, this only examines what happens inside the actual application.
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.
Interested in how user journeys fit in our design process? Click here to download our free e-book: Product Managers’ Guide to UX Design.
What is a User Journey?
When starting to map how visitors will move through their app, most people first 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 which cannot be used for anything.
First design the flows leading to the most important goals. 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.
Knowing users’ problems and motivations, determine the two or three most important goals to achieve with the application. And design user journeys for them.
For each journey, write down the persona’s name and exact goal to which the given journey belongs. Plan simple, linear journeys. Think of the ideal way to get the users to the 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.
It is also up to the designer to decide how elaborate 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.
We’re here to help! To create a user journey, download an easy-to-use template from uxstudioteam.com/resources.
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.
Still interested? Click here to view our Product Design book! It’s a practical guide to help find a path through the jungle of designing digital products.