Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

beauty · Shopify ·

SK-II

Japanese skincare brand owned by Procter & Gamble and built on Pitera, a yeast ferment traced to observations at a sake brewery. Facial Treatment Essence is the product the range revolves around.

The pages

desktop1440 x 900

SK-II homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
SK-II collection: normal on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: Normal
SK-II product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

SK-II homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
SK-II collection: normal on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: Normal
SK-II product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

48.3%
23.6%
13.4%
12.8%
48.3% #ffffff page
23.6% #161616 dark bands
13.4% #fffcfa panels and cards
12.8% #f8f4ed panels and cards
1.3% #fbf4ed panels and cards
0.4% #ea0429 secondary surface

Ink, by share of text set in it

43.2%
34.2%
15.8%
43.2% #161616 body and headings
34.2% #ffffff reversed on dark
15.8% #1b1212 emphasis
4.8% #000000 emphasis
1.5% #808080 secondary
0.6% #666666 emphasis

Imagery, by share of the page it covers

19.3% photograph, the rest is surface

Typography

sans-serif · everything

AvenirNextLTProRegular

sans-serif · accent

AvenirNextLTPro

of all text on the page

92% sans-serif8% serif

The icon set

cart
search
account

Ecommerce components, rebuilt to spec

SK-II add to cart button photographed on its product page
photographed on sk-ii.com
Add to cart
Type
AvenirNextLTProRegular 14px / 700 / 1.12px tracking / uppercase
Color
rgb(255, 255, 255) on #ea032a, painted over #fffcf9
Shape
0px radius, 500 by 45px
Label
center, rebuild matched the photograph at 1
SKINPOWER Re-New Essence
SKINPOWER Eye + Line Filler Cream
SKINPOWER Re-New Airy Cream
Product card
Grid
4 across, 262px wide
Image
1.06 : 1 crop, contain
Line 1
12px / 400, rgb(22, 22, 22)

Size and color

1.6 oz 2.7 oz
Size selector
Control
radio list with text labels, 2 values
Label
Select Product Size
Type
AvenirNextLTProRegular 12px / 900
Cell
75 by 35px, 8px apart
Chosen
border 1px solid rgb(22, 22, 22) (unselected 1px solid rgb(248, 244, 237))
On load
one is already chosen