Mobile UX/UI / 2020

Fenty Beauty

Mobile UX/UI Strategy

A brand-driven mobile experience that simplifies complexion discovery through intuitive UX and unmistakably Fenty storytelling, built for Gen Z shoppers who expect to be guided, not tested.

Fenty Beauty product hero
Client
Fenty Beauty
Focus
Mobile UX/UI + Visual Identity
Role
Brand Design • UX/UI • Creative Strategy • Prototyping
Output
Shade Quiz • Get the Look • PDP System • Prototypes

02 / Challenge

Challenge

Fenty already owned a bold, inclusive voice. The task was extending it into a mobile-native journey that felt personal, shoppable, and educational rather than transactional.

Opportunity

Complexion discovery is where beauty shoppers stall. The opportunity was to make finding a match feel like guidance from the brand, filtering by skin goals instead of product specs so no answer ever becomes a dead end.

My Role

Led brand design, UX/UI, and creative strategy, translating Rihanna's conversational tone into flows, an inclusive visual system, and interactive prototypes.

03 / Strategy

Experience Strategy

The experience leads with skin goals, keeps the brand voice in the microcopy, and treats inclusivity as a design principle rather than a marketing claim.

Core IdeaMobile Experience
01Skin-Goal First
02Inclusive by Design
03Guided, Not Tested
04Editorial Commerce
05Accessible UI
06Personalized Results

04 / Visual Language

Visual Language

An inclusive, accessible language: warm complexion-inspired tones held against high-contrast black and white, set in a clean Helvetica system that keeps the brand bold and legible.

PrimaryNude Pink
#C6AAA4
PrimaryNatural
#E8C0A8
SecondaryBlack
#000000
SecondaryWhite
#FFFFFF
DisplayAaHelvetica Bold
UI / BodyAaHelvetica Regular
VoiceAaConversational Microcopy

Rationale

Complexion-inspired tones make the palette feel like the customer, while ADA-compliant contrast keeps typography legible. One clean type system does the structural work so Fenty's voice can lead in the copy.

05 / Shade Quiz

Shade Quiz Experience

The quiz leads with how skin behaves, undertone checked against wrist veins, then a selfie to fine-tune, so an uncertain answer still moves the journey forward.

Fenty Beauty shade quiz flow

Undertone Visual Selector

An inclusive skin-model reference guides match accuracy and keeps the language visual, not clinical.

Fenty Beauty undertone visual selector grid

06 / Prototypes

Interactive Prototypes

Three flows show the refined mobile UX in motion, from first impression to a clear pathway into the quiz to results that are easy to act on.

Fenty Beauty homepage prototype flow
HomepageSets tone and invites discovery through product-led storytelling.
Fenty Beauty Fenty Finder prototype flow
Fenty FinderA clear CTA and minimal UI guide the user into the quiz.
Fenty Beauty shade finder prototype flow
Shade FinderSequential, visual-driven prompts mirror natural user logic.

07 / Brand Meets Experience

Brand Meets Experience

Across screens, the system translates Fenty's inclusive voice into every interaction, closing the loop from quiz logic to shade names, finishes, and add-ons.

Fenty Beauty brand meets experience screens

Get the Look

Editorial-meets-ecommerce energy makes the results screen feel personal and shoppable rather than transactional.

08 / Outcome

Outcome

A mobile-first experience that does not just look like Fenty, but feels like Fenty, turning emotion into conversion while honoring inclusivity and scale.

Brand-True UX

Extended Rihanna's voice into flows, microcopy, and interactions instead of surface styling.

Inclusive by Default

Skin-goal logic and diverse references made match accuracy feel personal to every user.

Guided to Convert

Removing dead ends turned discovery into a confident, shoppable decision.

Reflection

This project reinforced how much a strong identity can direct behavior, not just decorate it. By centering education, inclusivity, and confidence in the mobile experience, I learned to let brand values guide the flow itself, translating a bold, empowering voice into a journey that feels personal, expressive, and scalable for mobile-first audiences.