Adobe Photoshop Express · Mobile · April 2024
A mobile hair color try-on feature built for 12M+ monthly users — from Gen Z to professional stylists. Every hair type. Every skin tone. Every color on the spectrum.
❤️
Loved by
the community
Role
LEAD CONTENT UX DESIGNER
Team
1 PM . 1 ENGINEER . 2 DEVELOPERS
Timeline
APRIL 2024 . PHASE 1
Scope
RESEARCH → COLOR SYSTEM → UI → QA
1.2%
10%
01 — PRODUCT CONTEXT
Photoshop Express is Adobe's mobile-first product for Social Natives — 13–24 year olds who want to express themselves creatively and stand out on social media. With 12M MAU and 350M+ downloads, it's the entry point to the entire Adobe ecosystem.
The product is designed to be fast, intuitive, and creatively empowering — bringing the magic of Photoshop into a simplified, mobile-friendly experience. Within this, the beauty and retouch category plays a key role, as it consistently drives high engagement and repeat usage.
At the same time, Photoshop Express operates in a competitive landscape alongside apps like PicsArt, VSCO, and Facetune — platforms widely perceived as easy, fun, and socially driven. In contrast, Adobe products are often seen as powerful but complex.
Hair Color became an opportunity to bridge this gap — introducing a feature that is intuitive, engaging, and expressive, while still delivering the visual quality expected from Adobe.
WHO USES THIS FEATURE
Beauty enthusiasts experimenting with looks
Gen Z users expressing identity on social
Professional stylists previewing looks for clients
Anyone curious about a color before committing
FEATURE OBJECTIVE
Realistic virtual hair color try-on that preserves texture, light, shadow and shine — By utilizing advanced technology to detect hair and create precise masks, users can experiment with a wide range of hair colors effortlessly. The feature is equipped with proprietary algorithms for natural hair color identification, ensuring realistic results and inclusivity across all hair types.
12M
Monthly Active Users
38%
Users under 24 (iOS US)
73%
Better Day1 retention via social
4.7★
App Store Rating
02 — USER RESEARCH
Research grounded in L'Oréal studies, Mintel market data, BSCL 2022 creator segmentation surveys, and brand blind interviews with 18–24 year olds.
13–24 yr old Social Native
Age 17 · Student & YouTube Creator · San Diego · Primary Target Persona
💜 MOTIVATIONS
😫 PAIN POINTS
🦋 WHAT PSX SOLVED
Express herself authentically on social
Adobe feels "difficult and technical"
All intents in one mobile app
Content creation on-the-go
No realistic dark hair color tools
Hair color with realistic results
Access trending aesthetics
Results look artificial or flat
Inclusive for dark hair too
Creative freedom to experiment
Too many steps, wants fun + fast
Share-ready output in seconds
75% color to cover gray
L'Oréal study: natural realistic shades are the priority — not just vibrant/fantasy colors. Browns and blacks must be photorealistic.
65% of PicsArt users are <24
Gen Z perceives PicsArt as "fun, casual, easy." PSX needed a beauty feature that matched this energy while maintaining Photoshop quality.
Users think in names, not hex codes
"I want auburn" — not "#A64B0A." This shaped how we named, grouped, and ordered presets in the UI.
Dark hair is globally the majority
The majority of global users have dark brown or black hair. No mobile app had elegantly solved this — a massive inclusivity and market gap.
Social sharing = the real success
Users share hair try-ons with friends and stylists. Export and share rate became our primary success metric, not just in-app engagement.
Social-acquired users: 73% better D1
Users arriving via Instagram/TikTok/FB have far higher day-1 retention. Hair color creates shareable content = viral growth loop.
03 — COMPETITIVE ANALYSIS
Competitive audit of the top 4 mobile photo editing apps with hair color features.
This defined our differentiation strategy.
YouCam
Beauty-focused AR
FaceApp
AI transformations
PicsArt
Gen Z creative tool
Photoshop Express
Adobe's mobile consumer app
✅ Works on light hair
⚠️ Partial dark hair support
✅ Fun, casual UX
✅ Works on ALL hair types
❌ Fails on dark hair
❌ Artificial resuts
⚠️ Basic color change
✅ Natural Hair reference points
❌ Limited natural colors
❌ Poor color taxonomy
❌ Not photorealistic
✅ 60+ curated presets
❌ No manual refinement
❌ No brush refinement
⚠️ Some dark hair support
✅ Brush refinement mode
⚠️ Moderate realism
❌ Limited palette range
✅ Strong Gen Z brand
✅ Color + Refine dual mode
04 — COLOR SYSTEM DESIGN
80+ colors sourced from global beauty brands, social trends, and market research —
then curated and organized into a taxonomy that mirrors how users actually think
about hair color.
FULL COLOR SPECTRUM — BLACKS TO PASTELS (HOVER TO EXPLORE)
NEUTRAL TONES — SHOWN FIRST
Shown first because most users globally have dark or medium hair and want natural, realistic results. These are the most-used colors in real life.
VIVID COLORS — SHOWN AFTER
Placed second — users typically explore natural shades first, then venture into bold territory once they're comfortable with the feature.
Blacks & Browns
16 presets · most-used globally
Violets
14 presets
Blondes
11 presets · light + dark sub-tiers
Vibrant Shades
15 presets · darkened for dark hair
Reds
11 presets · auburn to deep red
Pastel Colors
13 presets · requires base layer
FULL COLOR SPECTRUM — BLACKS TO PASTELS
USER COLOR PREFERENCES DATA
SCROLL TO SEE SCREENS
06 - REFINE SIZE
07 - REFINE MASK
07 - REFINE ERASE
05 — UI & USER FLOW
The hair color feature is surfaced inside the Hair tab in PSX's Retouch workflow.
Two core modes: Color (preset/color selection) and Refine (brush mask editing).
The flow was designed for one-hand mobile use and usable in under a minute.
SCROLL TO SEE SCREENS
01 - ENTRY
03 - BROWSE
03 - APPLY
04 - OPACITY HIGH
05 - OPACITY LOW
06 - REFINE SIZE
07 - REFINE MASK
07 - REFINE ERASE
08 - BEFORE-AFTER
09 - PHOTO DOWNLOAD
08 - EXPORT
Hair tab opens
Category picker:
Favorites · Browns
Blacks · Blondes
Browns selected
Preset row:
BR1 · BR2 · BR3...
Hair texture swatches
Pastel PA2 applied
AI mask: instant
color application
across all hair
Opacity: 60
Slider mid-point
Color balanced —
vivid but realistic
Opacity: 28
Slider dragged left
Color subtle —
natural tint effect
Half tab opens
Category picker:
Favorites · Browns
Blacks · Blondes
Refine: Size brush
Size: 72 shown
Brush adds color
to missed areas
Refine: Eraser
Removes color
from skin / edges
Undo/Redo active
Before
Shows befor
and after
Undo/Redo active
and after
Photo Saved
to gallery
Pop up appears
Undo/Redo active
Undo/Redo active
Save & Share
1737×3088px
Quality: Very High
Watermark options
UI ANATOMY — COLOR TAB VS REFINE TAB
COLOR TAB
Preset discovery + application
REFINE TAB
Manual mask brush editing
OPACITY SLIDER
User adjusts strength of color application · default ~75%, Lets users control color strength from 0–100.
OPACITY SLIDER — persists
Same slider carries over from Color mode. User can continue adjusting intensity while in Refine without switching back. Contextual continuity.
CATEGORY ROW
Horizontal scroll: Blondes · Violets · Reds · Vibrant · Pastels
Category name highlighted in blue when selected.
SIZE BRUSH — adds color
Circle cursor with crosshair. Paints color onto areas the AI mask missed. Explored blur on brush edges for natural feathering.
PRESET THUMBNAILS
Hair texture swatches · tap to apply instantly via AI mask · Heart icon to save to Favorites. Selected preset highlighted in blue.
ERASER BRUSH — removes color
Removes color from skin, background, or over-applied areas. Active state highlighted in blue. Same size control as Size brush.
RESET (NONE) + FAVORITES
No-color circle resets to original. Heart-only category saves liked presets for quick access across sessions.
UNDO / REDO
Removes color from skin, background, or over-applied areas. Active state highlighted in blue. Same size control as Size brush.
05b — UX DECISIONS
Beyond the color system, several UX decisions directly shaped how the feature feels to use.
These were either my proposals, cross-feature adaptations I brought in, or
explorations I led during the design process.
MY ADDITION
Opacity slider
The opacity slider existed in other PSX features but hadn't been applied to hair color. I introduced it here because hair color is inherently personal and subjective — what looks "right" varies enormously by person, photo, and use case. A slider gives users the control to dial in their own version of realistic, whether that's a subtle tint at opacity 20 or a full vivid transformation at 85.
The live tooltip ("Opacity: 28") showing the current value while dragging was also a deliberate UX choice — giving users a quantitative reference point so they can reproduce or share their settings.
Opacity 0
Opacity 28
Opacity 56
Opacity 85
EXPLORED BY ME
Brush blur / feathering
I explored adding a blur or soft feathering to the brush edge in Refine mode. The problem it was trying to solve: when users paint color onto hair edges, a hard brush creates visible, unnatural boundaries. A blurred brush edge blends into the existing hair more organically.
The exploration looked at how the feathering interacted with the existing AI mask boundary — too much blur would bleed color onto skin, too little made manual edits look patchy. The balance had to work at multiple brush sizes.
Hard edge
Visible boundary
looks artificial
Soft/blurred edge
Natural fade into
hair boundary
DESIGN SYSTEM DECISION
Min/max opacity per category
Not all color categories work at full 0–100 opacity range. Blacks and browns applied at very high opacity look painted-on and fake. Pastels applied at very low opacity become invisible. I defined category-specific opacity bounds — ensuring users stay in the "realistic" range by default while still having creative freedom.
Browns 60–80%
Violets 70–90%
Pastels 75–90%
Vibrant 75–90%
FAVOURITES + SAVE & SHARE
Favorites + Save & Share flow
Two decisions that directly tied to product metrics. The Favorites category lets users save presets they like — creating a personalised preset shelf and increasing return usage (a key PSX retention lever). The Save & Share screen exports at full 1737×3088px resolution with Quality: Very High by default — ensuring the result is actually usable for sharing on social, not just a downscaled preview. Both connected directly to the export rate and repeat engagement goals.
SAVE & SHARE SCREEN
1737 × 3088 px
Quality: Very High
None · Watermark · Photoshop Express logo options. Social scheduling integration via Adobe Express also surfaced at this point.
06 — KEY DESIGN CHALLENGES
Beyond the color system, several UX decisions directly shaped how the feature feels to use.
These were either my proposals, cross-feature adaptations I brought in, or
explorations I led during the design process.
PROBLEM
Blonde colors fail on dark hair
Color blend mode on dark hair produces grey, lifeless results. This excluded the majority of global users from the blonde category entirely.
ORIGINAL
COLOR BLEND (WRONG)
SOLUTION
Technique 3/4
Developed a multi-layer technique replicating real-world bleaching.
ORIGINAL
ORIGINAL
PROBLEM
Vibrant colors appear muddy on dark hair
Colors like Neon PInk look completely wrong when blended over dark hair — shifting toward a dark, unrecognizable tone that destroys the intended vibrance.
INTENDED
ACTUAL
SOLUTION
Dual hex mapping for dark hair
Each vibrant color has a pre-darkened dark-hair variant — when blended on dark hair, it produces the correct perceived color.
PROBLEM
Same preset looks different across hair types
A brown at 70% opacity is invisible on jet black, overpowering on platinum. Every preset needed individual calibration per NH reference point.
LIGHT ON LIGHT
LIGHT ON DARK
SOLUTION
11-segment adjustment system (S1–S11)
Each of 60+ presets has 11 sets of unique settings — one per NH segment. 4 parameters calibrated per hair type per color.
PROBLEM
80+ presets created decision fatigue
Many browns and blondes were visually near-identical when applied — overwhelming choice without meaningful differentiation.
faded = deleted
SOLUTION
Systematic visual culling
Applied every preset to 3 base hair types side-by-side. Removed any preset where perceived difference was negligible.
BROWNS
16 → 9
BLONDES
23 → 11
07 — ITERATION PROCESS
STEP 01
COLOR SOURCING
RESEARCH
Sourced from L'Oréal, Wella, Schwarzkopf, social media, and beauty blogs. 80+ initial hex values across 7 categories. Cross-referenced against global market data (Mintel)
L'Oréal Survey
Mintel data
Instagram trends
Brand color refs
STEP 02
NH MAPPING
DEFINE
Mapped 15 Natural Hair Color reference points (NH1–NH15) from jet black to platinum. Defined HSL and RGB values per point to enable AI hair detection and per-preset calibration.
Natural haircolor mapping
HSL values
RGB references
80+ initial colors
STEP 03
BLEND MODE TESTING
DESIGN
Tested each preset across 3 base hair types. Documented 4 component settings for all 11 NH segments. Explored 4 techniques for blonde-on-dark-hair problem.
S1–S11 tables
4 blend techniques
Gamma tuning
Cross-hair-type testing
STEP 04
PRESET CULLING
REFINE
Side-by-side comparison on 3 hair types. Removed 19 near-duplicates. Browns 16→9, Blondes 23→11. The hardest design decision was deletion, not addition.
Deleted close color presets
12 blonde dups removed
Final: 60+ presets
STEP 05
ENGINEERING QA
SHIP
Multiple QA rounds with engineers to verify real-device output matched design intent. Refined gamma values per NH based on device rendering differences. Tested on diverse hair type photos.
Multi-round testing
Bug identification
Black & white hair edge cases
Device QA
08 — OUTCOME AND IMPACT
The Hair Color feature launched in April 2024. In the first week it delivered a 1.2% lift in
active users, with a 7.67% throughput and 10% export rate — a strong early signal that
the realism and usability of the feature was resonating with users.
1.2%
ACTIVE USER LIFT . FIRST WEEK
A strong signal for feature stickiness — users who found it came back to try more colors.
7.67%
THROUGHPUT RATE
Users who started the color flow completed it — validating that the UI removed friction effectively.
10%
EXPORT RATE
1 in 10 users exported or shared their result — meaning the realism was good enough to use as a reference in real life.
60+
PRESETS SHIPPED AT LAUNCH
Curated from 80+ initial candidates. 7 categories, calibrated across 15 natural hair types.
PHASE 1 · SHIPPED APRIL 2024
Solid Color Exploration ✓
Full preset library across 7 categories · NH detection · Per-preset calibration · Dark hair support · Brush refinement mode
PHASE 2 · NEXT STEPS
Ombre Color
Gradient root-to-tip color transitions · Redesigned picker for start/end color definition across a hair section
PHASE 3 · FUTURE VISION
Highlights, AI & Multi-face
Gradient colors, highlights, and trending styles using AI · Address current multi-face image processing limitations
09 — WINS AND REJECTIONS
Developed a natural hair color spectrum that actually worked
Created individual calibration settings to ensure each preset applied effectively on different base hair colors. The NH mapping system — 15 reference points from jet black to platinum — was the foundation that made inclusivity real, not just a claim.
Collaboration with engineering was the work, not a handoff
Ensuring accurate color application across varied hair types — especially black and white hair — required significant back-and-forth with engineers. The most impactful design decisions happened in those conversations, not at a desk.
More presets ≠ better experience
Starting with 80+ felt like being thorough. Removing near-duplicates through systematic visual testing made the palette more intentional and less overwhelming for users. The hardest design decision was deletion, not addition.
Export rate told the truth
Feature engagement is easy to inflate with metrics. A 10% export rate meant users were sharing their results — using the feature as a real reference for hair color changes in their lives. That's the bar that actually matters for a beauty try-on tool.
Given the confidential nature of this project,
I can't share detailed information publicly.
For insights into design decisions, processes, and key contributions,
feel free to contact me.
© Framer Inc. 2023