Designing Pinterest’s inclusive skin tone ranges
Long Cheng and Yanis Markin, Search Product Design
Last year, Pinterest’s Design team designed a broad range of improvements to make our product more inclusive for people with various levels of vision. We also developed seven best practices to share with the design industry in the spirit of making our products more inclusive.
That was just our first step. We then took on a different challenge.
While beauty is one of Pinterest’s top categories, we heard from people that it’s not always easy to find ideas and products that fit their skin tone when searching for hair and makeup ideas. In 2018, nearly 60% of our top 100 search terms for skin-related searches involved a skin tone, such as “dark skin,” “pale skin” and “olive skin,” showing us people were looking for a way to customize their results.”
To make search experiences more inclusive, we designed a new way to surface beauty and makeup searches that best complement your skin with just a few taps. We’re sharing four lessons we’ve learned through this design process, in hopes that your design team can use these to help inform your own inclusive designs.
Design with data
Our inspiration for inclusive skin tone filters came from listening to people using Pinterest, both internal employees and from people via our Help Center and social media observations. This was supported by search data. Through this data — both from looking at the most popular searches and through qualitative interviews with people on Pinterest — we learned that many of our top searches weren’t as inclusive as they should be.
That’s why we wanted to build a search experience that’s inclusive of all skin tones. Our guiding question: How might we use data to design a feature so that people don’t have to type “for Asian women” or “for dark skin” at the end of searches?
Learn from experts
As much as we love designing with data and analysis, for this project we found it incredibly important to work closely with leaders who are solving diversity and inclusion problems in this space, day in and day out. Candice Morgan, Pinterest’s Head of Inclusion and Diversity, gave us a direct channel for communication and feedback on how to best design for people of color.
From her, the Search team learned that regardless of your skin tone, the ability to filter should be equally effortless for every person. We want to make sure that different complexions are equally represented. That’s why in each skin tone UI that you can choose from, we represent it by a range of skin tones that actually correspond to roughly 20 shades. The initial design came from two incredible interns passionate about inclusive search, and each circle featured a gradient of color from light to deep. However, we realize this is a sensitive topic so our research team brought in users, including our employees, to test the design. We learned the initial gradient design was hard to read and reinforced the idea of only four skin tones, which was not our intent. We updated the buttons to show four quadrants of color to eliminate this perception. At the end of the day, it’s all about perception, and this UI feels most equal and inclusive of different ranges of a skin tone.
Respect people’s privacy
We don’t want to predict your skin tone and get it wrong — or make assumptions about who you are and target you with ads. That’s why when designing this feature, we chose for a setting in searches that isn’t saved to your profile. We don’t save the information for later or predict what your skin tone will be in later searches or home feed recommendations. We also don’t record what skin tone range you picked because there might also be a chance where you’re looking for products for people besides yourself.
Most importantly: Make inclusive design a core value for your team
Inclusion should be the first step of every design process. Chances are, the people we design for have various abilities, speak different languages, come from a broad range of cultural backgrounds: in other words, it’s a given people definitely don’t all look the same.
To bring home the point that inclusivity is a core value for Pinterest Design, last year our team created an in-office installation to represent people who may use Pinterest every day with a range of abilities. Every designer had to pass by it on their way to our monthly design meeting space. Through this installations, which included navigating the app with a keyboard and with screen readers, our design team learned how difficult it can get for people with different levels of ability to use Pinterest.
Over time, we’ve also expanded our mindset in design critiques from simply “oh, how does this solve for our existing and new Pinners?” to “oh, how might someone with this ability, this language, this culture use this product?” We also have Slack channels dedicated to accessibility and inclusive design for Q&As and design feedback.
Inclusive design encompasses “designing for people across skin tones,” “designing for people with different abilities,” and in the future, hopefully even more. When a design team takes time to align on and prioritize this value, designing and building inclusive products will always be something the whole company cares about.
Acknowledgement: this product was designed and built by an incredible cross-functional team with the shared goal to make Pinterest more inclusive for everyone. Thank you to Emma Herold, Cindy Zhang, Xixia Wang, Yixue Li, Lulu Cheng, Candice Morgan, Larkin Brown, Junn Lee, Rahim Daya and Tonio Alucema.
