Empathy mapping: Bridging the gap between design and user experience

Behind every new website is a team that invested time, energy, and resources to deliver the best possible digital product. To connect with potential customers, a key part of this undertaking is understanding your customers’ needs and motivations. Even the most knowledgeable and experienced user experience (UX) designers rely on tools for understanding users’ precise mental processes. Empathy mapping — a method for visualizing thoughts, feelings, and actions — helps you see the user’s perspective, so you can tailor your product to their needs and preferences. 

What’s an empathy map?

An empathy map is a visual tool that helps you view your website the way visitors see it and understand a target audience’s thoughts, feelings, and actions. It involves creating a visual representation that’s divided into quadrants — each dedicated to what a user persona says, thinks, does, and feels — with the goal of capturing their perspective. Whether you uncover a stumbling block or an opportunity to build a helpful new feature, what you learn through empathy mapping can help you build more impactful, user-centric experiences. 

To make an empathy map, draw from data from market research, interviews, observations, and heatmaps. Identify gaps and unmet needs in the user experience — and brainstorm creative solutions that add value and differentiate your products in the market. 

These maps are also a handy visual reference for cross-functional teams and a way to align efforts toward common goals.

Understanding the empathy map quadrants

Empathy maps typically divide the user experience into four quadrants: “Says,” “Thinks,” “Does,” and “Feels.” Each section captures different aspects of user behavior and thought processes. This can unearth valuable insights that can inform how you improve your website and present your offerings.

Says

This quadrant represents things users have said about their experience. Your team could gather these statements, feedback, opinions, and preferences from UX research, such as user interviews, feedback forms, and surveys.

For example, someone might use a banking application and say, “I wish the app had faster transaction processing times.” This comment highlights a pain point, which can help UI and UX designers and developers understand that users value faster transaction speeds.

Thinks

This zone captures the underlying motivations influencing someone’s actions and decisions.

For example, someone may think, “I want to manage my finances better and stay informed about my spending habits.” This reflects their goal to have more financial control and suggests possibilities for new features that your team could develop, like budgeting tools and personalized tips.

Does

This quadrant focuses on observable actions and behaviors, like clicking buttons, scrolling, and typing. Specific interactions in a banking app, for example, may include paying bills and accessing monthly statements. Observing these real-life actions helps teams understand ways to improve important features, such as haptics (physical feedback through vibration), intuitive navigation (menus and gestures), and security (biometrics).

Feels

This quadrant explores the user’s emotions, sentiments, and mood when using an interface. It includes positive and negative emotions, from happiness and satisfaction to frustration and anxiety. With the other three quadrants, this section rounds out the user’s overall experience of a website.

For example, someone may feel worried after receiving real-time notifications about suspicious account activity. And, after taking action, like changing their password, their mood might shift to a sense of relief.

Empathy maps versus journey maps

Empathy and customer journey maps both help you build effective sites, but they focus on different aspects of the UX. 

Empathy maps are primarily for understanding the four quadrants of a customer’s experience at a specific point in time. These maps help you foster empathy with your users by recording information about their feelings and perspectives.

And, a journey map visualizes the user’s experience across multiple touchpoints, from initial awareness to post-purchase support. Instead of quadrants, the most common journey maps are timelines or flowcharts showing each marketing funnel stage.

Say you’re developing a productivity app for remote workers. An empathy map example here may include the following quadrants:

• Says: I struggle to focus without the structure of a traditional office environment.
• Thinks: I want to improve my productivity working from home.
• Does: I want to improve productivity by taking breaks between deep work.
• Feels: I feel frustrated by distractions and anxious about missing deadlines.

Meanwhile, a journey map for the same app would show the user’s path:

Discovering the app while browsing online → Signing up for a trial → Using the app daily for task management → Having trouble with specific features → Contacting customer support → Renewing subscription due to excellent service and improved productivity

A well-balanced website design incorporates elements from both types of maps and provides an empathetic and human-centered experience that covers all aspects of the buyer journey. Plus, by including both, you can validate assumptions and reduce the number of iterations and development costs, leading to a faster go-to-market launch.

Which stakeholders participate in an empathy mapping session?

Empathy mapping sessions benefit from having stakeholders with varied backgrounds and perspectives. Here are the key members you should involve in the process, and why:

• UX researchers gather qualitative and quantitative data about target audiences through interviews, observations, and surveys.
• UI/UX designers transform research into practical solutions that meet customer expectations. They also define the empathy map’s structure to help the rest of the team visualize the ideal user persona for your service or product.
• Web developers bring UI/UX designs to life through their technical expertise in web development languages and visual-first design tools. They also identify back- and front-end constraints (like slow-loading web pages and server speeds), and find solutions to balance UX with technical requirements.
• Product managers bring concerns like market trends, competitor analysis, and the organization’s overarching goals to the mapping process. They’re responsible for identifying gaps and fulfilling needs with an eye on a positive return on investment (ROI).
• Digital marketers use branding, messaging, and engagement strategies across multiple online channels to attract potential customers. They understand various target segments and your company’s current market position, allowing them to find opportunities to resonate with users. 
• Customer support representatives offer first-hand insights into user inquiries, feedback, and pain points. Their direct interactions with customers provide frontline evidence and real-world examples of what works and what doesn’t.‍
• Executive decision-makers provide leadership throughout the empathy mapping process. Their buy-in and support are essential for prioritizing resources, making investment decisions, and driving stakeholder alignment.

How to create an empathy map for customers in 5 steps

Follow this 5-step guide to learn how to create an empathy map, which will show you how to effectively connect with your target audience.

1. Determine the map’s subject and scope

Clearly define the focus of your empathy map, including the user persona you want to understand and the context in which they interact with your website. 

Say you want to target 18- to 35-year-old content creators in the North American subcontinent who need budget-friendly cloud storage solutions. 

After cementing a subject and scope, you can start researching for relevant data. 

2. Gather data

Collect insights from interviews, surveys, customer feedback, and observational studies. Continuing with the above example, you might interview college students about their social media habits to study usage patterns. 

Data gathering isn’t limited to external sources. Engage stakeholders across departments to gain a diverse understanding of your target audience. 

After researching and finalizing your ideal demographic, you can fill out the quadrants.

3. Populate the quadrants

Draw a basic quadrant or template representing the empathy map. Label the sections Says, Thinks, Does, and Feels. These sections will serve as placeholders for audience-specific information.

Start by populating the Says and Does sections of the map — known as the outer quadrants. You can write down verbatim quotes, behaviors, and repetitive actions users take during observations. And you can even use sticky notes for each piece of information and arrange them in respective quadrants.

Then, focus on the inner sections — the Thinks and Feels areas. Capture the emotions, attitudes, and underlying motivations that might drive the actions in the Says and Does quadrants.

4. Reflect on your findings

Review the completed empathy map as a team. To gain holistic and thoughtful understanding, welcome diverse perspectives and take time to digest everyone’s input.

Review the key points in each section and identify any gaps needing further clarification. For example, if a point in the Thinks quadrant is “I value privacy and security,” ask the person who jotted this down if they can be more specific. Perhaps they could narrow this down to “I value data privacy when using cloud-based applications.”

5. Make an action plan

Consult decision-makers about feasible solutions based on the insights gathered from the empathy map. This might include things like increasing the amount of resources and time your teams can allocate to meeting user expectations.

For example, the concerns about data privacy could mean your design and engineering teams start prioritizing privacy features and offering two-factor authentication for enhanced security. 

Design user-centric websites with Webflow

Empathy mapping is an excellent way to better understand how people interact with your website. To equip your design and development teams with the right tools to build user-centric websites, Webflow Enterprise offers a visual-first design platform. Map content, collaborate with teammates, and deliver aesthetic and functional sites — exactly how users want them.