🌷 Designing With Empathy · The Bunker #12

Let’s get started!

Some time ago I revealed one of the things that helped me the most to improve as a designer, we talked about the Asking-Fear Barrier.

One day, in one of the questions I asked a designer I was following at the time, I asked him "what advice would you have liked to have been given when you started". The answer was quite terse, but clear. He said:

• Design with empathy. Put yourself in the position of your target audience and design based on their profile. Of course, design based on the insights we can extract from research data and user testing. But above all, design prioritizing what will be useful for the user, and not for us directly.

Designing with empathy simply means:

• Prioritize the user's needs over your own.
• Set aside assumptions and observe user behavior, then make the necessary changes to meet the observed needs by studying user behavior.

According to the Twitter co-founder:

“If you want to build a product that’s relevant to people, you need to put yourself in their shoes.”

Let's see an example, you will understand everything better and we will go deeper into several aspects:

Context: Ianua is a company dedicated to raising awareness of the impact of each person's carbon footprint. After a study, they realized that one of the reasons why people did not have sustainable habits was because they were not able to see their impact on the planet directly.

Objective: To make a platform where the user is able to see their environmental impact.

When we developed the application, we wanted to get a visualization in the form of a dashboard, so that the user could see at a glance all their impact broken down. The fact is that this is a fairly complex application in terms of functionalities, and there are several functions that the user must be able to do:

• Change order data in the dashboard.
• Hide panels.
• Show other panels.
• Copy data.
• Export data.
• Isolate concrete data.
• Etc

To allow the user to perform these functions, it would obviously occur to anyone to place certain icons or CTAs that invite the user to click to perform these functions. As is typical, we could use the "more vertical icon", which allows us to indicate to the user that there are more hidden options.

This was useful and clear to the user, but we had to find a way not to repeat the icons and use the space for something else.

So how do we replace that icon and place the functions elsewhere? Well, by holding down to display a lower sheet. In both iOs and Android, deep pressing is used to show more options in those components that have a visible container. In this case it worked perfectly for us. And so we could use the space for something else.

This was useful and we could take advantage of the space for other things, but we were losing visibility. And this is when we made a major change:

• Any designer would leave the design here, because it's already clear enough and anyone who has some experience with applications will still press to see more "options", it's obvious.

The thing is that not all users are designers and not all find it intuitive to hold down to see more options.

Ask yourself: Will the user really understand that holding down will make them understand? Is it really obvious?

Is it really obvious?

Every function that runs in the application is subject to an event that can be tracked from any platform, such as Mixpanel or Google Analytics. We introduced the "home-more-options" event and so we could see how many users reached that functionality.

After seeing that there were really few users who managed to reach that functionality, we decided to make a user guide.

It is advisable not to base our design on guides and brackets all the time, the product has to be clear by itself and must be understood by itself. Remember that a properly designed design is self-explanatory. However, there may be situations where not all situations are obvious, and the design may not be able to explain everything we want to reflect. In that case, rely on such resources.

Remember that every time you run the solution to any problem that arises, put yourself in the user's situation and propose a solution based on it.

Cheers, Jordi Espinosa.