Shopping online can be a refreshing and enjoyable experience. But consumers may have forgotten that fact, after years of using identikit ecommerce sites that are functional but drab.
Thankfully, challengers and disruptors in retail are imbuing their websites with brand character and providing a customer experience not far removed from a store visit.
Here are 27 UX and design features taken from the websites of four of my favourites – Casper, Everlane, MeUndies and Warby Parker.
N.B. I haven’t include mobile UX in this feature (it’s long enough already), but watch this space for a follow-up article.
1. Everlane: Transition header menu
I love the way that Everlane’s homepage photography fills the entire screen, reminiscent of a magazine cover, with the header menu sitting on top of the portrait.
As you scroll over the menu, it transtions to a blocked-out white bar, allowing you to more easily select a category. This transition also occurs when you scroll below the fold and the menu follows you as you go.
I do have a bugbear with Everlane’s menu on desktop – if you click on ‘Men’, for example, the category loads (quite slowly) but the user isn’t intuitively aware of this, because the dropdown menu stays put and obscures the page. After waiting a beat, you realise you have to click away from the menu. But still, the homepage effect is a lovely one.
2. Casper: Creative & mythic product images
Casper has brought about something of a revolution in mattresses. It has somehow made them desirable. And because they’re not cheap, the website has to do a fine job of selling the dream.
It does this decisively with a range of incredibly creative product images. Here are just five of my favourites. They really sell the products and the lifestyle.
A. What friendly colours! And such a smart box!
B. This image is intended to portray the quick (and magical) unrolling/expanding process, once you get your mattress out of the box.
C. This is my favourite, selling Casper’s sheets. It brings to mind cool and airy sleep on a spring morning.
D. Very funny.
E. Such a simple and creative idea – photographing the bed from above.
3. Everlane: Transparent pricing
Transparent pricing is one of Everlane’s raison d’etres, and the way it flaunts its credentials is really impressive. This little box sits at the bottom of every product page and shows the customer exactly how much the item cost to produce.
Crucially, the diagram also shows you what you might pay for a similar item (in this case, a jumper) from a competitor. Persuasive stuff.
4. MeUndies: Bold colours and typography
For me, the defining features of any retailer that has managed to create an authentic brand experience on its website are colour and typography. Each of the brands in this article does a great job on this front.
Here, MeUndies’ scrolling subscription page presents three choices of product to the user, each with chunky typography and colourful backgrounds. A great way to underline the confidence of the brand and implicitly the quality of the product (and how it will make you, the customer, feel).
5. Warby Parker: ‘Staff picks’
Here’s a small but powerful bit of UX. So often, ecommerce sites underwhelm with their rather functional product flags that say ‘sale’ or ‘favourite’.
In this case, Warby Parker brings all of its branding nous to these ‘staff pick’ markers, which help to break up the monotony of these product listings and subtly push home the friendly/homespun culture of the company.
6. Everlane: Slider typography
Let’s look at some more typography. If you’re going to use a homepage slider, carousel or transition, do what Everlane does and use changes in typography to boldly differentiate between each slide.
I’ve just included two screenshots here, but each of the six slides included a different style of typography. Fantastic.
7. Casper: Form fields
Before we get too excited looking at more wide leg trousers and beautiful fonts, let’s have a classic UX example from Casper.
Look how the field description shrinks in size and sits at the top of the field as I begin to type. This little micro-interaction happens on every field, helping to gently cajole the user towards checkout.
8. MeUndies and Everlane: Referral schemes
Both Everlane and MeUndies offer incentives for customers to invite their friends. This is a nice growth hacking tactic.
Everlane’s ‘Invite your friends’ scheme
I particularly like the way that Everlane pushes this referral scheme in the footer of the homepage, offering me my unique URL and reminding me of the rewards. This keeps the feature a little more front of mind than simply tucking it away in my account or in a footer link.
MeUndies does tuck away the referral scheme in a footer link and in ‘my account’ but once you find it (and I’m sure MeUndies does some email marketing around the scheme), the copy is compelling.
I’m left in no doubt as to the advantages of referring a friend, and I can fire off emails from within the MeUndies website, complete with pre-filled message.
9. MeUndies: Editorial video
This page on the MeUndies website would give me the millennial feels, if there was such a thing and I happened to be prone to it. Each video (hosted on the brand’s YouTube channel) has lovely cover art (reminiscent of Airbnb’s new experience listings) and the videos themselves are really well made.
Watch The Boxer, a really creative short emphasising the freedom of boxer shorts. It’s almost enough to turn a briefs man.
Here’s another video, different in style, showcasing the work of one of MeUndies’ designers. It’s engaging, as far as undercracker design goes.
10. MeUndies and Casper: Brand promise
Proper old-fashioned marketing now. Casper’s 100-night trial, complete with convincing moon-and-stars seal, really rams home just how great this product must be.
MeUndies also wants to convince customers that their outlay (this time on a subscription) is not a risky one, and does so with the offer of a free first pair if not completely satisfied.
11. MeUndies: Subs interface
Aww, look at those cute little icons of underpants. With any subscription service, users will at some point want to change their plan, and MeUndies, with its very visually salient interface, makes this easy. The ‘skip’ and ‘unsubscribe’ buttons are pleasingly easy to access.
12. Warby Parker: Instant search
Warby Parker doesn’t stock thousands of frames, and I’m sure users don’t search for a specific frame too often. However, that doesn’t mean the search function shouldn’t do a job. In this case, results appear instantly (with images), so there’s no need to hit return, and then wait for zero results to turn up.
For more on this see: What we learnt from adding responsive product search to an ecommerce website.
13. Casper: Copywriting
I had to include copywriting somewhere, and Casper is very good at it. Again, the price point dictates there’s a lot of persuading to do, and what better way than using the below copy.
There’s plenty of more technical copy, too, including rather nattily referring to the bed as a ‘sleep surface’, but I’ve just picked out some of the catchy stuff for your pleasure.
- ‘A life well slept.’
- ‘Often copied but never challenged.’
- ‘..flipping the industry on its head.’
- ‘Sleep on it, lounge on it, dream on it..’
- ‘So comfortable, you’ll forget it’s there.’
- ‘Cool by design.’
- ‘The sheets make the bed.’
14. Everlane: 1-hour delivery
A commitment that very few retailers can match. I’m sure this is very appealing to New York’s fashion-conscious and time-poor.
15. Warby Parker: Minimalist product page
The screenshot below shows everything above the fold on a Warby Parker product page (apart from the header menu). Talk about making the product the hero!
An enormous image carousel and a sky blue ‘add to cart’ button leap out at you. Below the fold there is more frame description and detail, but why sully the user’s appreciation of good design by putting any of that up here with the frame?
16. Everlane: Creative hover states
Hover states are nothing new in product listings, but I like the way that Everlane picks out product detail for tops and jackets, rather than the usual model shot. It really emphasises quality. For trousers, where fit is more important, the retailer does indeed to show a profile view of a model wearing the product.
17. Casper: Reviews get top billing
For a brand and a product that is synonymous with customer satisfaction, it’s important to get this across on the website. To that end, Casper includes reviews as one of only three options in the header menu.
And on the product pages, users get an idea of just how much customer love there is, with number of reviews and average star rating plain to see.
When the user looks at the review pages themselves, the layout is very clear, with a tab for each product and a call-to-action to shop.
Another nice touch, when I scroll down through the reviews, a menu bar sticks to the top of the page, telling me what product reviews I am looking at, and again allowing me to shop the product as soon as I have been convinced.
To top it all off, Casper has also incorporated reviews from other websites (Amazon and Google), using the graphic below on some of the scrolling product pages.
For more on this topic, read: Ecommerce consumer reviews: why you need them and how to use them.
18. MeUndies: FAQs
FAQs usually look boring, with some text that, if you’re lucky, includes an accordion feature allowing it to fold out or away.
I like the way MeUndies has decided to bring some fun (and visual saliency) to its FAQs with iconography and rollover blue highlights.
19. Everlane: Register to view product pages
You may already know that Everlane is rather exclusive, requiring customers to register before they can even view product pages (though they are free to browse category pages and see what’s on offer).
This is another neat growth hack – sure it may put some users off, but I’m guessing it also allows Everlane to spend less on retargeting, and more on effective email marketing.
20. MeUndies: Product selection
Just look at the lovely images below. This is what you get when you click through from a featured design on the homepage. It’s a simple and eloquent way to show the difference between the retailer’s core products.
And it makes me want to buy a wider range of underwear (branch out from the green Y fronts).
21. Warby Parker: Big product imagery
We’ve already looked at the product pages. Below is a screenshot from a page showcasing Warby Parker’s spring range. Again, look at how big the product imagery is. Just three images above the fold.
The company also uses video on this spring range page. Below I’ve captured a bit of it as a GIF, but the video is longer, and it is full page width. Video really helps to enliven listings for a product category that, as previously stated, can be monotonous. It also helps to sell the lifestyle, too.
22. Casper: Scrolling product pages with FAQs
Each Casper product page (mattress, sheets, pillow) is a scrolling experience that emphasises the thought that has gone into each product. What’s clever is that each page sells the dream and then if users want some more in-depth or technical information, they can choose to click on one of the features below, and more content will fold out.
You can see them in action here if you scroll down the page. I’ve sped up the blinking in the GIF below, the eyes are much less distracting in-situ.
23. Warby Parker: Really clear filters
From the ‘home try-on’ toggle, to the brand-coloured checkboxes and the informative reset button, Warby Parker’s product filters do the job very nicely.
24. Everlane: Factory features
Everlane is proud of its sustainable manufacturing and it showcases its factories with some very visual content. Each factory page (here’s the one for knits) gives me plenty of images, tells me how many employees work there, and how long they have been in production.
For quality-conscious and ethically-minded consumers, this is a great touch.
25. Warby Parker: Frame selector
A frame selection guide is fairly standard for eyewear websites. Warby Parker’s uses some folksy illustration and clear copy to point users towards frames that will suit.
As you can see below, the guide produces top picks and uses some jaunty/friendly copy to get you excited. Fairly unique to Warby Parker, customers can then add some frames to their home try-on box, and send back the ones that don’t fit the bill.
26. Casper: Van Winkles
Arguments about the effectiveness of content marketing aside (though I’d argue that in a category such as mattresses, content marketing is a smart idea), Casper produces its very own slick magazine about all things sleep.
Van Winkle’s is a WordPress-esque publication that looks great, emphasises the cool and smart credentials of the brand, and gives Casper much more to shout about in search and social.
27. Warby Parker: Culture
Lastly, Warby Parker has a page dedicated to company culture on its website. Aside from telling the user what Warby stands for, it also answers questions such as ‘How is it possible to sell high-quality prescription glasses for $95?’
For a challenger brand determined to offer something more personal than a typical high street eyewear chain, this information is important.