Empathy in UX/UI 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 the future: unreasonable 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. Therefore, empathy in UX design is broader than understanding users’ needs, it affects the context, limitations, habits, and relationships between people in a general way.

Unfortunately, a 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 learn about several methods that we use in our mobile app design services to make UX human centered design, and create cool products.

9 Important Questions Before You Start Designing a User Interface

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

1. What is the purpose of the project?

2. What are the client’s goals?

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

4. What user 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 them with the team and the client. That’s how you achieve synchronization and a common understanding of the problem and its 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 the future. Do not forget to analyze during the project what information you lack, and at the end you will create your own list of questions.

Be sure to take note of everything you hear during the meeting. It is good practice to make a meeting minutes after the meeting and send it to the client to capture information. Some even practice recording interviews and can always listen to them to refresh memories. 

Make a small cheat sheet with the project goals and check it occasionally to make sure that you are heading in the right direction.

 

 

Download the checklist of questions to ask 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.

UX Design Persona

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 UX design persona (users portraits).

How to create?

It is a description of a fictional person, based on the target audience of the product. Of course, the best option is to have an opportunity to communicate with the users, to conduct interviews and research. But there are 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 is already available research with results on your topic.

 

Download the template of UX 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. UX design persona plays an important role for the next two tools: UX empathy map and UX journey map.

 

UX Empathy Map

UX empathy map is 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 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 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 a bad internet connection, the 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 about what sector to put the idea in, it can be suitable for several. Just pick a sector and put it there. It’s worse if you have absolutely nothing to add to the sector. It shows a lack of understanding of your audience. 

Benefits

UX 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.

 

UX journey map

It is a tool for visualizing behavior and identifying pain points, obstacles, and 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 UX journey map for a taxi application (Uber).

 

How to create?

The map, as you have probably 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 depending 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.

UX customer journey map for the Fingers website

 

Sometimes we add a section with ideas, what improvements or 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 the user's behavior.

For example, when we’re designing an application for medical services, the UX customer journey map helps 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 they still remain tools. It is important to be able to use them, 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 empathy in UX/UI 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 you are creating for them. Relying on UX human centered design, destroy borders and be open.

contacts image

Got a project in mind? We’d love to hear what matters to you

Contact us