Pinterest · Hair Pattern Filters
- RoleRole
- Product Designer
- FocusFocus
- UI & Education
- YearYear
- 2021
- CompanyCompany
Pinterest needed new audiences to grow, but many new users couldn't see themselves in the content. The Inclusive Product team formed to close that gap.
Context
Pinterest, like most social media apps, saw a boom in growth during the COVID-19 pandemic, gaining nearly 100M new users. However, even with the surge in sign-ups, MAUs began to stall. The Growth team kicked off research to identify potential causes of this decrease in retention and provide solutions to correct the trend.
User Metrics and Messages
Reviewing search success metrics and user feedback helped identify a broader trend that was affecting the growth trajectory of the app. Pinterest first gained popularity among Midwestern white women, and as the platform grew, the content engine optimized around them. The research highlighted that an unrecognized side effect of an algorithm trained on engagement from these initial users was a lack of diversity in content surfaced in search results. New users were signing up to find beauty and hair inspiration for themselves, but the engagement signals were unintentionally excluding the users Pinterest needed to grow.
Users had built their own workaround. "Wedding hair" became "black girl wedding hair." "Hairstyle ideas" became "natural hair styles for 4c." Every search needed an extra phrase. A qualifier the product made certain users add that everyone else never had to consider.
Hair Pattern Filters in Search
Pinterest formed the Inclusive Product team to build an experience where everyone can see themselves. I joined as a Product Designer during the research phase on inclusivity in hair content (one of Pinterest's top content categories) to design the in-app experience allowing users to access the new content control capabilities.
We shipped the first iteration of the filters in search. Users could choose from six categories, defined with insight from the Machine Learning team and outside hair pattern experts.
The focus of the initial implementation was to provide utility for the expanding demographic of Pinners without adding friction to the search experience. The filters would only be displayed on relevant searches, directly addressing the behavior of users appending qualifiers to their search terms. Illustrations would serve as the main visual elements with category labels for an accessible but non-intrusive experience.
Problem
Two weeks after the rollout to internal testers and a small group of users, the test data was telling us something we didn't expect. Users in the test groups were running fewer hair-related searches and getting fewer successful results than the control group. The data signaled that, as implemented, hair pattern filters were not fully addressing the needs of our users.
The original research signal had been strong, so the test results made it clear the implementation, not the idea, had flaws. Something about the filter experience was getting in the way of users actually using it. We again worked with the Research team to investigate. Using in-app surveys and interviews with internal dogfooders of the feature, we identified two potential issues preventing the filters from effectively improving hair content searches.
Finding an Audience
The filter's initial launch was limited to search results on Pinterest, the place where we saw users frequently adding qualifiers to diversify content. Though this surface was the most identifiable, it did not mean this was the only place users experienced the issue or the way that the majority of users discovered content.
Many Pinterest users rarely used search, often entering the platform through shared content or exploring Pins served to them in their home feed. Exploration for these users relied on similar Pins suggested to them when viewing content related to what they were looking for, but potentially not exactly what they wanted.
Filter access was limited.
Teaching New Behavior
We spent weeks defining the six categories we thought users would want to filter by. We didn't spend nearly as much time making sure those labels would be understandable and useful to the people who needed them. Many users were not familiar with different hair patterns, didn't know how to use the filters, or never thought to engage with them at all.
The filters rolled out with a tooltip that was shown by default the first time a user saw the filters, but this left a small tooltip to do the work of explaining hair patterns, how to use the feature, and why it mattered to the user. With only a small pop-up serving as the announcement, we failed to successfully communicate and promote the feature.
Both issues came down to the same problem. The filter asked users to do work on their end, whether that meant learning new terms or changing their discovery flow, before it delivered any value. By the time someone got frustrated enough with irrelevant results to go looking for a filter, the session was usually already over.
Search was not the only place users experienced the issue or the way that the majority of users discovered content.
With only a small pop-up serving as the announcement, we failed to successfully communicate and promote the feature.
Filters required users to do work, including learning new terms or changing their discovery flow, before it delivered any value.
Solution
With the two clear findings from testing, I set out to build upon the initial filter experience to ensure Pinners were able to maximize the feature's utility without impeding the existing search experience.
Both concerns stemmed from the same root: users didn't know the filters existed, what they did, or why they mattered to them. To address the underlying issue, we planned a two-phase approach. The first would be a more direct focus on driving awareness and education for the filters targeted at users viewing hair content. The second would expand the reach of the filters to better serve users discovering content outside of search results.
Introducing and Educating
The first launch of filters relied on Pinners noticing a tooltip that only appeared once in search or being inquisitive enough to try a new addition to search. Users had to comprehend the categories or deduce them from the illustrations to make full use of the feature. To address the awareness and comprehension concerns, we set out to introduce a more thorough educational experience that also served as a more apparent feature announcement to users.
As the lead designer for the educational experience, I leaned heavily on the research used to define the hair patterns. The first version centered around the six hair pattern filter options, but didn't surface any of the information collected along the way to bring us to these categories. My first step was determining how to translate the team's research into clear explainers for users.
I worked with our copywriters to finalize the copy, starting with an introduction to the feature and including short explanations for each of the six categories. The goal was to keep each explanation broad and descriptive to resonate with anyone seeking results that may fall within the category.
Design Exploration
After finalizing the copy, I wanted to ensure I presented it in a minimally disruptive format that felt organic to Pinterest. Not every user would be interested or gain value from learning about the filters, and any feeling of additional friction could lead to a worse experience for searchers. It needed to feel native to the content users were viewing and relevant to anyone who saw it.
Version 1
My initial concept for the educational component focused on introducing the feature while laying out the descriptions we created for each of the filter options. The popover would replace the original tooltip, acting as a true feature announcement with the option to navigate through tabs or select specific categories for those who felt it might be relevant for their use cases.
Graphic Exploration
The original version paired the pattern definitions with a promotional rollout video. Once I prototyped it, the automated popover combined with the autoplaying video was overwhelming. Pinterest is mostly imagery, so the visual half needed to complement the descriptions, not compete with them. It had to work as both a draw and a quick explainer for users scanning the component.
Version 2
In the second iteration of the component, I removed the video and instead focused on highlighting the diversity of content that users could discover with the filters in the first frame of the carousel. The previous video slot was replaced with images starting with a broad set of hair pattern imagery available on Pinterest and examples of images from each category to complement the descriptions.
Layout Explorations
The next pass focused on finalizing the layout so users could quickly navigate to the sections relevant to them, see the connection between the hair patterns and the illustrations, and read the descriptions with the visuals as a complement.
Finalized Design
Ultimately, we decided on a straightforward approach to the visual elements, keeping a consistent layout and including a diverse set of imagery in the highlighted category. Users could either explore the component in a straightforward path for those looking to learn about each of the hair pattern options, or directly access the category that interests them by clicking a tab from the navigation bar.
Mobile Components
After finalizing the desktop, I shifted focus to creating a similar experience for users across iOS, Android, and mWeb. I previously explored the concept of a scrollable desktop component but discarded it as the experience felt tedious in a browser and navigating with a mouse. On mobile, however, scrolling is a lightweight and natural action and the previous explorations fit the user behavior perfectly with adjustments for format. I refactored the desktop exploration to suit mobile constraints, removing the border between the text and imagery to create a new cohesive layout.
Expanding Our Reach with New Surfaces
Search wasn't the only place users explored content. Related Pins were attached to every Pin and the home feed surfaced suggestions continuously. To reach users outside the search flow, I looked for other surfaces where the filters could appear.
Filters in Suggested Pins
Related Pins was one of the clear candidates for integration with the search filters. In many cases, users accessed the app from a shared Pin, or found content tangentially relevant to their desired content. Including the filters in Related Pins would allow users to continue discovery without navigating away from content or resetting their flow by starting a new search.
Quick Filter in Search Suggestions
Type-ahead was another clear candidate for surfacing the filters. Including filters as an add-on to users' initial search further reduced friction, cutting out an additional click and content loading after experiencing results that felt disappointing. The type-ahead suggestions would also serve as an opportunity for users to discover the feature without disruption to the search flow. Search suggestions already worked to capture user intent when surfacing results, making it a relatively light task to integrate filters when intent showed users were seeking hair-related content.
The filters didn't need to be everywhere. They needed to meet users at the point of frustration.
Outcome
After launch and our iterations, Hair Pattern Filters went on to be a huge success for the Growth team and validated the Inclusive Product initiative's approach.
The feature also received praise across the industry with several articles and media mentions recognizing it as an example of how to properly introduce inclusive features:
- Nielsen Norman Group cited the filters as an example of inclusive design done well.
- The Verge covered the launch as part of broader inclusive-design reporting.
- Beauty outlets such as Allure, Refinery29, and Stylist promoted hair filters to their audiences.
Lasting Impact
Soon after the full rollout of Hair Pattern Filters in 2021, I moved to a new team knowing the design work was documented for future content diversification features. As of 2026 the filters and educational component remain active features and relatively unaltered.
Continuing Inclusivity
More exciting than the durability of the Hair Pattern feature are the newer features the team has shipped to make Pinterest more useful for broader audiences. In 2024 they announced filters for body type using a similar model, proving the foundation and iterations created a lasting template for inclusive product launches.
Reflections
Inclusivity Drives Growth
Inclusive design is often treated as a nice-to-have value statement for companies, when in fact it should be considered a product quality problem. Users who needed a Hair Pattern Filter had always been on Pinterest. The product just wasn't returning results that reflected them.
Product Marketing Is Non-Negotiable
Without proper distribution and in-app marketing, the filters presented no immediate value. A filter that technically exists but never gets used doesn't help anyone. The gap between "we built it" and "people use it" is a product problem. Hair Pattern Filters ultimately worked because they met users where they already were, and the payoff was immediate.
What's Next
I'd like to think other companies have learned from Pinterest's success factoring inclusivity into product decisions. As user attention becomes more precious with increased competition and new forms of media, quickly showing value and creating affinity with users will only become more important moving forward.
Age Range
With an aging core audience and more Gen Alpha users onboarding, age filters could provide content diversification that better fits the current user base.
Skin Type
Similar to hair patterns, makeup and skincare product content suggestions would be better targeted with the introduction of filters alongside educational material.
Auto-Diversification
Pulling insights from signals like topic selection, search history, and content engagement to expand content diversification automatically, particularly for users less likely to engage with more advanced features.