Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

beauty · Shopify ·

Lab Series

Lab Series is a men's skincare line launched in 1987 under the Aramis label and now run as a brand of its own within Estée Lauder, selling cleansers, moisturizers and shaving products.

The pages

desktop1440 x 900

Lab Series homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
Lab Series collection: all skincare on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: ALL SKINCARE
Lab Series product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Lab Series homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
Lab Series collection: all skincare on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: ALL SKINCARE
Lab Series product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

95%
95% #ffffff page
3.5% #111111 dark bands
1.1% #f6f6f6 panels and cards
0.4% #212121 dark bands

Ink, by share of text set in it

72%
14.6%
10.3%
72% #111111 body and headings
14.6% #ffffff reversed on dark
10.3% #000000 emphasis
2.2% #4b4f54 emphasis
0.9% #212121 emphasis

Imagery, by share of the page it covers

9.7% photograph, the rest is surface

Typography

sans-serif · everything

Helvetica Neue

of all text on the page

100% sans-serif

The icon set

cart
search
account
close

Ecommerce components, rebuilt to spec

Lab Series add to cart button photographed on its product page
photographed on labseries.com
Add to cart
Type
Helvetica Neue 14px / 700 / -0.3px tracking / uppercase
Color
rgb(255, 255, 255) on #111111, painted over #ededed
Shape
0px radius, 288 by 48px
Label
center, rebuild matched the photograph at 0.979
Anti-Age Max LS Face Serum & Eye Cream Gift Set
All-In-One Face Wash & SPF 35 Moisturizer Duo
Clear LS Deep Pore Clarifying Clay Mask
Product card
Grid
1 across, 250px wide
Image
1 : 1 crop, cover
Line 1
14px / 700 / uppercase, rgb(17, 17, 17)

Size and color

50.0 ml 100.0 ml
Size selector
Control
radio list with text labels, 2 values
Label
Size
Type
Helvetica Neue 12px / 700
Cell
204 by 56px, 12px apart
Chosen
border 2px solid rgb(17, 17, 17) (unselected 1px solid rgb(118, 118, 118))
On load
one is already chosen