Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

fashion · not disclosed ·

Bode

Small batch New York label founded in 2016 by Emily Adams Bode Aujla, which builds menswear from antique quilts, table linens and other salvaged cloth, so runs stay very short.

The pages

desktop1440 x 900

Bode homepage on desktop, not disclosed luxury fashion storefront captured at 1440 x 900
Homepage
Bode collection: emily adams bode on desktop, not disclosed luxury fashion storefront captured at 1440 x 900
Collection: Emily Adams Bode
Bode product page on desktop, not disclosed luxury fashion storefront captured at 1440 x 900
Product page

mobile390 x 844

Bode homepage on mobile, not disclosed luxury fashion storefront captured at 390 x 844
Homepage
Bode collection: emily adams bode on mobile, not disclosed luxury fashion storefront captured at 390 x 844
Collection: Emily Adams Bode
Bode product page on mobile, not disclosed luxury fashion storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

90.8%
8.9%
90.8% #ffffff page
8.9% #fbfbfb panels and cards
0.4% #000000 dark bands

Ink, by share of text set in it

73.1%
25%
73.1% #000000 body and headings
25% #737373 secondary
1.5% #808080 secondary
0.4% #ffffff reversed on dark

Imagery, by share of the page it covers

47.7% photograph, the rest is surface

Typography

sans-serif · everything

NeueHaasUnica

sans-serif · accent

ITCBlairPro

of all text on the page

100% sans-serif

The icon set

cart
search
account

Ecommerce components, rebuilt to spec

Bode add to cart button photographed on its product page
photographed on bode.com
Add to cart
Type
NeueHaasUnica 12px / 400
Color
rgb(255, 255, 255) on #000000, painted over #ffffff
Shape
0px radius, 297 by 40px
Label
center, rebuild matched the photograph at 1
$450
$450
$450
Product card
Grid
3 across, 365px wide
Image
0.8 : 1 crop, cover
Line 1
12px / 400, rgb(0, 0, 0)

Size and color

XXS XS S M L XL XXL
Size selector
Control
radio list with text labels, 7 values
Label
Size
Type
NeueHaasUnica 12px / 400
Cell
40 by 40px, 8px apart
Chosen
border 1px solid rgb(0, 0, 0) (unselected 1px solid rgb(212, 212, 212))
On load
nothing is chosen

The email sign up popup

Bode email sign up popup, lower centre
Email capture
Placement
lower centre, 410 x 258
Asks for
email
Offers
nothing named
Shown on
both
Dismissible
no close control found