Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

luggage · Shopify ·

Away

American luggage company launched in 2015 by Steph Korey and Jen Rubio, known for hard shell polycarbonate carry ons with interior compression and, on early models, a removable battery.

The pages

desktop1440 x 900

Away homepage on desktop, Shopify luxury luggage storefront captured at 1440 x 900
Homepage
Away collection: all product (internal only) on desktop, Shopify luxury luggage storefront captured at 1440 x 900
Collection: All product (internal only)
Away product page on desktop, Shopify luxury luggage storefront captured at 1440 x 900
Product page

mobile390 x 844

Away homepage on mobile, Shopify luxury luggage storefront captured at 390 x 844
Homepage
Away collection: all product (internal only) on mobile, Shopify luxury luggage storefront captured at 390 x 844
Collection: All product (internal only)
Away product page on mobile, Shopify luxury luggage storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

82.3%
13.8%
82.3% #f7f4f1 page
13.8% #ffffff panels and cards
1.6% #f7f0ea panels and cards
1.3% #b1b068 accent
0.8% #f9e3ea secondary surface
0.3% #f7eeea panels and cards

Ink, by share of text set in it

75.4%
11.7%
75.4% #111111 body and headings
11.7% #000000 emphasis
7.2% #666666 emphasis
5.3% #ffffff reversed on dark
0.4% #d8d8dc secondary

Imagery, by share of the page it covers

8.5% photograph, the rest is surface

Typography

sans-serif · everything

Graphik

sans-serif · accent

Lyon Display

of all text on the page

76% sans-serif24% serif

The icon set

cart
search
account
menu
close

Ecommerce components, rebuilt to spec

Add to cart
Type
Graphik 16px / 500 / uppercase
Color
rgb(255, 255, 255) on rgb(17, 17, 17)
Shape
80px radius, 0px 20px padding, 52px tall
Width
219px as rendered
Product card
Grid
4 across, 270px wide
Image
0.78 : 1 crop, cover