Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

beauty · Shopify ·

Boy Smells

Los Angeles fragrance company started in 2016 by Matthew Herman and David Kien, which began with candles poured at home and grew into perfume and body care sold without gender divisions.

The pages

desktop1440 x 900

Boy Smells homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
Boy Smells collection: all candles (expect l, sb, cbk, g, cs, hf) on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: ALL CANDLES (EXPECT L, SB, CBK, G, CS, HF)
Boy Smells product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Boy Smells homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
Boy Smells collection: all candles (expect l, sb, cbk, g, cs, hf) on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: ALL CANDLES (EXPECT L, SB, CBK, G, CS, HF)
Boy Smells product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

68%
18%
68% #ffffff page
18% #e8d1ff secondary surface
5.5% #fff8f5 panels and cards
4.3% #bd826f accent
2.9% #f2f2f2 panels and cards
1.1% #ceb6e6 accent

Ink, by share of text set in it

53.6%
29%
10.4%
53.6% #030303 body and headings
29% #000000 emphasis
10.4% #757575 secondary
4.7% #ffffff reversed on dark
1.5% #373330 emphasis
0.8% #bebebe secondary

Imagery, by share of the page it covers

41.2% photograph, the rest is surface

Typography

sans-serif · everything

Neuzeit Grotesk

sans-serif · accent

Ano W05

of all text on the page

100% sans-serif

The icon set

cart
search
account
menu
close
wishlist

Ecommerce components, rebuilt to spec

Add to cart
Type
Ano W05 14px / 700
Color
rgb(255, 255, 255) on rgb(3, 3, 3)
Shape
100px radius, 25px 32px padding, 64px tall
Width
382px as rendered
Product card
Grid
4 across, 304px wide
Image
1 : 1 crop, contain