← All projectsNext: Hermés Estate →
SKINNA
UX / UI Case Study · E-commerce

Skinna Website

A skin solution-focused online store that helps people with sensitive or problematic skin find products tailored to their condition — like eczema, itching or dryness. Its main selling point is a guided, problem-first experience (categories, filters and a skin finder tool) that recommends safe, targeted products, so users feel confident that what they choose will actually suit their skin.

Watch the prototype
0:39 · website walkthrough
Platform
Shopify online store
Audience
Adults 18–55 with sensitive skin
Deliverables
Sketches, wireframes, hi-fi UI, prototype
Year
2026
01 — The Goal

Safe, effective products — found with confidence.

The goal of this website is to make it easy for people with sensitive skin to find safe, effective products tailored to their specific needs. By focusing on skin concerns and guiding users toward suitable options, the site aims to reduce confusion, build trust, and help users feel confident in choosing products that will soothe and support their skin.

Reduce confusion

Start from the skin concern, not the product type.

Build trust

Clear safety features, ingredients and real customer stories.

Confident choices

Tags and guidance confirm a product suits their skin.

Shop by Skin Concern mega menu on desktop
02 — Website UX

The homepage, at a glance.

Navigation by skin concern, a reassuring hero and guidance banners, all on the first screen.

Skinna homepage design
03 — Design Process

From paper to pixels.

01
Research
Goals, audience, brand
02
Sketch
Hover states and layout
03
Wireframe
Structure and navigation
04
High fidelity
Brand, imagery, UI
05
Test & iterate
User feedback applied
Home page planning board: goals, audience, palette and font
Research

A simple layout, calming colours like sage and beige, and a gentle, reassuring brand identity reflect the company’s ethos of safety and transparency, creating a trustworthy experience that encourages confident purchasing.

Colour palette
Mist
#C3D5E6
White
#FFFFFF
Sand
#E8DCC8
Stone
#9A9EA3
Sage teal
#5E9E9E

Chosen to communicate calm, safety, cleanliness, warmth and skin-friendliness.

Typography
Find relief for Sensitive Skin
Display
Serif, roman + italic
Body & UI
Inter
Hand-drawn sketch of hover state and product grid
Sketch — category hover state
Low-fidelity homepage wireframes with category hover states
Wireframes — homepage, hover through categories, cursor on a different category
04 — Defining the Problem

Users know their symptom, not the product.

We initially considered structuring the website around traditional product categories, as seen in most ecommerce stores. However, this approach would require users to already know which type of product they need — often not the case for people with sensitive or problematic skin.

Instead, we shifted to a problem-focused category structure, organised by skin concerns, symptoms and body areas. This guides users more intuitively toward relevant solutions, reducing confusion and decision fatigue. It also strengthens SEO, as users are more likely to search for terms like “itchy scalp” or “eczema relief” than for product types.

Before · product-first
Face Body Hair + Scalp Accessories Sale
After · problem-first
Shop by Skin Concern Shop by Body Area Sensitive Skin Essentials Learn About Your Skin
Early wireframe with product-type mega menu
The original product-type menu that prompted the rethink
05 — Product Page

What it helps with, at a glance.

Product pages clearly communicate what each product helps with — skin concerns, key ingredients and safety features — in a simple, easy-to-scan layout, so users quickly understand whether it suits their needs.

We also considered customer stories and reviews to build trust, give real-life reassurance and help users relate to others with similar skin conditions.

Product page wireframe
Wireframe → high fidelity
Homepage hero and product page on laptop
06 — Design Reasoning

Built on trust, guided toward relief.

Banners highlight helpful information and solutions for specific skin concerns. Colourful GIFs attract attention and make the experience more engaging without overwhelming the user. Offers encourage users to share reviews and personal stories, enriching the content and strengthening credibility — providing reassurance and social proof that support confident decision-making.

Skin finder, fragrance-free and skin knowledge banners with bestsellers
Guidance banners: skin finder, fragrance-free, skin knowledge
Share your skin story giveaway banner with trending products
Story-sharing offer to grow reviews and social proof
07 — Iteration Process

Refined with user feedback.

Giveaway banner CTA before and after, and product tags
Iteration 01 · CTA
Participate Now Enter to Win

Users suggested a more attractive CTA, so “Participate Now” became “Enter to Win”.

Iteration 02 · Product tags
Relieves Itchy Inflamed Skin

Tags confirm what the product does, helping users make a more confident purchase decision.

Iteration 03 · Brand alignment

Corrected for branding misalignment — the result is tidier.

Article cards and footer, two versions compared
All projects
Next project: Hermés Estate →