Case Study
Beauty-Tech & AI Vision Commerce
Role
Product Designer + AI Engineer, Solo Build
Stack
HTML5 MediaDevices · Vision AI Pipeline · Commerce Logic
Markets
US · UK · Canada
The Problem
Every beauty DTC brand loses customers at the same invisible wall: the moment a shopper has to imagine how a product will look on their own skin. AURA was designed to remove that wall entirely.
Before (the industry stANDARD)
✕
Shoppers self-select a shade from a flat product photo, often under the wrong screen brightness or lighting.
✕
Skin quizzes return generic text advice with no visual tie-back to the user's actual face.
✕
"Talk to an expert" means a support ticket, answered days later, after the moment of intent has passed.
✕
Diagnosis and purchase live on two different pages, often two different sessions entirely.
"I'll just order two shades and return one." — the quiet tax on every beauty DTC P&L.
After (THE AURA MODEL)
✕
The camera captures the user's actual face, in-browser, in their actual lighting , no download, no friction.
✕
Diagnostics return structured data, undertone, skin type, face shape, rendered visually on the user's own portrait.
✕
A real consultation channel sits one tap away, with a free first response so expert advice has zero upfront cost.
✕
Diagnosis, shelf, and checkout are one continuous scroll, the recommendation engine doubles as the storefront.
One scan. One scroll. One decision the customer actually trusts.
The User Journey
One scan. Seven moments. Zero dead ends.
Mapping the full path matters more than any single screen, it's where a product designer proves the experience holds together end to end, not just in isolated frames.
👋
Discover
Lands on the home feed, sees a routine tracker instead of a generic landing page.
📷
2
Scan
One tap opens the native camera, no install, no redirect.
Camera Pipeline
◈
3
Diagnose
Structured results, undertone, skin type, face shape, render on their own portrait.
AI Vision Layer
🛍
4
Shop the Match
Diagnosis resolves directly into a shoppable, shade-matched shelf.
Commerce Layer
🧾
Checkout
Delivery details, payment, and order review, a real e-commerce flow, not a demo cart.
💬
6
Consult a Specialist
Unsure about the match? One tap opens a live chat with an AURA Beautician, first reply free.
Retention Layer
🔁
Return
Order tracking, points balance, and routine progress bring them back without a push notification.
The Experience
Three screens. One loop from diagnosis to checkout.
Every interaction in AURA is engineered to collapse the distance between "I wonder what shade I am" and "Add to Bag." Here is the journey, screen by screen.
01
A dashboard that feels carved, not coded.
The home feed greets each user by name against a soft neomorphic canvas. Daily routine steps surface as tappable progress cards, while a floating capsule nav sits fixed exactly where the thumb already rests.
9:41
●●● 100%
GOOD MORNING
Hello, Élodie
✨
Your skin loved yesterday's routine
3 of 4 steps complete
Continue your evening ritual →
Shop
Saves
Scan
02
Your face, mapped in real time not guessed at a counter.
A live front-facing capture feeds the diagnostic overlay. An animated scan line sweeps the portrait while coordinates resolve into tappable Skincare, Makeup, and Face Shape results.
9:41
●●● 100%
92% MATCH CONFIDENCE
Warm Honey Undertone · Combination Skin · Oval Face Shape
Skincare
Makeup
Face Shape
03
From diagnosis to "Add to Bag" in a single scroll.
Every diagnostic result resolves into a curated shoppable shelf. AURA's own skincare oils, shade-matched foundation, and face-shape-specific styling picks. Pricing is live. The bag updates instantly.
9:41
●●● 100%
For You
Bag 3
MATCHED FOR YOUR SCAN RESULTS
Hydra-Oil Concentrate
WARM HONEY BASE
$48
Sheer Veil Foundation
SHADE 3.2 MATCH
$36
Oval Lace Wig
HONEY BALAYAGE
Add to Bag
Beyond the Algorithm
When the AI isn't enough, a real specialist is one tap away.
Diagnostics build trust. But high-consideration beauty decisions, a first retinol, a permanent color change, still benefit from a human in the loop. AURA Beautician is that loop, designed as a real product surface, not a support widget bolted on after launch.
①
Zero-cost first contact
The first response from a specialist is always free, removing the one hesitation that kills consult-to-conversation rate.
②
Transparent micro-pricing
Every subsequent reply is metered at 100 points, shown inline on the message itself, no hidden paywall, no surprise invoice.
③
Monetized retention, not a cost center
A typical support chat is pure overhead. This one carries its own points economy, turning "customer service" into a revenue line.
9:41
●●● 100%
💆🏽♀️
AURA Beautician
● Online now
2,648 pts
Hi Élodie! I'm your AURA Beautician. Your first response is completely free — what would you like help with today?
My skin feels oily by midday, what should I use?
Try layering thinnest-to-thickest — a niacinamide serum, then an oil-free moisturizer.FREE RESPONSE
What about for nighttime?
A gentle retinol 2–3x a week, always followed by SPF the next morning.− 100 PTS
Ask your beautician anything...
➤
Why Brands Hire Me For This
This isn't a template. It's commerce infrastructure.
Three engineering decisions separate AURA from a typical skin quiz plugin, and they're the same decisions I bring into every contract.
⌬
Capture Layer
Zero-install web camera pipeline
The entire capture pipeline runs natively in-browser through the HTML5 MediaDevices API , high-resolution selfie capture, instant preview, and re-shoot logic, without a single megabyte of app download. The camera opens in the time it takes to tap a button.
◈
Diagnostic Layer
Vision AI built for production, not demos
The diagnostic engine returns structured, parsed output, skin type, undertone hex values, face shape category, in a strict schema the interface renders instantly. That discipline is what separates a "fun AI demo" from a feature a brand can actually ship.
◎
Commerce Layer
Every diagnostic is a merchandising opportunity
The architecture maps each diagnostic output directly to a live product catalog, shade-matched foundation, undertone-correct oils, face-shape styling, so the moment a user learns something about themselves, they're one tap from buying the solution.
✦
Retention Layer
A consultation economy, not a support cost
The AURA Beautician chat runs on its own points ledger, free first contact, metered replies, inline top-up. It's the rare support surface that's designed to be a margin-positive product feature from day one, not an expense line a brand tolerates.
Let's Build Your Next Revenue Surface
Your brand deserves an interface that sells while it delights.
I work with luxury beauty, wellness, and DTC brand directors who are done shipping static product pages and ready to ship intelligence, camera pipelines, AI-driven personalization, and checkout flows engineered to convert.
Book an Interface & AI Architecture Audit
Review the Open-Source Camera Repo
Solo-Engineered · End-to-End Design + Build · US / UK / CA Market Ready