MAC Cosmetics VTO Experience wordmark on a black satin background.
← All work

Shipped · AI/AR · Mobile

MAC Cosmetics: Brow Recommender

A mobile-first virtual try-on that uses AI facial detection to take customers from "what's my brow shape?" to a curated shopping list. It's live today.

Role
Lead product designer
Company
Estée Lauder Companies
Platform
Mobile web, AI facial detection
Status
Shipped, live on maccosmetics.com

Bridge beauty expertise and digital convenience

MAC customers wanted a way to understand and shop for brow products tailored to their unique features, without booking an in-store consultation. The goal was a hyper-personalized virtual try-on that could detect a customer's brow attributes, recommend a tailored look, and convert that recommendation into a sale, end to end, on a phone.

Four jobs, one flow

  • 01

    Detect: scan a user's unique brow attributes through the camera.

  • 02

    Recommend: suggest tailored brow goals: shape, thickness, length, definition.

  • 03

    Educate: walk through step-by-step tips so the recommendation actually makes sense.

  • 04

    Convert: connect directly to a curated shopping list for instant purchase.

Human-centered, but built around technical constraints

  • Discovery & research

    Identified user needs around brow education, try-on, and product selection before any screen was sketched.

  • Analysis

    Defined the technical flows for AI detection, camera consent, and mobile performance constraints up front, so the design never outran what the tech could actually do.

  • Experience design

    Built interactive wireframes and full journey maps covering consent, scanning, analysis, and goal selection.

  • Education layer

    Designed makeup tips and personalized guides tied directly to each customer's detected brow attributes.

  • Conversion flow

    Designed "Shop Your Brow" overlays and product bundles that link straight into checkout.

  • Feedback loop

    Added snapshot sharing, post-experience surveys, and follow-up email touchpoints to close the loop after purchase.

UI flow for the MAC Brow Recommender, showing the AI facial detection and brow analysis screens.
AI detection and brow analysis flow.

Built to feel like a consultation, not a filter

Golden ratio overlay guiding users toward ideal brow proportions.
Golden ratio overlay for proportion guidance.
Before and after comparison view showing the brow transformation.
Before / after comparison.

AI facial detection, Golden Ratio overlay guidance, customizable goals (shape, length, thickness, color), before/after comparisons, step-by-step education, a shoppable product list with direct add-to-bag, and a snapshot-and-share moment that turns the result into something worth posting.

Shipped, and still live

The Brow Recommender created a seamless path from discovery to purchase: customers gained confidence in brow styling, experienced an immersive mobile-optimized try-on, and converted at a higher rate thanks to the personalization layer.

Live
Shipped to production
Engagement & conversion likelihood
1
Seamless scan-to-checkout flow

View the live experience on maccosmetics.com →

Next case study

Rivet: Design system & Figma component library

View case study