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 including the 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:

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.

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, especially on mobile

Before committing to any solution, I explored three structural directions:

A 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 scroll straight down without reading through the report.

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.

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. Flashcards was closer, but it still put the user in control of pacing in a way that felt passive.

None of them resolved the real tension. They just rearranged it.

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? 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.

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.

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."

The reason Spotify Wrapped and Instagram Stories UX patterns answered four problems at once:

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.

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:

It opens with the user's stated skin concern from the quiz. Immediate relevance. You see yourself in the first frame.

An engagement moment showing Obagi processing the scan data. Builds anticipation, establishes clinical authority without a word of jargon.

This explains each finding in plain language, matched to the scan data, not the user's self-diagnosis.

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.

The core tension: how much clinical detail is enough to build trust without breaking the story's momentum.

Animation showing the three concerns with arrows pointing to the products that address each one. Visual, scannable, no clinical language needed.

The product itself, price, and one effectiveness number. Clean. Not a product detail page. The core tension: how much to show without overwhelming, while still converting.

Dermatologist quote, before & after, clinical data. Three separate screens, each focused on one trust signal rather than stacking them.

All recommended products listed, individual "Add to Bag" buttons, and an "Add All" option for the user who's ready to commit. The core tension: what to pair with the add to bag action to increase conversion without pulling focus from it.

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 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 (called Concern-Centered Narrative Assembly) was two story arcs (selected from four) 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.

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.

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.