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.

everlane header menu 

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!

delivery

B. This image is intended to portray the quick (and magical) unrolling/expanding process, once you get your mattress out of the box.

mattress unfolding

C. This is my favourite, selling Casper's sheets. It brings to mind cool and airy sleep on a spring morning.

sheet in window

D. Very funny.

cool side of the pillow

E. Such a simple and creative idea - photographing the bed from above.

overhead bed

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.

everlane transparent pricing 

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).

classic meundies 

meundies bold

adventurous undies

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.

staff pick

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.

bold typography everlane

bold typography everlane

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.

form field register

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

everlane referral

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.  

everlane referral

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.

referral meundies

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.

videos meundies

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.

guarantee casper

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.

meundies promise

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.

meundies

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.

search warby

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.

everlane delivery

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?

warby product page

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.

hover states everlane

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.

casper reviews 

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.

reviews home casper

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.

reviews page

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.

3rd party reviews

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.

faqs

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.

everlane account 

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).

cantaloupe undies

meundies underwear page 

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.

warby frames

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.

warby gif  

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.

eye gif

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.

filters warby

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.

frame selector

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.

top picks warby

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.

van winkle's

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.

That's the end of my roundup. Disagree with me about any of the features I have mentioned? Have at it in the comments below.

Subscribers can download the Econsultancy User Experience and Interaction Design Guide.

Further reading:

Ben Davis

Published 8 March, 2017 by Ben Davis @ Econsultancy

Ben Davis is Editor at Econsultancy. He lives in Manchester, England. You can contact him at ben.davis@econsultancy.com, follow at @herrhuld or connect via LinkedIn.

1131 more posts from this author

You might be interested in

Comments (8)

Comment
No-profile-pic
Save or Cancel
Joe Pendlebury

Joe Pendlebury, Senior Mobile UX Architect at Next plc

Excellent write-up, Ben, with some great examples. Warby Parker are doing some awesome stuff across their digital channels, as well as in-store. Another prime example, is when viewing a Product Details Page (PDP) on a smartphone. Tilting the device, rotates the model's head in the same direction, allowing you to see the frames being worn by the model, at a multitude of different angles. Excellent feature.

I highly recommend Chubbies Shorts (www.chubbies.com). Some fantastic micro-interactions to be found there. Likewise, Stadium Goods (www.stadiumgoods.com) is another good example - great on-site search implementation, on desktop.

9 months ago

Ben Davis

Ben Davis, Editor at EconsultancyStaff

thanks, Joe. Will check them out.

9 months ago

Avatar-blank-50x50

Grahame Palmer, Marketing Director at All Things Ecommerce Ltd

Site structure depends a lot on what the retailer is selling. But key to the UX is the speed at which the visitor understands its functional logic and how quickly the navigational hierarchy is determined. Top-quality imagery and content is a given... any site that uses sub-standard images will struggle, and the capacity for the images to convey the product's features and benefits is also essential.

We are finding that the biggest drivers to the stores we operate are search engine results. Google is increasingly delivering product-specific URL's in the results - a consequence of embedding schema.org structured meta-data into the web pages. So our visitors are getting directly to the product(s) they are searching for, without either landing on - or even visiting - the sites' home pages. Our page analyses show that about 67% of our shoppers land on product/category specific pages from search results and of all visitors, some 52% never even navigate to the home pages. This is an increasing trend. A year ago, over 80% of our sessions started at the home pages. Our average pageviews per session is around 13, and time-on-site (again averaged) is nearly 4 minutes. Conversion rates are around 72%.

We therefore structure our home pages to illustrate categories (departments), where the objective is to show visitors a "map" of how the stores are laid out - much like the floorplans one sees at the entrances to conventional bricks 'n mortar shopping malls. We believe that people have a very clear idea of what they need/want BEFORE they even get to our websites (hence their Google search), and by getting them there within one or two clicks, we provide the essential speed and accuracy in reaching the desired product(s).

By using some discreet up-sell and cross-sell techniques (embedded into product pages) we can entice them to browse further. This is working - evidenced by the number of page-views per session and time-on-site.

We attribute this more focused targeting to the improved capacity of Search Engines to read the schema.org meta data, and render search results more accurately.

UX is not only about the visual cosmetics (important though they are) but a much more complex application of technical functionality that rapidly gets a customer to where they expect to be, and thereafter facilitating a smooth and fast shopping experience that is easy, intuitive and unobtrusive.

9 months ago

Avatar-blank-50x50

John Lewis, Director at VFC

What is good UX? One component is visual but in working with companies (e.g. boohoo.com - who I think are pretty good) as Grahame says, it is more than visual and dependent on two other factors. First - the capability of all the ecommerce/IT systems to generate up-to-date information e.g. stock levels and second, on the way that UX is actually developed - using a rapid (agile) develop - show - develop approach.

Unfortunately many UX designers don't understand business needs and what the IT systems can and cannot do.

9 months ago

Ben Davis

Ben Davis, Editor at EconsultancyStaff

@Grahame @John I completely agree. Look at a retailer like RS Components - the most important task by far is making products discoverable, easily re-orderable, comparable etc.

https://econsultancy.com/blog/67239-the-ultimate-ecommerce-cro-ux-case-study-rs-components/

In this post I was just looking at some more aesthetic/design touches (though not all of them are), as I really do think that part of being a disruptive brand (particularly pureplay with smaller product range) is in having a website that tells the story, too.

9 months ago

Avatar-blank-50x50

John Lewis, Director at VFC

@Ben - I should have added a third point which is that, even if something is technically possible, it may not be desirable from a business perspective. Consider a customer with a click and collect store 5 miles away. The item is not in stock at that store, not available in the warehouse but is available in another store 30 miles away. The stores are on the same delivery route so theoretically the wanted item can be picked-up on the delivery round, and transferred to the customers local store. But,

1. Does it make economic sense?
2. Can the systems make the decision in the short-time required to advise the customer? I go into that scenario in a bit more detail in this article - http://wp.me/p7MvnT-1a

One UX gripe I have had for years is that many companies still list countries in English - few get it right - as far as Germans are concerned they don't live in Germany, they live in Deutschland. Zara gets it right - Marks and Spencer don't (but they do have a flag) and with the amount of money they have spent on their ecommerce systems they really should get it right.

9 months ago

Ben Davis

Ben Davis, Editor at EconsultancyStaff

@John some interesting points, thanks for the link

9 months ago

Vinish Garg

Vinish Garg, Co-founder at vhite

I really like how Casper positions itself as a brand.
PS: UX is one of the steps in delivering brand promise although an important one. The real parameter is a holistic customer experience (did I say NPS?).

9 months ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.