Seven super-simple ecommerce experiences Distraction-free online retail experiences to guide your visitors smoothly to checkout

minimalist cassette tape

A few months ago, we published our top ecommerce trends of 2017, which featured some of the things we’re seeing (or would like to see) incorporated into online retail sites. In this round-up, we’re going to delve deeper into one of those trends: simple, smooth, distraction-free ecommerce experiences.

What do we mean by ’simplicity’ in ecommerce?

Patrick Foster elaborates fully on what he means by ’simplicity’ in ecommerce UX in his original article, but I think he would appreciate the appropriateness of distilling his words into even easier to read bullet points:

  • Reduce the options and distractions
  • Make calls to action clear and concise
  • Give your visitors exactly what they need
  • Make it really easy for them to access the information
  • Gently nudge them down the right path

And here are some ecommerce sites that I believe achieve all or some of these points during at least one part of the customer journey…

Mondo

The Austin purveyors of strictly limited edition pop culture prints, records and toys you wouldn’t let your children within a 10 foot radius of, have completely stripped their site down to the bare essentials.

The focus is on the product, with only a maximum number of three items featured on the homepage…

mondo homepage

The add to cart CTA only appears when you hover over the item, so the product image remains uncluttered until you’re ready to buy.

Mondo add to cart

The shopping cart employs only high contrasting black, white and red buttons, links and hover states to keep any ambiguity to a minimum.

mondo shopping cart

Once you’re through to the checkout, it’s a distraction free Shopify experience, with clear indication of how many stages you can expect. Options for subscribing to a newsletter or saving information are opt-in only, and there are no unnecessary fields such as gender.

mondo checkout

And if you want to avoid all of this, you can just use the PayPal One Touch option, presented on the cart page.

mondo payment options

Threadless

Treadless has thousands of different clothing designs in various different configurations, products, sizes and colours, so you can imagine that keeping things simple would be an impossible task. But where Treadless excels is, when you’ve chosen your design (whether through search, filters, or menus) you don’t have to leave the product page to see how it looks as a men’s t-shirt, a woman’s tank-top or iPhone cover.

The lengthy gif below shows how straightforward the process is, as well as highlighting the CTAs, and my favourite ever ecommerce feature – the carty belly.

Threadless product page gif

Firebox

We’ll talk about awesome product copy in another round-up, but Firebox are a good example of delivering key-bullet points covering exactly what you need to know about the product at a glance (mixed with some welcome humour) in order to aid a speedy, yet informed, purchase for the in-a-hurry customer. And if you need more information, or just love killing time, you can scroll further down the page.

firebox product page

Rough Trade

Record stores have a difficult time translating the pure-nerd-joy of flicking through racks of vinyl to the online world. Most record websites are a mess of promo messages, new releases, old favourites, store recommends, special offers, gig listings… and that’s before you get to the endlessly complicated question of categories, sub-categories, genres and sub-genres.

The Rough Trade website looked like this in 2014, and to be honest it was one of the better examples…

Rough Trade website in 2014

Now however, Rough Trade looks like this…

rough trade website redesign

They bravely stripped everything down to four main categories, beginning with ‘New Releases’ – clearly date stamped and letting the artwork speak for itself (as it would in-store).

Then you have ‘Pre-orders’, ‘Exclusives’ and the all important ‘Essential’ category, where the Rough Trade staff curates and recommends their favourite classic albums – much like you’ll find in any record shop.

rough trade website redesign

And that’s it. Just four categories, a constantly visible search box and your shopping cart. There are no endless subgenres to get confused by, or competing marketing messages. Essentially it’s saying “here’s what’s new and here’s what we like.”

Lush

It’s generally perceived as a good idea to ensure every product on your site is well-represented by photography, taken from every possible angle in any practical context. But what do you do if your products are lotions and creams? How do you make these products come alive in a useful manner on your site – while also providing an uncluttered experience?

Check out Lush’s use of video on its product page, and its simple information box…

LUSH product page video

Mulberry

As Econsultancy’s David Moth pointed out in his review of the new Mulberry website, the fashion company has proved that delivering user experience and luxury products are not mutually exclusive.

Check out how the minimalist category page shows a view of the product as it looks on a model (and its relative size) when you hover over the image.

Mulberry product category page

Mulberry also operates a guest checkout (with option to save details after purchase) and a single-page checkout for optimum speed and efficiency.

Waterstones

As soon as you hover over a book cover in the product listings, there are options to either ‘add to cart’ or ‘click & collect’. If you press ‘click & collect’ you’re immediately presented with a search box to check stock in your nearest store. And for added convenience, you can click the ‘use my location’ button for immediate geolocation thrills.

waterstones product page

waterstones click and collect

The pop-up then reveals the nearest stores that have the book in stock, and tells you what time they’re open till today.

waterstones click and collect

And then finally, Waterstones asks for the bare minimum information to reserve your book. No credit card, no address, no unnecessary titles…

waterstones click and collect

The only thing I could say to improve it, is put the ‘preferred contact method’ option first, then only demand either a mobile number or email, instead of both.

If you have any more examples you admire, please let us know in the comments below…

Get a newsletter that isn't all about us...

Subscribe for weekly, hand-picked articles about UX, design, and more every Friday—from the Be Good to Your Users blog and the rest of the whole darn web.

...get a little taste right here. 👅 🍭

Main image by Imani Clovis

Christopher Ratcliff
Christopher is the Content Marketing Manager of WhatUsersDo. He's also the editor of wayward pop culture site Methods Unsound. He used to be the deputy editor of Econsultancy and editor Search Engine Watch.

Leave a Reply