Back

SkinSeoul • 2025

Transforming a static product page (PDP) into a context-aware decision support system

Role:

Product Designer

Timeline:

June - October, 2025

Constraints:

Front-end design changes only

No backend restructuring

Personalization logic limited to existing survey feature

Scope:

UX audit → Redesign →

Usability testing → Iteration

Team:

1 Product Designer, 2 Developers

Context & Ownership

SkinSeoul is a Singapore based Korean skincare e-commerce platform offering over 500+ products across skincare categories.


The Product Detail Page (PDP) is the most critical surface in the purchase journey. It is the moment where users move from browsing to deciding.


When I began this project, the PDP had strong branding and product claims, but it was not effectively supporting high-intent decisions.

  • SkinSeoul is a Singapore based Korean skincare e-commerce platform offering over 500+ products across skincare categories.


  • The Product Detail Page (PDP) is the most critical surface in the purchase journey. It is the moment where users move from browsing to deciding.


  • When I began this project, the PDP had strong branding and product claims, but it was not effectively supporting high-intent decisions.

The Real Problem

The SkinSeoul PDP displayed product information but did not actively support high-intent purchase decisions. Users struggled to interpret ingredient relevance and determine product suitability, increasing cognitive load at a critical moment in the buying journey.

The SkinSeoul PDP displayed product information but did not actively support high-intent purchase decisions. Users struggled to interpret ingredient relevance and determine product suitability, increasing cognitive load at a critical moment in the buying journey.

The SkinSeoul PDP displayed product information but did not actively support high-intent purchase decisions. Users struggled to interpret ingredient relevance and determine product suitability, increasing cognitive load at a critical moment in the buying journey.

Strategic Reframe

Instead of asking

“How do we organize information better?”

“How do we organize information better?”

I reframed the challenge as

“How do we reduce decision risk and increase confidence?”

“How do we reduce decision risk and increase confidence?”

This shifted the redesign from content hierarchy → cognitive support. That reframing defined the rest of the work

Iteration Approach

Rather than executing a full redesign, I chose staged iteration to reduce risk:

Version 1

V 1

Version 2

V 2

Version 3

V 3

Each version tested a deeper hypothesis

Version 1 design

What was missing?

What was missing?

It didn’t clearly say who the product was for (skin type, concerns, use case)

Ingredients were listed, not explained in practical terms

Reviews existed, but weren’t personalized or easy to scan

Guarantees, safety, and reassurance weren’t prioritized near the CTA

The page showed information but didn’t guide users toward a confident decision

Also, we had inconsistent design across all the pages ( lack of design system )

  • It didn’t clearly say who the product was for (skin type, concerns, use case)

  • Ingredients were listed, not explained in practical terms

  • Reviews existed, but weren’t personalized or easy to scan

  • Guarantees, safety, and reassurance weren’t prioritized near the CTA

  • The page showed information but didn’t guide users toward a confident decision

  • Also, we had inconsistent design across all the pages ( lack of design system )

Version 2: Structural Clarity

This time, we had paid user interviews and collected insights based on their first time and post purchase experience.

This time, we had paid user interviews and collected insights based on their first time and post purchase experience.

Our goal was to

Improve scannability and trust signals.

Improve scannability and trust signals.

Improvements:

Clearer above-the-fold section

Prominent price, discount, and CTAs

Structured “Suitable For” section

Clear Key Benefits and Key Ingredients blocks

Policy reassurance (authenticity, returns, shipping)

Review filters by gender / skin type / concern

  • Clearer above the fold section

  • Prominent price, discount, and CTAs

  • Structured “Suitable For” section

  • Clear Key Benefits and Key Ingredients blocks

  • Policy reassurance (authenticity, returns, shipping)

  • Review filters by gender / skin type / concern

The page became cleaner

The page became cleaner

But during user conversations and observation sessions, a pattern emerged

Users still asked

“Is this ingredient safe for acne?”

“Will this work for oily skin?”

“Why is this better than others?”

“Is this ingredient safe for acne?”

“Will this work for oily skin?”

“Why is this better than others?”

The layout improved. Decision confidence did not

Structural clarity solved scanning. It did not solve interpretation.

Version 3 (Final): Decision Support System

After monitoring AOV, conversion rate interactions, heat maps and interviewing more customers ( mainly from USA & Australia ) and competitor analysis

After monitoring AOV, conversion rate interactions, heat maps and interviewing more customers ( mainly from USA & Australia ) and competitor analysis

Instead of adding more information, I focused on:

Improving scannability and trust signals.

Improving scannability and trust signals.

Design Decisions Made Based on Competitor Analysis

Competitor Insight

Our Strategic Decision

Business Rationale

Reviews drive purchase decisions, but lack personalization

Added skin-type tagged reviews + match percentage

Reduced confusion. Users knew the next step without thinking. Lower cognitive load.

Ingredient percentages confuse most users

Replaced ratio-based display with 3 hero ingredients + plain-language benefits

Clear decision hierarchy. Faster task completion. Less distraction.

Products lack clear differentiation

Cleaner spacing. Clear separation between problem and editor. Simplified footer actions.

Easier scanning. Better focus on solving problems. Reduced mental effort.

Too much information shown at once

Unified icon system aligned with design system. Clear labeling.

Faster recognition. Reduced learning curve for new users.

Low-fi with more ideations

Mid-fi after stakeholder discussions

Mid-fi after stakeholder discussions

After discussing with the business teams and developers, I have prioritised features based on development constraints and business outcomes

Nope, I DIDN’T STOP THERE. I made some internal survey and user testing with the users and ended up with this design

The final version!

The final version!

Improvements:

Ingredient Intelligence

Skin-Type Mapping

Stronger Social Proof & Authority

Personalized Reviews

Layered Information Architecture

  • Ingredient Intelligence

  • Skin-Type Mapping

  • Stronger Social Proof & Authority

  • Personalized Reviews

  • Layered Information Architecture

Outcome

In Version 3, I made bigger improvements.

In Version 3, I made bigger improvements.

Ingredient Intelligence

Ingredient Intelligence

Instead of listing ingredients, I:

  • Grouped them by function (hydrating, soothing, etc.)

  • Marked sensitive ingredients

  • Highlighted star ingredients

  • Showed ingredient benefits clearly

  • Now users did not have to research outside the page.

Personalised Reviews

Personalised Reviews

I added review filtering based on skin type

  • This helped users see reviews from people similar to them.

  • It made the reviews more relatable and trustworthy

Stronger Social Proof

Stronger Social Proof

I added:

  • Suitable skin types

  • Skin concerns

  • Product effectiveness

  • This reduced confusion.

Clear Skin-Type Mapping

Clear Skin-Type Mapping

The page now clearly shows:

  • Recommendation percentage

  • Product ranking in category

  • This increased trust and authority.

Layered Information

Layered Information

I used expandable sections so:

  • Simple users can scan quickly

  • Detailed users can explore more

  • This balanced clarity and depth.

The layout improved. Decision confidence did not

Structural clarity solved scanning. It did not solve interpretation.

Trade-Offs & Decisions

Why I didn’t?

Why I didn’t?

Why not add a mandatory skin quiz?

Why not add a mandatory skin quiz?

It would increase personalization but also increase friction before Add-to-Bag.

We chose contextual guidance over forced interaction.

We chose contextual guidance over forced interaction.

Why not simplify ingredients completely?

Why not simplify ingredients completely?

Advanced users value transparency. Removing detail would reduce trust.

We layered depth instead of removing complexity

We layered depth instead of removing complexity

Why not push dermatologist authority?

Why not push dermatologist authority?

Authority can increase trust, but over medicalizing could intimidate users.

We balanced peer validation with structured ingredient clarity by talking with the business team

We balanced peer validation with structured ingredient clarity by talking with the business team

Finally

What Changed?

What Changed?

Before:

Before:

A product page that presented information, but left users to connect the dots on their own.

After:

A structured decision-support system that:

Reduces uncertainty, Supports comparison, Lowers research burden, Signals trust and authority, Balances depth with clarity

Gains

What I Learned

What I Learned

Information hierarchy does not equal decision clarity.

In high-risk categories, confidence is the primary design objective.

Interpretation is more valuable than information density.

Iteration reveals deeper problems than redesign.

Trust design is structural, not cosmetic.

  • Information hierarchy does not equal decision clarity.

  • In high-risk categories, confidence is the primary design objective.

  • Interpretation is more valuable than information density.

  • Iteration reveals deeper problems than redesign.

  • Trust design is structural, not cosmetic.

Impact

WE DID IT!!!

After Version 3:

+14%

Increase in time on page

+18%

Increase in scroll depth

+22%

Interaction with ingredient intelligence module

-8%

PDP bounce rate

Impact

WE DID IT!!!

After Version 3:

+14%

Increase in time on page

+18%

Increase in scroll depth

+22%

Interaction with ingredient intelligence module

-8%

PDP bounce rate

For me, this was less about redesigning a page and more about redesigning the decision

For me, this was less about redesigning a page and more about redesigning the decision

Let's Build Something Worth Using

Got a product idea or a design problem worth solving? I'd love to hear it — let's talk.

Let's Build Something Worth Using

Got a product idea or a design problem worth solving? I'd love to hear it — let's talk.

Let's Build Something Worth Using

Got a product idea or a design problem worth solving? I'd love to hear it — let's talk.