Designing with Compassion

Keeping people at the heart of product development

Metro
Metro
Sep 25, 2019 · 9 min read

By Davina Baum and Jessica Metro

As content strategists, researchers and product designers at Facebook, we aim to create experiences that are clear, consistent and compassionate through both the language and the design. Everything from the tone we use to the controls we provide helps to make products across Facebook that are more thoughtful, more human and better for the people using them.

Building for People First

A Case Study

Stage 1: Understand

People problems and opportunities surfaced during a team sprint

Let’s take a step back here, because in many cases, and on our team in particular, “people problems” are serious, real-world problems. A people problem might be, “I want to stop someone I’ve just met online from sending me inappropriate images on Messenger.” These scenarios, reframed as people problems, allow us to abstract and generalize the problem so that it’s solvable — but individuals can’t be abstracted and generalized. So we never lose sight of the people who are facing these problems in the real world — where safety and reputation may be at risk.

As a result of our work to understand the problems, we decided that building additional tools to help address harassment over Messenger was the biggest opportunity. Specifically, we heard that the concept of blocking someone on Messenger or Facebook felt extreme for repetitive badgering or for those who knew the harasser in person. While the block feature did not explicitly declare to the person that they’d been blocked, there were indicators that a savvy user might be able to figure out. Even for the person doing the blocking, the action might feel rude. And in cases of harassment, blocking someone on Facebook can prevent you from being able to report them, because they’re hidden from you.

Stage 2: Design

Spectrum of harassment-mitigation tools

In broad strokes, we outlined the user experience: The person being hidden could continue to send messages without knowing that their messages were going unseen, and the person hiding the conversation could proceed without being aware of annoying or harassing messages. If the recipient needed to seek out the conversation, they could find it easily and unhide it if necessary. They could also block someone they had hidden.

We had extensive conversations about product functionality, from the very specific to the very broad. We discussed questions like:

  • Where would people expect to find the option to hide a conversation?
  • How do we communicate what will happen without overwhelming someone?
  • Where should the balance be between feeling lightweight versus robust and satisfying?
  • What exactly does the person who’s being ignored see?
  • What is the visual affordance to indicate the feature is on or off?
  • Where do we surface the ability to escalate to a block?
  • How will this work across Android, iOS, mobile web, desktop web and all the other platforms we support?
Whiteboard wireframes mapping out the flow

While answering these questions, we sketched out design solutions, starting wide and narrowing to what might have the greatest impact. We created mid-fidelity mocks to get a better sense of how the top solution would fit in the existing product, explored content options in context and visualized the design details. We talked a lot amongst ourselves and with our content and design colleagues to get feedback and ensure that we were thinking deeply from the perspective of people experiencing these problems. To flesh out the interaction design and make our ideas feel like a real product, we eventually created high-fidelity prototypes.

High-fidelity interface explorations

Stage 3: Gather Feedback

Early prototypes used for feedback in research

In doing this research, we wanted to understand both the perspective of someone who’s being harassed or bothered on Messenger, and that of a person who’s repeatedly trying to contact someone. People in our focus groups talked about seeing Facebook as a way to connect with anyone in the world; there’s a real curiosity and interest in meeting new people online. Both men and women said that they accept any and all friend requests, no matter how remote the connection. We also heard from women who told us how easily and often the line can be crossed from friendly hellos to unwanted contact and harassment. We got a strong sense of the pervasive ways that harassment plays out in the real world, in all sorts of interactions.

We spoke to participants who said they had experienced a lot of harassment on Facebook, so we knew we’d hear difficult stories. But we also heard strength and courage — as well as a deep familiarity with the tools at hand. Men and women understood the functionality to block both a message as well as a person on Facebook, and they had no issues with blocking someone who was bothering them. “I just blocked him” was a refrain we heard over and over. But we also confirmed that in certain situations, there’s a need to stop hearing from someone who’s sending harassing messages without explicitly blocking them because it could cause serious real-world implications.

Unwanted and harassing messages have no place on our platform.

This is where the work becomes really, really hard. Harassment affects millions of people every day — well beyond Messenger. We know that a button on Messenger will not take away the memory of a harassment experience, and it won’t mean that something upsetting won’t happen again. Unwanted and harassing messages have no place on our platform. To help combat this behavior, we work to adjust and augment the tools that someone might be using.

In the early stages of this project, we had been referring to the functionality as “hide.” We learned on this research trip that people were already familiar with the capability to hide a comment on Facebook, which didn’t align with the idea of hiding an entire conversation with someone on Messenger. So, after much discussion and exploration of options, we shifted our language to “ignore.”

Stage 4: Build

Final prototype for the feature to ignore messages

A Learner’s Mindset

Facebook Design

Designing for the global diversity of human needs.