Chapter 4. Empathy and Inclusion – Designing for Emotion

Chapter 4. Empathy and Inclusion

Empathy—the ability to understand and share the feelings of another—is a practice all designers should cultivate. We designers often feel confident in our understanding of users because we invest time researching their behaviors and motivations. But despite our well-intentioned focus on users, there are times when we aren’t as empathetic as we’d hoped because we haven’t thought inclusively about who might use the things we’re designing, and under what circumstances.

Inclusive design is inherently tied to emotional design. When our design decisions leave large groups of people out of the loop, we create feelings of alienation and disempowerment. But when we design inclusively for all, we can create deeply positive experiences that resonate with people—all people—as we’ll see later in this chapter.

Inclusive design requires more than our good intentions. We need a commitment to the practice of empathy, and a framework to guide our work.

Frameworks for Designing Inclusively

Boyuan Gao and Jahan Mantin, co-founders of Project Inkblot, have created a framework that can help you build diverse perspectives into the creation process (http://bkaprt.com/dfe2/04-01/).

Their framework, called Design for Diversity or D4D for short, has a simple series of core questions that can easily be folded into your design process. Let’s walk through each one to see how they shift our perceptions.

Question 1: What’s the worst-case scenario, 
and on whom?

Designing for inclusion requires us to slow down a bit to think through the implications of our design decisions. Gather your design team, key partners, and stakeholders to have a discussion about the worst-case scenarios your work could lead to and who will bear the brunt of the impact.

You’ll need to understand these two concepts to make your discussion productive:

  1. Intention: What you and your team hope to achieve for your customers.
  2. Impact: How actual communities experience your product or interface.

Many of us only consider our intention and naively believe that the impact of our work will match our vision. Unfortunately, that’s not how things work. Let’s look at a real example that illustrates how easy it is for intent and impact to misalign, creating serious consequences.

Airbnb recognizes that, for their business model to work, they need hosts and guests to trust each other. One way they foster that trust is by letting each party see a detailed profile with a name, past reviews, ID verification, and a profile photo. Hosts see these profiles when a booking request is made and can choose to accept or reject.

Profile photos are a nice way to humanize that first interaction. Seeing a person’s face can help build empathy, or at least that was the intent. The impact, however, was very different.

Racial biases, conscious or not, slip into the guest vetting process when photos and names are included in profiles, and it results in Black guests being denied bookings at an alarmingly high rate. A study conducted by Benjamin Edelman, Michael Luca, and Dan Svirsky found that on Airbnb, “applications from guests with distinctively African American names are 16% less likely to be accepted relative to identical guests with distinctively White names.” (http://bkaprt.com/dfe2/04-02, PDF).

To their credit, Airbnb has made changes to their guest vetting process to reduce bias by hiding guest profile photos until after they’ve been accepted by the host. Airbnb leadership has also built teams who focus on addressing racial discrimination on their platform. We’ll learn more about how Airbnb is trying to address trust between hosts and guests in Chapter 6.

There are many good people with good intentions at Airbnb, yet this example reminds us of the complex problems we’re designing for today and how essential it is to pause and consider how our designs could be used to hurt people.

Always consider the worst-case scenarios in your work.

Question 2: How do the identities within your team influence and impact your design decisions?

The second question in Gao and Mantin’s framework helps us consider how the identities of the people on your team may inform or influence your perspectives as you design. As you might expect, teams with people who have diverse backgrounds and perspectives are advantageous when designing experiences that serve diverse audiences—something to keep in mind in your hiring process.

If your teammates feel safe sharing personal information, it’s helpful to have open conversations about the identities each team member brings to their work, to help you see the breadth of perspective and the gaps you may need to address. Gao and Mantin recommend we start that conversation with questions like these:

  • What race(s) and gender(s) do you identify as? What other ways do you identify that are important to you? (e.g. queer, Latinx, middle-class woman in her 30s, aunt, grew up in a military family, etc.)
  • How might these identities influence and/or inform how you design products or services?
  • What perspectives or lived experiences might be missing from your team?

Gaps in your team’s perspective will be clear after conversations like this. Once you’ve identified your team’s blind spots, consider ways to bring those perspectives into the light; perhaps by conducting user research with people whose perspectives aren’t represented on the team, or better yet, by hiring from more diverse candidate pools. Consult engineering leader Tessa Ann Taylor’s guide to building a diverse team to get started (http://bkaprt.com/dfe2/04-03/).

Question 3: Who might you be excluding?

One simple question can help you and your team consider inclusion each step of the way: “Who might we be excluding?” Asking this question in design reviews, meetings, and in those quiet moments of design flow will help you challenge assumptions and consider the impact of your design decisions on all people.

In their framework, Gao and Mantin help us look deeper at exclusion with a brainstorming tool they call “All people” statements. When we frame our assumptions by saying “All people can express themselves in their messages using emojis,” we can begin to expose flaws in our thinking and help us see who tends to be excluded from experiences like the one you’re designing. Is your “all people” statement true? Are there groups who don’t fit into that statement?

You and your team can start to poke holes in your statement to see the communities of people for whom your statement is false. When you see those flaws, you’ll understand where you need to go further to include those who have been left out of your design process.

Question 4: How will you engage the people you want to reach within your design process, equitably?

Gao and Mantin point out that when we engage communities who have been exploited and have historically had less decision-making power, it’s important to invite them into your process in a way that acknowledges you are thinking about how they can benefit.

That benefit can take many forms: financial compensation, a byline, a role on an advisory board, decision-making power, etc. Your goal should be to create an equitable partnership.

Start by asking what a win for them would be and carefully listen to the response. Here’s the example Gao and Mantin recommend:

If you’re open to sharing, I’d like to learn more about you and your interests and invite you to be a leader on this project. Would you be interested in this, and conversely, do you have any concerns? What would make participating in this project a win for you? (http://bkaprt.com/dfe2/04-01/)

Your team must work with broad segments of your audience to ensure you’re designing inclusively, keeping in mind not just your target audience but also a group Gao and Martin refer to as the “Impact Source.” They are people who you may not intentionally be targeting, but who might interact with or be affected by the things you’re creating.

The questions from this framework will help to bring these groups more clearly to the surface, and prompt honest conversations that can help us more carefully consider the gaps between our intentions and the impact of our work.

And theirs is not the only framework for inclusive design. Microsoft has created their own toolkit (Fig 4.1) of inclusive design thinking activities, along with an inclusive design primer filled with useful guidance (http://bkaprt.com/dfe2/04-04/).

Maybe you already use some of these tactics, and that’s great. The wonderful thing about frameworks is they’re meant as starting points, not as dictates. Your designs will end up resonating with more people once they’re able to respond to the questions the frameworks pose.

Now, let’s add another tool to your toolbox to help cultivate empathy for your users and allow you to see the world from their perspective.

Fig 4.1: Microsoft’s inclusive design tools provide insightful activities and principles to help broaden perspectives.

Empathy Maps

In their book, Gamestorming, authors Dave Gray, Sunni Brown, and James Macanufo introduced a simple and effective way to put yourself in your customer’s shoes with a tool called empathy maps (Fig 4.2).

Fig 4.2: Creating an empathy map can help your team think and feel from your customers’ perspective and help you understand how to design for more complicated emotional experiences.

Creating an empathy map is not a rigorous, research-intensive process like user personas, which we touched on in Chapter 3, but it will help you and your team begin to think carefully about the people who will use the things you’re creating.

To create an empathy map, spend some time talking to your customers to learn what’s swirling in their minds. This doesn’t need to turn into a major project. A few phone calls with customers will give you plenty to work with.

With a bit of user research on hand, you can gather your team to create an empathy map. Draw a face in the center of a large sheet of paper. Label areas around the head: “think and feel,” “see,” “hear,” and “say and do.” Draw a horizontal line at the bottom and create “pain” and “gain” labels.

Ask your team to describe the following from the point of view of your customer:

  • Hearing: What are they hearing from friends, colleagues, and influencers?
  • Seeing: What are they seeing in the market or their environment? What are they seeing their friends do?
  • Saying and Doing: What is this customer saying and doing? What behaviors are they exhibiting that may help us understand their motivations?
  • Thinking and Feeling: What really matters to this person? What are their worries and aspirations?

Finally, at the bottom, work with your team to identify:

  • Pains: What current pain points does your customer currently feel—fears, frustrations, and obstacles?
  • Gains: What does this customer want to achieve or gain? What are their measures of success?

Empathy maps push us to consider a user’s environment, inputs they’re receiving from their community, and emotions (positive and negative) they may experience when using the things we design. In concert with an inclusivity framework like the ones we explored earlier, it’s a great tool for cultivating a regular practice of empathy in design.

Now that we know how to modify our process to design more inclusively, let’s see how inclusivity has been applied to help underrepresented groups feel a sense of belonging.

Belonging

As the father of two Black boys I’m acutely aware that pop culture imagery is rarely inclusive, especially in the United States. The protagonists in movies, books, advertising, magazines, websites, and software are White more often than not. If you’re a person of color, a lifetime of rarely seeing your reflection in pop culture creates a damaging narrative: you’re on the outside.

There are myriad devices we can use to create emotional engagement, but none is as fundamental and powerful as inclusive thinking. Remembering to ask, “Who are we leaving out? Who is not represented in our photography, icons, illustrations, and videos?” can help you snap out of your narrow perspective of your life experience to see the experiences of others. When we are inclusive in our representations of people, we promote a sense of belonging that resonates deeply.

Slack thinks about these sorts of things. When they launched a new way for developers to connect to Slack with a simple “add to Slack” button, Diógenes Brito was the designer tasked to create the marketing images. Under a time crunch, Brito grabbed an existing hand illustration created by a colleague and combined it with the new “add to Slack” button.

He made one key tweak: He changed the skin color of the hand to a shade of brown similar to his skin (Fig 4.3).

Fig 4.3: The brown hand in the “add to Slack” marketing campaign created a strong sense of belonging with people of color who have otherwise grown accustomed to seeing White as default.

Though it was a small design change, a debate raged in Brito’s mind as he considered it. He wondered if it was worth the hassle, especially since he had to ask a White colleague who created the source file to make the change for him. He didn’t want his request to seem like “a thing.” But it kind of was a thing, the right thing, and he as the designer had the power to make the decision.

So they changed it, they launched, and it resonated; people of color felt a rare moment of inclusion.

Afterwards Brito wrote:

Why was the choice an important one, and why did it matter to the people of color who saw it? The simple answer is that they rarely see something like that. These people saw the image and immediately noticed how unusual it was. They were appreciative of being represented in a world where American media has the bad habit of portraying White people as the default, and everyone else as deviations from the norm. (http://bkaprt.com/dfe2/04-05/)

Decisions like Brito’s have even more impact when they’re made as part of an identity system that’s used as the foundation for all design work in a company. Jennifer Hom, experience design manager of product illustration at Airbnb, had the unique opportunity to rethink the illustration system used in their products and marketing.

She recognized it was an opportunity to make their design practice more inclusive while also aligning to Airbnb’s company mission (http://bkaprt.com/dfe2/04-06/):

Our mission is to connect people across cultures and continents, so our illustrations have to reflect the community we’re bringing together. We can’t generalize or curate based on what’s considered most ‘commercially acceptable.’ Instead, we need to be radically honest. Humans are humans, so we don’t try to design our way around the simple fact that we’re all different.
Western-centric, outlined cartoon people need to change. Diversity of age, race, disability, religion, orientation, and gender are the foundation of who we are. We need to reflect belonging anywhere, and my role was a clear opportunity to celebrate diverse identities.

Hom considers varying body types, genders, disabilities, ages, and multi-racial families, and she depicts interactions between all peoples. She’s made it easy for any designer at Airbnb to be inclusive simply by working with the building blocks and principles she’s outlined.

Earlier in this chapter, we learned how, despite their good intentions, Airbnb’s vetting process resulted in discrimination against their Black customers. Hom’s work on the Airbnb illustration system is just one example of the investment the company is making to design inclusive experiences. They don’t always get it right, but we know that pushing biases out of the shadows into clear view puts us on the right path of thinking and designing more inclusively.

By using design to make our customers feel seen, we create deep emotional engagement. When people feel a sense of belonging, they’ll give you repeat business and they’ll tell others. Designing for inclusion is the right thing to do, and it’s also good for business.

With a new understanding of how to cultivate empathy for our users and how we can design more inclusively, let’s now consider the timing of emotional design and some principles that will help us design memorable experiences.

Fig 4.4: Jennifer Hom led the redesign of Airbnb’s illustrations system and made diversity the new normal in their design work.