UI/UX Case Study

SAYSAW Clear Anti-Dandruff Shampoo

Premium E-commerce Experience

A premium e-commerce experience for an anti-dandruff shampoo that pairs 2.5% Selenium Sulfide with Tea Tree Oil — combining luxury aesthetics with scientific credibility through ingredient storytelling, trust-building, and conversion-optimised, mobile-first shopping.

Role: UI/UX Designer
Platform: Responsive Web (mobile-first)
Category: E-commerce · Beauty · Hair Care
Type: Concept → Prototype · 2 weeks

SAYSAW Clear Anti-Dandruff Shampoo — interface mockup

Problem Statement

Most anti-dandruff products online lean on generic medical presentation, overload users with information, and fail to build trust or emotional connection. Shoppers struggle to understand how the product works, why it’s different, whether it’s safe and effective, and if it’s worth buying — all while battling dandruff, itching, scalp scaling, and the dip in confidence that comes with them.

This leads to

Generic, clinical presentation
Information overload
Low trust and credibility
Weak emotional connection
Poor visual hierarchy

Design Challenge

How might we design a premium e-commerce experience that builds trust instantly, educates users about the formula, and turns a clinical anti-dandruff product into a luxury self-care purchase?

Proposed Solution

A premium storefront built on four brand pillars — premium, trustworthy, scientific, and natural. Gold accents and refined typography signal luxury; molecule-inspired graphics and ingredient transparency establish scientific credibility; tea-tree visuals keep it natural. The experience sells outcomes over features, tells the ingredient story visually, and keeps conversion frictionless with sticky CTAs and trust badges.

User Story

As a working professional dealing with dandruff,
I want to understand exactly how a shampoo works and trust that it’s safe and effective,
so that I can confidently buy a clinically effective scalp-care product online.

Target Users

Working professionals seeking a quick dandruff fix
Shoppers who prioritise safe, transparent ingredients
Buyers wary of cheap-looking, low-trust packaging
Premium hair-care and luxury self-care customers

Research Insights

User pain pointDesign opportunity

Products that don’t work erode trustClinical proof and ingredient transparency

Confusing ingredient listsVisual ingredient cards that explain the science

Cheap-looking packagingPremium gold-and-green luxury visual language

Lack of reviews and proofReviews, trust badges, and a science section

Information overloadClear hierarchy and progressive storytelling

Key Requirements

Functional

Hero with key messaging and headline ingredients
Visual ingredient cards for Tea Tree Oil & Selenium Sulfide
Benefit-focused sections selling outcomes
Scientific trust section with formula explanation
Sticky Buy Now CTA and quantity selector
Customer reviews and FAQ
Trust badges (dermatologically inspired, safe formula)

Non-functional

Premium, luxury look and feel
Mobile-first, thumb-friendly layout
WCAG-compliant contrast and readable type
Consistent spacing and component system
Smooth micro-interactions that feel premium

User Flow

1Land on the hero banner→
2Read the benefits section→
3Explore ingredients & the science→
4Review product features→
5Read customer reviews→
6Check the FAQ→
7Select quantity and tap Buy Now→
8Complete a fast, single-column checkout

Screen Breakdown

Hero Section

Build trust and communicate the promise within seconds.

Large product image on a premium background
“Luxury Scalp Care. Clinically Effective.”
Selenium Sulfide 2.5% · Tea Tree Oil
Primary Buy Now CTA

Ingredient Storytelling

Explain the formula visually instead of as plain text.

Tea Tree Oil card — what, why, benefit
Selenium Sulfide card — what, why, benefit
Molecule-inspired graphics
Animated reveal on scroll

Benefits & Outcomes

Sell results, not just a shampoo.

Dandruff control
Reduced itching
Healthy scalp
Improved confidence

Scientific Trust Section

Reduce purchase anxiety with proof and clarity.

Formula diagrams
Clinical explanation
Ingredient transparency
Usage instructions

Product Page & Checkout

Convert confidently with zero friction.

Sticky Buy Now CTA
One-click quantity selector
Trust badges (safe formula, premium)
Reviews and FAQ nearby

Wireframe Structure

Hero

┌─────────────────────────┐
│  Luxury Scalp Care      │
│  Clinically Effective   │
│      ╭─────────╮        │
│      │ Product │        │
│      ╰─────────╯        │
│  SeS₂ 2.5% · Tea Tree   │
│  [     Buy Now     ]    │
└─────────────────────────┘

Ingredient Cards

┌───────────┬───────────┐
│ 🌿 Tea    │ 🧪 Selenium│
│  Tree Oil │  Sulfide   │
│ what·why  │ what·why   │
│ benefit   │ benefit    │
├───────────┴───────────┤
│  [ Learn the science ] │
└───────────────────────┘

Key UX Decisions

Gold + botanical green palette

Luxury gold signals premium and trust; deep green ties the formula to tea tree and scalp health.

Playfair Display + Inter

An elegant serif for headings reads as premium; a clean sans for body keeps everything readable on mobile.

Ingredient cards over text

Visual cards explain what each ingredient is, why it matters, and how it helps — replacing intimidating ingredient lists.

Sell outcomes, not features

Leading with dandruff control, less itching, and confidence connects emotionally and drives conversion.

Sticky CTA + trust badges

An always-visible Buy Now and dermatological trust signals reduce purchase anxiety and friction.

Acceptance Criteria

✓Hero communicates the promise instantly
✓Ingredients explained through visual cards
✓Benefits framed as user outcomes
✓Scientific trust section present
✓Sticky Buy Now always accessible
✓Quantity selector enables one-click purchase
✓Trust badges and reviews visible
✓WCAG-compliant contrast throughout

Expected Impact

Business

— Higher conversion rates
— Increased average order value
— Stronger premium brand perception
— Better customer retention
— Reduced reliance on discounts

User Experience

— Clear understanding of product benefits
— Increased trust and confidence
— Reduced decision fatigue
— More enjoyable shopping
— Premium, reassuring feel

Success Metrics

Add-to-cart rate
Checkout conversion rate
Average order value
Time on product page
Ingredient-section engagement
Scroll depth to reviews / FAQ
Return / repeat-purchase rate
User satisfaction

Final Outcome

By balancing scientific credibility with luxury branding and user-centered storytelling, the experience positions SAYSAW as more than an anti-dandruff shampoo — it becomes a premium scalp-care solution users can trust, understand, and confidently buy.

Start a project →See more work