Empathy in web design: The What, the How and the Why

If you’ve read some of my previous articles, you’ve probably noticed my obvious love for Psychology and my constant endeavour to highlight the psychology in other areas like marketing, development, testing etc. The more I’ve explored these areas, the more you’ve read about it on the ResellerClub blog 🙂

This time, I’ve been drawn to empathy in design.

What is empathy in design?

Empathy, in the way we know it, is the understanding of another’s emotions. Empathy in web design is a design centric approach to paying attention to the user’s feelings towards a product. It’s understanding what the user really feels and thinks about your product. The focus is on user’s needs, – feelings, experiences & outcomes. This also includes difficulties they may face, how long they take to reach a desired goal, ease of navigation etc.

Why is empathy necessary?

Empathy helps:

  • Increase open-mindedness
  • Reduce bias
  • Collaborate with other research participants and
  • Accept & validate your own observations

Empathy helps improve user experience through observation and analysis of the user’s experience of your product. You can greatly improve the designs you create if you empathize, giving you an edge over competitors.

How should you empathize?

The process of empathizing in design follows certain steps:

Step 1: Observe: Take time to observe the users of your product in their natural environment. While you’re observing, keep in mind the things to record like:

  • Ease of use of the product
  • Usability of the product
  • How long the user takes to reach his/her desired goal
  • Problems the user faces
  • Methods & approaches
  • Alternative solutions

Let’s take an example where you are the user, I am the designer, developer, tester. Say, I gave you a website like Canva and asked you to create an invitation for a brunch party you were to host, I’d observe things like:

  • If the navigation was easy enough to guide you to the templates for the invitations
  • If you are able to upload images of your choice
  • If the ‘crop photo’ option was easy to locate
  • If you satisfactorily created an invite you liked

Step 2: Capture Data: Observation brings us to step 2 of the process which is capturing data or recording your observations. This could be through audio or video recordings or even simply, notepad records. The purpose of this step is only to capture data and not to analyse just yet.

Continuing with the Canva example, here I as the developer would capture data like:

  • Were the template options too many?
  • Was it causing you confusion?
  • Time taken to find the ‘Upload image’ button
  • Time it took you to successfully create an invite

Step 3: Analyse: In this step, analyze the data you collected in step 2. This step is important to understand the user’s needs, emotions & pain points. Take time to see problems from all perspectives and not rely entirely from yours alone. This step is the most crucial in empathy.

With the data I captured in Step 2, I’d analyse in the following manner:

I notice it took you 20 seconds to find the ‘Upload image’ option. It could be that the option is either not visible, cluttered with other buttons or the icon I’ve used does not convey an action of ‘upload’.

I’d also look at my data and analyse other problem areas. These questions might help:

  • How does the problem encountered affect the user?
  • Do other users face the same issue?
  • What needs to change to avoid this issue?
  • How does this issue affect our goal?

Step 4: Brainstorm for solutions: Brainstorming is a free-flowing exercise of tossing about ideas and solutions in a given setting with a given group. This step follows the ‘Analysis’ step where the empathizing takes place. The idea is now that you’ve empathized, look for solutions to address the user’s pain points.

Now that I’ve identified your pain point with the ‘Upload image’ button, I’d brainstorm with possible solutions to make the button more prominent by:

Changing the colour of the button to make it stand out

Changing the icon

Placing the button away from other buttons

Step 5: Execute: Now that you’ve got the solutions, it’s time to put it into test. This step involves bringing the ideas from the previous step into action. The previously discussed solutions are put to the test. According to Leonard and Rayport (in Spark Innovation Through Empathic Design), there are three distinctive reasons for conducting prototype testing in an empathic design approach:

  • clarification of the core concept of the product for the development team
  • enabling the team to share the current design with those who do not work in the functions covered by that particular team
  • the potential for further improvements once tested with real consumers and following discussions with the target users

Once I’ve figured my solutions to the problem, I execute the action plan I decided in Step 4. I run it past some more users to identify if the time taken to find the ‘Upload images’ button reduced. If so, I’ve successfully managed to identify, capture, analyse, brainstorm & come up with an empathetic solution for your problem.

Conclusion: Is Empathy Enough?

But is empathy enough? Empathy along with design thinking is being touted as one of the key characteristics that sets designers apart. There’s no doubt the two are important but empathy is only one  step in the greater design process.

Empathy could lead to flawed design is if used as the only guideline. This is because, empathy based only on a few users’ experiences of the product or in an unnatural environment could give you results that might not be applicable for other users. It’s important to have your point of view as well. Probably get other researchers involved as well.

The best type of designs combine the understanding of a user’s needs within a particular context & with an opinionated viewpoint.

About Amrita

AmritaAmrita is a marketing specialist by profession who loves writing, music and animals.



Amrita is a marketing specialist by profession who loves writing, music and animals.