It’s a great time to be a consumer. With so many buying options, retailers have to work harder than ever to give people good value and even better service. 

For retailers, however, the challenge lies in giving potential buyers the best possible user experience (UX) to ensure they make it all the way to the checkout. 

I’ve taken a look at some successful ecommerce sites to see what they’re doing well from a UX point of view. 

Graze

There are plenty of positives here. The page is sleek and visually pleasing, with nice product imagery. But more importantly there is a really simple explanation of what the company does.

One of my biggest pet hates on any website is when it’s not immediately clear what the point of it is, and Graze definitely doesn’t fit into this category. 

Graze UX

Another fantastic piece of UX on the Graze website is when it comes to choosing your product.

It could not be simpler: three options, with a brief explanation under each one, along with some nice imagery. If there are too many options the customer could get confused or frustrated and end up looking elsewhere. 

Graze UX

Gramography

Gramography is Firebox’s new sister site, and it enables you to log in with your Instagram account and order personalised products using your Instagram photos. 

As I mentioned in the above subheading, I’m a big fan of sites where it’s immediately obvious what the business does. Gramography certainly ticks that box with its homepage.

Gramography UX

Once you’ve logged in, the UX gets even better. You can go into the shop and see your own Instagram photos on the product images (that’s me getting silly on my stag. And that’s a man expertly playing the traffic cone on Oxford Street). 

This is a nice touch because you don’t have to just imagine what the product might look like based on somebody else’s photos. Again, this is likely to increase buyer confidence and make the products more appealing. 

Gramography UX

The Whisky Exchange

This site can do no wrong in my eyes because whisky makes my mouth do a massive party. But the site happens to have a lot of great UX design elements, too.

I particularly like the taste guide it has on the individual product pages, telling the buyer everything from sweetness levels to flavour notes. 

The Whisky Exchange UX

Amazon

There are a hundred tips you could take from Amazon’s website, but one thing I really like is the way it sorts its reviews. 

The reviews themselves are rated as being helpful or unhelpful, and then ranked in order of helpfulness. 

This is useful to customers because it filters out the useless information and lets them see the most relevant and helpful reviews immediately, with no effort required. 

Amazon UX

It’s worth mentioning Amazon’s ‘1-Click’ ordering button, which is something I personally use a lot. Once you’ve input your payment and shipping details you can make purchases with a single click of your mouse. 

This ultimately makes customers’ lives easier and considerably shortens the distance to the checkout page so there is less chance of basket abandonment. 

Amazon UX

Farmdrop

Farmdrop’s homepage uses eye-catching imagery and simple copy that immediately tells you what the site is for.

There are only two options for the user at this stage: explore the shop or find out more. This provides the customer with a straightforward journey and guides them towards the purchasing stage. 

Farmdrop UX

When you click on the ‘find out more’ button the page scrolls down to a nicely illustrated explanation of what Farmdrop actually does. Again, there are two options: go to the shop or find out more.

Farmdrop’s approach is very clever here. Some people just want to get in and buy something, whereas some people appreciate details. Farmdrop caters for both groups here. 

Farmdrop UX

Asos

Buying jeans that fit properly can be a nightmare, particularly online when you can’t try them on. 

Asos has got around this in its jeans section, providing really clear images of the different types of jeans and how they look. There’s even a video explanation from an Asos stylist.

This type of detailed information makes the buying decision much easier for the consumer, so they are likely to feel more confident completing their purchase.

Asos UX

Vertty

This site only sells one product, but the UX is fantastic. 

Vertty keeps things very sleek and straightforward, letting you flick between all the different colour options and showing you all the key information when you hover your mouse over the product. 

This type of site is effective because it focuses on the product and avoids unnecessary distractions, so the customer is exactly where you want them to be. 

Vertty UX

I also love the page that appears when you click on one of the towels. You get a nice image showing what the towel would look like on the beach, and the background colour changes depending on which product you select. 

Vertty UX

Mulberry

I’ve included Mulberry because of its simplicity. Gigantic product images and easy navigation make this site a pleasure to use. 

Mulberry UX

Oliver Bonas

Oliver Bonas has a brilliant personalisation section on its site. The imagery is crystal clear and the options on the right are straightforward and easy to use. 

Another nice touch is that you can view lifestyle shots of the necklace, so the customer can see what the jewellery looks like when worn.

Oliver Bonas UX

Bellroy

I’ve included Bellroy for its use of video on its homepage. In each group of images there is a short video explaining all the features of the product. 

Apart from the videos themselves being really nicely put together, this type of content appeals to certain people and lets consumers see the product in a different light and ultimately makes the purchasing decision easier. 

Bellroy UX

Another feature I like is the navigation bar at the top of the product pages. You can choose between general lifestyle categories such as ‘every day’ or ‘for travel’ to get product types. 

This is helpful for customers because they can very quickly get to what they want without having to know much about Bellroy’s products beforehand. 

Bellroy UX

Apple

Apple may be an obvious choice for site design and UX, but I particularly like the 360 view option on its products. 

Unlike some other sites there’s no need to drag the image around. All you have to do is hit play and watch it go.

Effectively this is the same as providing multiple stills from different angles, but presented in a way that makes it easier for the consumer. 

Apple UX

Dollar shave club

I really like the product selection page on this site. You get a choice of three blades, with all the basic information you need. 

Dollar Shave Club UX

If you click ‘learn more’ you get even more product information and multiple images from different angles, presented in a simple and stylish way.

Dollar Shave Club UX

Hardgraft

I’ve chosen this for the product selection page. It’s completely image-based in a simple grid format. 

For a fashion and lifestyle brand this is perfect, because the way the products look is the customer’s main concern. The grid format also makes it ridiculously easy to navigate through the products. 

Hardgraft UX

AO

The first thing to note about AO’s UX is the amount of information on its product pages. 

There are a huge number of images from every angle you can think of, along with some helpful video guides, making it really easy for the buyer to know what they’re getting.

AO UX

I also have to mention the reviews section on this site. It is incredibly detailed, with ratings under six different relevant sections, and customers can list pros and cons along with their full review. 

All of this is key to helping buyers feel more confident making a large purchase online. 

AO UX

Argos

One thing Argos has always done well, ever since the days of the Laminated Book of Dreams, is provide user-friendly buying guides for its customers. 

Argos has always had to do this because even if you buy in-store you usually can’t see what you’re buying before you’ve paid for it. So buying guides have always been a way for Argos to help customers make the right decision. 

Argos UX

The Q&A section on the Argos product pages is also a great feature, adding user-generated content to give the buyer useful information that might have been missed elsewhere.

Argos UX

Hunter

One thing I really like on the Hunter product pages is the fact you can scroll through the product images using your mouse wheel. 

It’s a minor touch but it’s little things like this that make a website generally more of a pleasure to use, which means customers are more likely to bother making their way to the checkout. 

Hunter UX

Conclusion: make people’s decisions easier

Never mind ‘innovative’ web design, the thing that people really want is helpful information. 

Speaking as a relatively indecisive consumer myself, I always appreciate ecommerce sites on which there is enough information for me to make a fully informed buying decision. 

For something a bit more subtle, check out these 12 tiny UX elements that can make a difference. 

Jack Simpson

Published 23 July, 2015 by Jack Simpson

Jack Simpson is a Writer at Econsultancy. You can follow him on Twitter or connect via LinkedIn.

252 more posts from this author

You might be interested in

Comments (12)

Comment
No-profile-pic
Save or Cancel
Sam Swanson

Sam Swanson, Volunteer at Paddle Round the Pier

no way are fresh eggs that clean :)

over 2 years ago

Peter Harrington

Peter Harrington, King of the Mountains at Always Riding

Praising Amazon for one click is rather like praising an Ogre for having a massive knobbly head.

Congratulations ogre, what a massive knobbly head you have.

This is not so much an innovation as a growing embarrassment to the US patent office, whose decision to award a patent on what should be a default function of ecommerce, is brought into sharp relief by the ascendancy of ecommerce, and seems more ridiculous each day.

Reward sites for doing things well, but not for unfairly awarded competitive advantage.

over 2 years ago

Avatar-blank-50x50

Dave Harris, Job Title at SMD

@sam True, but will your generic urbanite buy dirty eggs? It's part of an on-going CRO - this test, where the image of clean eggs in farmer's hands handily beat the one with dirty eggs held by a hand model.

over 2 years ago

Avatar-blank-50x50

sebastien fabri, Doh! at Duh!

You should really put a link in the images to the websites you're reffering to.
It's super frustrating not being able to click on it :(

over 2 years ago

Rachael Lawson

Rachael Lawson, Copywriter at Harvey Nichols & Co LTd

Speaking of UX, wish the sites mentioned had been linked to so we could click to view them in all their glory...

over 2 years ago

Jack Simpson

Jack Simpson, Writer at Econsultancy, Centaur Marketing

@Sebastien and Rachael - duly noted and fair point. I'll add the links in now :)

@Peter - I appreciate what you're saying and I agree with you to a certain extent, but that doesn't detract from the fact that one-click ordering in itself is a decent piece of UX design.

over 2 years ago

Avatar-blank-50x50

Elisa Bal, UX architect at Personal

InFarmdrop, there are no filters and no sorting. If you search eggs, 115 products come up. How can you find the eggs you want? Even though the illustrations are nice and the design is pretty cool, I don't see how this website can be considered a good one. I personally find this benchmark superficial and inconsistent: you say in the conclusions that "Never mind ‘innovative’ web design" as people want useful information and then, it's all mostly about just cool design and poor IA.

about 2 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@Elisa I agree, filters should be used to make product selection easier, and this is one way for Farmdrop to improve. Just to be clear, we're picking out what we think are useful features from sites, we're not saying these sites are the best out there.

about 2 years ago

Avatar-blank-50x50

Elisa Bal, UX architect at Personal

@Graham, sorry but this is what I read in this article about Farmdrop: "straightforward journey and guides them towards the purchasing stage" and "purchase stage" usually means that you have to find what you want before purchase it. So the finding experience should be considered before writing such words. Of course these are not best sites ever, but if you highlight something good I expect this to be true, especially taking into account the conclusion you draw, as I said already.

about 2 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

I think Jack is clearly highlighting the scrolling homepage which explains the brand and proposition rather than the filtered navigation (or lack of).

about 2 years ago

Avatar-blank-50x50

Jack Law, Owner at Self-Made Bags

I am trying again...my previous message was not posted.
So, I was saying thanks for the comprehensive article, I found many valid points that I should use for my site. (https://www.self-madebags.com).If you guys have further comments, please feel free to let me know. Cheers!

about 1 year ago

Avatar-blank-50x50

Emma Labrador, Marketing manager at Cogniteev

Hi Jack,
We have just linked back to your article in our last post (http://www.oncrawl.com/put-seo-online-store/) because it is a nice addition to our readers. Thought you would be interested to know :) Best

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