Empathy in UI / UX Design

The ability to empathize with users is an integral part of product design, which, unfortunately, is often forgotten. But without this, we are not able to understand the true problems of users and hear the customer. That may lead to problems in future: unreasoned architecture, lack of onboarding, wrong prioritization, and so on.

 

Empathy is the ability to understand and identify with the context, emotions, goals and motivations of another person. Thereby, empathy in ui/ux design is broader than understanding users needs, it affects the context, limitations, habits and relationships between people in general way.

Unfortunately, lack of understanding of how users think and act is a big and common problem. How to achieve empathy when designing an interface? In this article, you will know about several methods that we use in Fingers to do empathic design, work in the Human Centered Design approach and create cool products.

 

9 Important Questions Before You Start Designing a User Interface

 

The first thing you should start with is to talk with the client, explore a domain and find out the answers:

1. What is the purpose of the project?

2. What is the customer’s purpose?

3. How does the client see the users, for whom he creates the product?

4. What users tasks will we solve?

5. Why will they use our solution?

6. How do we know that we have achieved the goal?

7. How do competitors solve these problems?

8. What are the reviews for competitors' products?

9. What functions and content are needed to solve user tasks?

 

It is important not just to answer these questions in your head, but to put them down and discuss with the team and the client. That’s how you achieve synchronization and a common understanding of the problem and future solution. In turn, it will save you a lot of time and effort while designing a website or application.

These are the main questions, but if possible, you should ask the client for as much information about the project as possible, about business and expectations. You never know exactly what information will help you in future. Not forget to analyze during the project, what information you lack of and  in the end you will create your own list of questions.

Be sure to notice everything you hear during the meeting. It is a good practice to make a meeting minutes after the meeting, and send it to the client to fixate the information. Some even practice recording interviews on and can always listen to it to refresh memories.

 

Make a small cheat sheet with the project purpose and sometimes check it to make sure that you are moving in the right direction.

 

Download the checklist of questions to the customer before the start of the project.

 

And a little hint: answer yourself, why do you need this project and what do you want to get in the end? Get a great portfolio case, explore a new field, try yourself in a different style... This will help to stay motivated throughout the project, even if something goes wrong.

 

Design Personas

Now you know what questions to ask the customer, to make everything go smoothly during the design. Let’s start working with the audience of the application or website. The first step is the design personas (users portraits).

 

How to create

Design persona is a description of a fictional person, based on the target audience of the product. We’ve already posted an article about the design personas with more details about how to create it. 

Of course, the best option is to have an opportunity to communicate with the users, to conduct interviews and research. But there’re different situations and you cannot always have resources, especially when testing the hypothesis and designing the MVP. Don’t be sad, there’re always workarounds: you can use analytical tools such as Google Analytics, search for the target audience on social networks, or, perhaps, there’re already available researche with results on your topic.

 

Download the template of Design Persona (user’s portrait) for Figma or check it out online.

 

Benefits

Portraits of users are the first step to "turn on" empathy in your team. It is worth remembering that the process of empathy and analysis is mutually exclusive mental operations. And since most of the teamwork is connected with analysis, it can be difficult to switch to empathy mode. But when there’s a portrait at hand with all “real” attributes like photography, name, hobbies, fears, goals, etc., then it is much easier to manifest humanity.

Design persona plays an important role for the next two tools: empathy map and customer journey map.

 

Empathy Map

The next tool is the empathy map. This tool can be used as an alternative to a design persona, or work together with it. It's better to work on the map with a team, but surely you can create such a map alone.

 

How to create

For making up a map, you can use a paper and a pen, as well as a board and stickers. In the center of the map place a photo and a name of your design persona. Next, you need to divide the area into 4 sectors:

— what the user says;

— thinks;

— does;

— feels.

 

Fill the areas according to your design persona:

Speaks. Put in this block the real user’s quotes from interviews or studies. If there’s no opportunity to make an interview, then, for example, you can see reviews of competitors' applications, find forums, blogs or even articles with the information you need.

Thinks. Here we write down the thoughts that the user has while using our product or service. What are they thinking about? What is important to them now? The information can be similar to the "Speaks" area, but it may be different, because people don’t always say what they really think.

Does. What actions does the user perform while using the product? How does he perform it? For example, while a long  loading with bad internet connection, user presses the progress bar. Or scrolling to go back to the beginning of the newsfeed, rather than clicking on the "home" button.

Feels. Anxiety, sensation and emotional state in general. Both positive emotions and negative ones.

 

 

Traditionally these four sectors are used, but you can expand the map and add two more: pains and achievements. In the block of "pains" we place obstacles, fears and negative scenarios, and in "achievements" needs and desires, which means success for the user.

 

Template for creating an empathy map that we use when designing applications and websites. Download Template

 

There’s no need to spend much time thinking in what sector to put the idea, it can be suitable for several ones. Just pick a sector and put it there. It’s worse if you have absolutely nothing to add to the sector. It says of a lack of understanding of your audience.

 

Benefits

Empathy Map helps to:

— determine the priorities and users needs;

— see the possibilities for solving the problem;

— categorize existing knowledge about users and understand what information is missing;

— tune the team into the same wave;

— make and support decisions.

 

Customer Journey Map

The Customer Journey Map is used to visualize behavior, identify pain points, obstacles, negative scenarios. However, unlike the empathy map, these points are used for specific steps (screens), and as a result, we have more detailed information and it’s easier to make conclusions about what needs to be done further.

 

An example of a Customer Journey Map for a taxi application (Uber).

 

How to create

The map, as you have probable already guessed, is also tied to the target audience, or if to be specific — to the design persona. One persona = one card.

The sections on the map may differ and depend on the purpose and scope. In Fingers, we use the following structure: we select the main scenario for the persona, and for each screen of the application or site we write down:

— the task of the user;

— what actions  they do;

— what they think and in what context are located;

— obstacles and questions;

— negative scenarios.

 

Example of a User Journey Map for the Fingers website

 

Sometimes we add a section with ideas, what improvements, opportunities we have on each step. The map is large, but it helps to identify problem points, and gives the whole team visual information about user's behavior.

For example, when we’re designing an application for medical services, the user's journey map helped our team to work out negative scenarios. This was very important, because they use this application often in poor health and mood and want to get help as soon as possible. Having realized this, we created the shortest path to achieving the goal and removed the intermediate steps, such as onboarding.

 

An example of a template for the User Journey Map. Download the map template.

 

Benefits

Thus, the user's journey map gives you:

— understanding users’ needs through visualization and storytelling;

— the team sees the pain points, obstacles tied to certain actions of the user;

— helps to identify opportunities for improvement.

 

Conclusion

The tools that we covered in this article are important, but still remain tools. It is important to be able to use it, but more important to understand when they are needed, and when you can do without them. Well-composed personas or maps help to argue and make decisions. But do not use them just because it's a popular tool  and other companies do it. Understand the purposes of the project and synchronize actions with it.

In any case, the need for empathetic design only increases, and this approach allows us to understand how people behave, feel and solve problems. In the era of globalization and diversity, you can no longer stay away from the consumers of the product that you are creating for. Destroy borders and be open.

 

More about Empathy Maps in the article of  Nielsen Norman Group.