SkinLabs
Personalized skincare, backed by your skin’s data.
A diagnostic-first skincare brand: a mobile app and e-commerce experience that reads your skin, builds a routine around your barrier, and shows its reasoning every step of the way.
View Prototype ↗
Role
Product Designer (end-to-end)
Platforms
iOS app + responsive web
Timeline
6 weeks (self-directed)
Tools
Figma, FigJam
01 TL;DR
A 2-minute diagnostic that replaces the skincare guessing game.
Skincare newcomers face 200+ products, marketing that hides ingredients, and no way to tell if anything is working. SkinLabs replaces the guessing game with a 2-minute skin diagnostic that builds a transparent, personalized routine, plus a progress tracker that finally gives skincare a scoreboard.
The insight that shaped everything: people don’t trust personalization they can’t see the logic behind. So the whole product is built to show its work.
5 / 5
testers completed the 2-minute skin analysis without help
4 / 5
preferred the diagnosis-first results screen, calling it “more trustworthy, less like a sales pitch”
Fixed
moving the “why you got this” rationale above the fold fixed the top usability issue in testing
02 The Problem
Skincare is overwhelming before it’s anything else.
Skincare is a huge, fast-growing category, and for a newcomer it is paralyzing. Three walls hit at once.
01
Too much choice. A typical aisle has 200+ products. Where do you even start?
02
A trust deficit. “Personalized” quizzes feel like sales funnels, promising glow while hiding the actual ingredients and percentages.
03
No feedback loop. People buy products, use them inconsistently, and never know if anything worked. A long game with no scoreboard.
“I have a drawer full of half-used bottles. I have no idea which one actually did anything.”
Interview participant, 29
How might we turn skincare from an overwhelming guessing game into a personalized, transparent system people trust enough to stick with?
03 Research
I studied who does this well, and who doesn’t.
I kept research lightweight and self-run: 5 interviews with people in my network (ages 22 to 41), a mix of “skincare-curious” and “I gave up on a routine”; a competitive audit of 6 skincare brands and diagnostic apps; and a short survey to sanity-check what confuses people most when they shop for skincare.
“Every quiz gives me the same five products. It obviously just recommends whatever they’re selling.”
Interview participant, 34
“I want someone to just tell me what my skin needs and why. Show your work.”
Interview participant, 24
“I’ll stick to a routine. I just need to see it working, or I stop.”
Interview participant, 33
Rhode · Byoma · Weleda · Glossier · Saltair · Curology
Four insights that drove the design
01
Trust needs visible logic. People don’t trust personalization they can’t see the reasoning behind. So the diagnostic shows its work and surfaces the “why” behind every recommendation.
03
The drop-off is consistency, not purchase. People fall off the routine, they don’t fail at checkout. So design for the daily habit, not just the sale.
02
Jargon reads as scary or fake. Ingredient anxiety is real. So translate the science: every ingredient gets a plain-language “what it does.”
04
Long quizzes get abandoned. So keep the diagnostic under 2 minutes, with visible progress and a real payoff.
The gap in the market
Every product I audited was strong on one axis and weak on the rest: diagnostic apps have good analysis but no cohesive product line, DTC brands have great products but shallow “token quiz” personalization, and marketplaces offer infinite choice with zero guidance. SkinLabs’ angle: own the entire loop, diagnose, recommend transparently, track progress, adjust.
04 Who I Designed For
Two people, two very different reasons to trust it.
Overwhelmed Olivia, 27
Skincare-curious, follows skinfluencers, owns random products she can’t justify. Wants to “do it right” but doesn’t know where to start, and is suspicious of marketing.
Needs: a trustworthy starting point, plain explanations, low commitment.
Methodical Marcus, 33
Results-driven, tracks his workouts and macros. Will stick to a routine if he can see it working.
Needs: data, progress tracking, evidence.
05 Design Principles
Every decision measured against four rules.
01
Show your work.
Never recommend without a visible reason.
02
Translate, don’t dumb down.
Explain the science in human terms.
04
Calm over loud.
Skincare is self-care, so the UI should feel like a deep breath.
03
The routine is the product.
Optimize for the daily habit, not just the sale.
06 Information Architecture
Web for discovery, app for the relationship.
I split the ecosystem by job: the web handles discovery and commerce, the app carries the ongoing, personal relationship.
Web
Home
Skin Analysis
Shop (filter by concern or step)
Product Detail
The Lab (ingredient library)
Cart & Checkout
App
Onboarding & Analysis
Skin Profile
Today (AM/PM routine)
Routine Builder
Progress
Shop
Key decision: the diagnostic is the front door on both platforms, never buried behind signup. You get your skin profile before being asked to buy anything. Trust first.
08 Iteration
A decision I’m proud of.
My first results screen led with the product bundle. In testing, people got skeptical the moment it loaded (“here comes the sell”). So I flipped it: the second version leads with the diagnosis, your barrier score and a plain-language read, and pushes pricing below the fold. Same products, very different reception.
“It feels like it actually looked at my skin instead of trying to sell me.”
Usability test participant
07 The Solution
A product built to show its work.
I split the ecosystem by job: web for discovery and commerce, the app for the ongoing, personal relationship. The diagnostic is the front door on both, never buried behind signup. Four pieces carry the experience.
Today
The app home isn’t a store, it’s your routine for today: AM/PM steps, a gentle streak, and a single “next step” nudge. A habit you keep, not a shop you visit.
The Skin Analysis
A 2-minute adaptive diagnostic, one calm question per screen, branching on your answers. It ends in a Skin Profile with a barrier-health score, not a product list. Understanding first.
Progress
Monthly check-in photos and a barrier-health trend line make improvement visible, framed to encourage, never to grade. The scoreboard skincare never had.
Transparency
Every product page leads with what it does, the hero ingredients with percentages, who it’s for, and “why you got this”, all before any marketing copy. No proprietary blends.
09 Brand & Visual Identity
Lab-grade credibility, spa-grade calm.
I designed the brand to resolve one tension: the credibility of a lab with the calm of a spa. Reference points: the minimalism of Rhode, the ingredient transparency of Byoma and Weleda, the friendly accessibility of Glossier and Saltair.
Palette
An oat-milk canvas and espresso ink for calm legibility, a botanical sage as the primary (nature plus science), warm clay for humanity, and a periwinkle “lab” accent reserved for data and science cues.
Type
Fraunces for editorial warmth, Inter for trustworthy UI, and Space Mono for lab-data micro-labels like percentages and ingredient codes, measured, not marketed.
Feel
Generous whitespace, soft rounded corners, low calm shadows, unretouched skin, and deliberate ease-out motion.
10 Design System
One system, so app and web read as one brand.
Color tokens, an 8-step type scale, a 4px spacing grid, elevation, radii, and motion, plus components (buttons, inputs, quiz option cards, the barrier-score ring, product cards, progress chart, chips, nav) built with variables and auto-layout, so a single token change ripples everywhere.
Add design-system.png (UI kit board)
11 Validation
I built the core flows and tested them with five people.
I built a clickable Figma prototype of the core flows, skin analysis, Today, and product detail, and ran a moderated usability test with 5 participants, remote, thinking aloud. Small sample, so I treat these as directional signals rather than proof.
5 / 5
completed the skin analysis without help, in roughly 2 minutes
Top issue
3 of 5 couldn’t find why a product was recommended, I moved the rationale above the fold and it tested clean
4 / 5
found the diagnosis-first results screen more trustworthy than product-first
What I’d test next
The Progress feature’s long-term motivational effect (which needs a longer study), and whether the barrier-score framing ever reads as anxiety-inducing for sensitive-skin users.
12 Reflection
What I’d keep, and what I’d change.
What I’m proud of
The trust reframe came from testing, not a hunch, and it changed the design in a concrete way.
A design system cohesive enough that app and web read as one brand without looking identical.
Restraint. It would have been easy to make a loud “beauty” app; the calm, transparent tone is the differentiation.
What I’d do differently
I over-built the Progress feature before validating demand for it. I’d cut scope and test the core loop first.
I’d recruit a couple of testers outside my immediate network to reduce bias.
Personalization isn’t a feature you add, it’s a trust relationship you design. SkinLabs earns trust by showing its work, then gets out of the way.
Other Projects