AirBrush Skin Tone
Overview
Role
UI/UX Design, Usability Testing, QA
Partners
PM, PO, Development team, QA, Effect designers, Growth team, Content design
Background
AirBrush’s Skin Tone feature was originally developed to help users even out their skin tone in photos and selfies, enhancing their natural look. However, the initial implementation of this feature only offered six free shades, all of which leaned towards the light to medium end of the spectrum. This meant that while users with fair skin had multiple free options to choose from, those with deeper skin tones had to resort to using the paid color picker to find a matching shade. The lack of inclusivity became a growing concern as negative user feedback highlighted this disparity.
My primary challenge in this project was in persuading my PM and leadership partners that incorporating a wider range of skin tones was not only essential from an ethical standpoint but also beneficial towards our user retention and conversion metrics.
Goals
Address and minimize the negative feedback associated with Skin Tone
Increase the photo download rate of edits utilizing Skin Tone
Problem
Pain point 1: Limited range of free shades
The 6 free shades only covered up to light/medium skin tones, while the color picker was locked behind a paywall. In comparison, the top 25 bestselling foundation brands sold by the online beauty retailer, Sephora, offer an average of 33 shades per brand — more than 5x the breadth compared to the shades available in AirBrush. This limited range was inherently unfair to users with darker complexions, as they were compelled to use the premium version of the feature to find a suitable match for their skin tone. These users faced a paywall that users with lighter skin tones did not, creating a disparity in user experience and satisfaction.
Pain point 2: Shades look unnatural on medium to dark toned users
Even for medium toned users, the shades appeared unnatural and clearly edited. Users with fairer skin often used the medium shades as a “tan” with acceptable results, while users with actual medium-toned skin found the same shades unrealistic. On users with darker skin, the medium tones caused the photos to appear unnaturally saturated and red-toned.
Why does this matter?
AirBrush’s primary target demographic includes young women in NA and LaTAM, regions with diverse populations. It’s important that our app, which aims to enhance users' beauty, is inclusive and makes all users feel represented and valued.
Other beauty apps have faced backlash for sensitive issues like whitewashing and body shaming, making it even more important to steer away from these pitfalls. Positioning AirBrush as a leader in inclusivity not only helps avoid negative publicity, but also strengthens our brand’s reputation and user satisfaction, leading to better long-term growth.
Stakeholder alignment
The most challenging aspect of this project was securing buy-in and resourcing from my product triad. To address this, I initially collaborated with the growth team to collect user feedback and data, highlighting that the lack of diverse skin tone options was a significant pain point for our users.
“This app is not inclusive for everyone. To access the darkest skin tones you have to pay, while the lighter skin tones are free.”
“I like this app but it has issues with colouring darker skin tones.”
“The skin tones don’t look natural on people with darker complexions.”
Due to differences in cultural and aesthetic preferences, the product team had not previously realized the lack of variety in skin tone shades could be a critical issue. An additional conflict was that adding too many free skin tones could impact our conversion rate for this feature, which hinged on users paying for the color picker.
I was able to convince my product partners by showing that:
The skin tone feature was not a significant source of conversions (<1%), but did appear in negative reviews frequently.
Similar inclusivity issues had led to negative backlash for competitors in the same industry.
Representation is crucial to our target demographic.
These arguments helped demonstrate that the goodwill and trust gained from users by improving the inclusivity would outweigh the potential loss in premium conversions. Despite competing high-priority projects, the product owner recognized the significance of the issue and was willing to explore solutions, leading to the next stage—design ideation.
Research and Ideation
Data revealed that the most frequently selected skin tone was #B87E59—our darkest shade—despite our primary user demographic being based in the U.S., where the majority of users are Caucasian. This suggested that many users were likely using the Skin Tone feature to achieve a tanned appearance rather than to match or even out their existing skin tone. To effectively redesign this feature, it was essential for me to first understand how users were currently interacting with it. This would allow me to integrate new elements into their existing mental models, while minimizing disruption to their established usage patterns.
Goals:
Understand how AirBrush users currently interact with the Skin Tone feature.
Identify the primary goals and intentions users have when using Skin Tone
Evaluate the necessity of the manual selection tool
Findings
Most users feel that the auto selection tool is convenient and fast, but many will still go in with the brush to manually adjust the selected area.
When editing a selfie: 7/15 users preferred to only use Auto, while the other 8/15 used either a combination of both, or only manual selection.
When editing a photo with multiple people: 10/15 users used the manual selection to only apply edits to themselves.
User goals when applying Skin Tone to their photos:
To correct skin tone as a whole (auto select)
To correct specific areas with uneven tone using manual selection (brush + eraser)
To apply a bronzing or tanning effect to certain areas using a shade darker than their actual skin tone (brush + eraser)
Ideation
Human skin tones are characterized by both overtones, which determine how light or dark the color is, and undertones, which give the tone another layer of depth through temperature. When conceptualizing this feature, I made sure to keep both of these dimensions central to my design approach. I started by exploring through low-fidelity sketches.
1. Dual sliders
Pros
Inclusive by default; the two sliders (Overtone + Undertone) would be used to adjust the user’s existing skin tone, so there would be no need to manually select shades to include
Simple UI with low learning curve
Cons
Unable to customize/manually select the effect area, making it difficult for users to edit only specific areas
Because the sliders adjust the user’s original skin tone, users would not be able to take a shade significantly darker than their own and apply it above their photo to use it as a tan
Difficult to monetize, because the premium color picker would be removed in this case
2. Horizontal undertone palettes
Pros
Having 3 separate palettes for each undertone allows for many more options, which can be kept free or monetized
Users are able to select colors freely, and effect doesn’t hinge upon existing skin tone
Cons
Unable to customize/manually select the effect area, making it difficult for users to edit only specific areas
UI would be significantly different from the current state, which could be difficult to adjust to
3. Vertical palette w/undertone toggle
Pros
Maintains the majority of the current UI — less development lift, and interface remains familiar to current users
Keeps the existing premium color picker feature
Cons
Screen would be more cluttered compared to options 1 & 2, and the undertone toggle would be a new pattern that users would need to learn how to use
Narrowing in
I presented each exploration with their pros and cons to the product manager and product owner, and ended with an impact/effort matrix to identify the solution that would make the most impact at a low effort.
We identified that continuing with the vertical palette toggle would be the simplest for our engineers, due to it having the fewest changes from the backend.
Ideal state flow
In the ideal state flow, users are able to switch between different undertone shades using the toggle button beneath the palette. The primary menu includes Auto, Brush, Brush Size, and Eraser so that users can choose to apply the skin tone automatically, or select an area manually. The premium color picker remains in its original location, where users can select custom colors that aren’t included in the free options.
Delivering MVP
Resource constraints and competing priorities made it difficult to secure immediate development commitment for my ideal state design. Instead, I focused on quick wins, and advocated for an MVP version of the redesign. I worked with the PM and PO to determine the scope of the MVP, which included the following changes:
Scope of MVP
Expand the Range of Free Skin Tones
Double the amount of free skin tones in order to increase the range of options from light to dark
Improve Tone Coverage
Adjust the existing tones and ensure that the range of free options covers warm, neutral, and cool tones.
Event Tracking for New Tones
To gauge the success of the new tones, implement event tracking points to monitor how often the new options were selected compared to the original ones, in addition to other data such as Enter UV and Save UV (unique visitors). This data would provide valuable insights into user preferences and inform future iterations of the feature.
Once the scope of the MVP was determined, I worked with the effects design team to ensure that the colors chosen would include all undertones, ensuring that the feature would be more inclusive.
Focusing on the most critical elements of the design updates for MVP allowed us to make meaningful progress despite resource limitations, at much quicker velocity. This also set the stage for future planned iterations, including implementation of the undertone palettes, and an added tutorial flow
Outcomes and Validation
Impact
Usage rate breakdown
From the event trackers in the feature, we learned that out of the 12 free shades, the 4 deepest shades took up 55% of all use cases. This helped the team validate that the redesign was something users needed, and that the MVP changes were a step in the right direction.
Impact on save rate
36% increase in Save UV of edits that utilized this feature. This meant that following the update, users were much more likely to apply and keep the edits they had created using this feature, leading to a decrease in drop-off rate.
Impact on conversion rate
No negative impacts to the conversion rate of this feature were noted.
This helped to confirm my hypothesis that users who previously couldn’t use the skin tone feature to their satisfaction would simply choose to exit the feature, rather than subscribing so they could access the color picker.
“I’m really pleased with the new skintone options. Finally, there’s a shade that matches my complexion perfectly!”
“The recent update has made a huge difference. The darker shades are a great addition and it feels much more inclusive now.”
“I love that AirBrush is listening to its users. The new skintone feature is fantastic and really inclusive.”
2 months after rolling out the MVP, we began to notice positive feedback and validation in our app ratings. We were also able to see improvements in the use and save rates of the feature from our event tracking points:
Reflections
Meitu, being a Chinese company, had traditionally catered to an East Asian demographic, where lighter skin tones are widely preferred and considered the beauty standard. Their best-performing editing app marketed towards Asian markets had only provided pale tones, reflecting this cultural gap. Despite the risks involved with potential impacts to conversion, I strongly felt that expanding the shades offered was essential to address the need for inclusivity from our user base. To persuade my product partners, I leveraged app usage and conversion data to build a strong case. Additionally, I reached out to the marketing team to gather feedback from users to further strengthen the business case for this initiative.
This project reinforced the importance of design-led initiatives to me. Out of the product triad, designers are in a unique position to advocate for user needs and drive change. By utilizing customer voice and data-driven insights, we can initiate meaningful changes and effectively persuade stakeholders to take bold, user-centered risks.