Redesigning How Obagi Delivers Skin Insights
Obagi
·
2025
Role
UX & UI Designer
Timeline
3 months
June to August 2025
Team
5 members
Tools
Figma
FigJam
Context
This is a 0-to-1 skin scanning platform for a clinical skincare brand.
Obagi is a professional-grade skincare brand known for its clinical authority. This project was a 0-to-1 build: a web-based skin scanning experience where users hold up their camera to scan their face, and the system analyzes their skin data to recommend products tailored to their specific conditions.
I owned the UX/UI design across the entire experience - home page, account pages, diagnostic flow, quiz, cart, product detail pages, and the skin report. I built the 200-component design system from scratch, created the user flows, and designed the UX workshops.
The project was sunsetted before launch due to strategic and legal decisions around the dermatologist layer, not design. The work reached hi-fi, was dev-ready, and was hosted in a staging environment.
This case study focuses on the skin report - the moment after the assessment where users receive their diagnosis and product recommendations.
The experience has two entry points: obagi.ai, and a dedicated section embedded into obagi.com for users who arrive through the existing site. Both lead into the same four-stage flow:
Assessment
a 25-question skin assessment quiz, with the face scan placed in the middle to break up the length and keep the user engaged throughout.
Diagnosis
the system analyzes the scan data and quiz responses to identify the user's actual skin conditions.
Recommendation
the skin report delivers the findings and maps them directly to a personalized product recommendation, leading into cart and checkout.
Purchase
product recommendations flow directly into cart and checkout, with upsell tied to the user's specific skin findings.
Problem
Nobody reads a skin report and that's a conversion problem.
After completing the face scan and a 25-question skin assessment, users land on their skin report. This is the most important moment in the entire journey - the payoff of everything they just did.
But skin ontology is foreign to most people. Terms like "skin barrier," "transepidermal water loss," or "melanin irregularity" mean nothing without context. And even when explained, a long page of findings creates a new problem: nobody reads it.
If users don't understand their report, they won't trust the recommendation. If they don't trust the recommendation, they won't buy. The report isn't just a UX problem, it's a conversion problem too.
Every major skincare brand with a scan or assessment feature had the same format: a vertical scroll page, clinical findings up top, products below the fold. Long, dense, and structured like a medical document.
The question wasn't how to make that format better. It was whether that format was the right answer at all.
How might we
How might we preserve Obagi's clinical authority while making the skin report engaging enough to drive conversion?
PROCESS
The first two versions got the layout right and the format wrong.
The first version followed the standard pattern. A vertical scroll page with scan results at the hero, skin parameter scores (barrier, firmness, skin tone, texture), strength and focus area breakdowns, and product recommendations below. Clean layout, simple UI, nothing wrong with it technically.
The internal reaction from the Obagi team was calm. When discussing opportunities to enhance the experience, the team had a productive discussion around layout enhancements and how to provide more value without overloading the report.
I was already diagnosing the problem while building the wrong solution. The core tension that emerged in review: Obagi is a clinical brand. They needed the report to establish authority - to signal that you're not just being sold a product, you're receiving a professional-grade diagnosis. But that same clinical weight was pushing the product recommendation below the fold, burying the most important conversion moment under a wall of findings the user didn't ask for and wouldn't read.
Moving the report down felt like compromising the brand. Keeping it up front hurt the conversion. We iterated through a second version adding more social proof layers - dermatologist quotes, before-and-after sections, testimonials. The page got longer. The tension got worse.
Before committing to any solution, I explored four structural directions:
Tabs
A conventional progressive disclosure pattern that saves space and lets users jump directly to what they care about. If a user only wants the recommendation, they can go straight to that tab without reading through the report first.
Accordions
The same progressive disclosure logic as tabs, but within a scrolling behavior. Users stay in a familiar vertical flow while controlling how much detail they expose.
Flashcard swipe
A more engaging and interactive way to reveal information sequentially, while still following the same underlying structure of reporting findings, explaining concerns, and recommending products.
Tabs and accordions reduced the visual density but introduced a different problem: they still required the user to decide what to read and when. The decision fatigue didn't go away, it just moved. Flashcard swipe was closer, but it still put the user in control of pacing in a way that felt passive rather than engaging. None of them resolved the real tension. They just rearranged it.
Insight
Scrolling through Apple Replay changed everything.
It was mid-year. I was scrolling through my Apple Replay monthly report when I remembered how Spotify Wrapped works.
Wrapped takes data - your own listening habits - and delivers it back to you as a story, one moment at a time, in an order that builds to a payoff. You're not reading a report. You're being told something about yourself. It's full-screen, sequenced, and personal. Every frame has one job. Nothing competes.
That was the aha moment. From there I dived further into similar UX patterns. How does onboarding work at its best - the kind that doesn't feel like setup but feels like discovery? How does Instagram Stories hold attention without asking for anything? The throughline across all of it: sequential, full-screen, one idea at a time, designed for people who scan rather than read. That became the design reference stack for the skin report.
The reason Spotify Wrapped and Instagram Stories UX patterns answered four problems at once:
Engagement
auto-advancing, animated, full-screen. No effort required to stay in it.
Attention
one idea per frame means the user never has to decide what to focus on. They just tap.
Authority without overwhelm
clinical data can still be there, but sequenced into digestible moments rather than stacked onto a single page.
Uniqueness
no other skincare brand was doing this. Every competitor was still on the same long-scroll report format. A story-driven skin report was a genuine differentiator, not just a UX improvement.
And critically, the format is already familiar. Users know how Wrapped and Stories work. No learning curve, no friction, no cognitive load spent figuring out the interaction. They just experience it. That's exactly what the skin report needed to do.
Users come out of a 25-question assessment and a face scan. They've already invested time. They have a stated concern. The system has findings. The job isn't to dump all of that onto a page. The job is to take them on a journey from "here's what you told us" to "here's what we found" to "here's what to do."
Users don't read. They scan. So design for scanning, not reading. And if you want them to stay engaged long enough to reach the product recommendation, give them something worth experiencing - not something worth skipping. That was the moment the story format stopped being a reference and became the answer.
Solution
A story format that sequences data the way people actually consume content.
The story functions like an Instagram Story: full-screen, tap left or right to navigate, auto-advancing with animation. No scrolling required. The user stays in the experience rather than managing a page.
The sequence was designed with a specific logic:
Welcome screen
It opens with the user's stated skin concern from the quiz. Immediate relevance. You see yourself in the first frame.
Analysis screen
An engagement moment showing Obagi processing the scan data. Builds anticipation, establishes clinical authority without a word of jargon.
Findings screen
This is the validation or correction point. If the scan confirms what the user suspected, the copy validates them. If the findings differ from their stated concern, the copy gently corrects: "We understand you're concerned about skin firmness, but your scan shows a skin barrier issue." Two different story arcs, same screen structure.
Primary and secondary concern screens
This explains each finding in plain language, matched to the scan data, not the user's self-diagnosis.
Product connection screen
Animation showing the three concerns with arrows pointing to the products that address each one. Visual, scannable, no clinical language needed.
Product showcase
The product itself, price, and one effectiveness number. Clean. Not a product detail page.
Social proof trilogy
Dermatologist quote, before & after, clinical data. Three separate screens, each focused on one trust signal rather than stacking them.
Aggregate and add to bag
All recommended products listed, individual "Add to Bag" buttons, and an "Add All" option for the user who's ready to commit.
Confirmation screen
A closing moment affirming the decision. Sends the user to checkout with confidence rather than hesitation.
The sequence logic was intentional: validate before selling, explain before recommending, build trust before asking for the transaction. Every screen has one job. Nothing competes.
The key decision on the correction flow: the copy doesn't tell the user they were wrong. It acknowledges what they care about, then redirects to what the scan found. The tone stays on their side, not above them.
Storytelling
The story only works if it speaks to the user, not at them.
The first iteration of the story format had copy, but it was direct and clinical. Just the sequence: here is what we found, here is the product. No acknowledgment of what the user came in believing, no emotional thread connecting the diagnosis to the recommendation. The team liked the concept, but the internal crit was clear - it felt like a showcase, not a story. There was no emotional bond between the user and the experience.
That feedback sent me back to the quiz. Inside the assessment, users select their stated skin concern - what they already believe is their problem. That's a significant signal. A user who selects "skin barrier" is telling you something about how they see themselves and what they came here to fix. When the scan runs and the findings come back, two things can happen: the scan confirms what they suspected, or it finds something different.
If you ignore that distinction and just present the findings as facts, you create friction. The user arrived with a belief. The screen contradicts it without acknowledgment. That gap - between what they think and what the scan found - is exactly where trust breaks down. Think about a real dermatologist visit. You walk in with a stated concern. The doctor listens, runs their assessment, and then talks you through what they found - whether it confirms what you suspected or surfaces something new. They never just hand you a diagnosis and walk out. The conversation is part of the experience. That's what the copy needed to replicate: a system that feels like it's talking to you, not at you. This also directly mirrors the authority that Obagi embodies as a brand. They are a clinically backed, dermatologist-trusted brand. The story format needed to reflect that same standard: knowledgeable, consultative, and personal.
The solution was two story arcs with identical screen structures but different copy:
Validation flow
When the scan confirms the user's stated concern, the copy acknowledges it. "Your instinct was right. Here's what we found." The user feels seen, not sold to.
Correction flow
When the scan finds something different, the copy meets them where they are before redirecting. It acknowledges what they care about first, then introduces the finding as new information rather than a contradiction. "We know you're focused on skin firmness. Your scan also shows a skin barrier issue that's worth addressing."
The tone never tells the user they are wrong. It treats the mismatch as a discovery, not a correction. The brand voice came from Obagi's copy team, but the structural logic - acknowledge first, redirect second - came from understanding where the emotional friction lived. This was the detail that turned a clinical showcase into a conversation.
Decision
The vertical scroll stayed - because two users have two different needs.
The story format solved the engagement problem. But it created a new one. Users coming from other skincare brands expect a report. If they've used Cetaphil's skin assessment or any competitor tool, they're conditioned to a vertical scroll. Replacing the report entirely with a story format would confuse them. It would also sacrifice the vertical real estate that still works for certain users - the ones who want to read, who trust clinical detail, who want to understand before they buy. The solution was to keep both.
The story is the primary experience: light on data, heavy on engagement, sequenced to move the user toward conversion. The vertical scroll sits below it as a secondary format: report-forward, more clinical, focused on the summary of findings, product bundling, and a PDF download option for users who want the full data.
The vertical scroll was redesigned to be concise. No more competing for attention with the story. Its job is to serve the users who scroll past the story, not to replace it. The skin report data lives there as a sticky button - accessible if you want it, not forced on you if you don't. Two different users, two different needs, one coherent system.
Reflection
Format is a design decision, not a default.
The biggest thing this project taught me is that the format of information is a design decision, not a default. The vertical scroll wasn't wrong because of its layout - it was wrong because it assumed users wanted to read a report. They didn't. They wanted to know what to do about their skin. The Spotify Wrapped reference isn't a trick. It works because it respects how people actually process information: in sequence, in moments, with emotional resonance before clinical detail. That logic applies far beyond skincare. What I'd validate if this had launched: the correction flow. The hypothesis is that gently redirecting a user from their stated concern to what the scan actually found builds more trust than just confirming what they already think. That's a strong assumption and it needed real user testing to confirm. The drop-off rate between the finding screen and the product screen would have been the number to watch. The project getting sunsetted was a strategic call around dermatologist licensing and legal frameworks - not a design failure. The work reached hi-fi and dev-ready. What remains is a system I'd stand behind, and a format I'd bring to any product that sits at the intersection of personal data and purchase decisions.