18 E-commerce Sites With Flawless UX-Design (& 3 Big Names That Suck)

By    Last updated December 07, 2016   UX Design

6 0

If you joined us for for our UX article earlier this month, you’ll know that we discussed the 25 essential UX design elements for your website.

 

The basic idea is this: UX design is all about getting inside the head of your visitor. It’s about creating a simple, seamless, and enjoyable experience for your users. The idea is to deliver information quickly and even make them smile.

 

Good UX design sparks dopamine and happiness in your visitors. And that makes them more likely to trust you. Crucially, it makes them more likely to buy from you.

 

After going over the 25 basics in our last UX design article, let’s take a look at how it works in action. Specifically, we’re looking at the UX design of e commerce websites.

 

How do these websites use clever UX design tricks to encourage their visitors to buy?

 

 

1. Asos

 

I use the example of Asos a lot, but there’s a good reason for that. Their UX design is brilliant.

 

It all starts with a knock-out value proposition. Great image, simple explainer, the ‘free delivery’ guarantee, and the obvious calls to action directing you to the men’s or women’s section.

 

 

asos2

 

 

One of their standout UX features is the video catwalk, so visitors can actually see what an outfit looks like. It gives customers the best possible view of the items, and gives them confidence to buy.

 

They also have an excellent new feature called ‘quick view’. On their product page, you hit ‘quick view’ and a small pop-up appears with extra images and all the info you need. It saves the customer clicking back and forth to different pages. Simple, intuitive design.

 

 

asos

 

 

2. Zara

 

Zara’s website is a masterclass in simplicity. Clean, intuitive and limited. It’s an ode to Hick’s law: a design principle that limits navigation choice and gives the user clear but restricted options.

 

The idea is that too many options will overwhelm your visitor. By offering fewer choices, they feel more confident. We’ll look at more excellent navigation throughout this post, but Zara’s is one of the best.

 

 

zara

 

 

3. Abof

 

Abof (All About Fashion) uses a devlishly clever UX trick on their website. Hit up the homepage, and it doesn’t look like a traditional e commerce site. Instead, it looks more like a blog. It’s full of juicy content that inspires its audience.

 

 

abof

 

 

Within their stories and articles, they then highlight the clothes in a prominent section called ‘Shop the story’. In our previous UX article, we talked about the importance of creating a relationship with your audience. Abof does this perfectly with relatable stories and content.

 

 

abof 2

 

 

Only once the customer is inspired do they try to sell something.

 

On their product page, they have useful ‘style tips’ notes, which are perfect examples of ‘micro-interactions’ – small nuggets that reach out and engage your audience.

 

 

abof 3

 

 

Notice they also having a ‘size guide’ to help customers get their exact measurements right (the fear of clothes not fitting is one of the biggest reasons we abandon shopping carts). They also use an ‘estimated delivery’ section to give customers even more information.

 

 

4. Berghaus

 

Berghaus is an outdoor clothing brand, but you’ll know that within the first second of landing on their site.

 

 

berghaus

 

 

This is a brand that intimately understands its target audience, and makes sure to connect with them as quickly as possible. The first hero shot is an inspiring invitation. It connects with the community and entices you in.

 

The only downside? A stronger call-to-action would really seal the deal here.

 

 

5. Apple

 

You’d expect a company that puts design and innovation at its heart to excel at UX design, and they do. Check out their product pages for a start.

 

They use parallax scrolling to make the images dynamic, drawing the user in, and eliminating any exit points. You’re immersed in the world of Apple.

 

 

Screen Shot 2016-07-28 at 8.43.00 AM

 

 

Clever animations show you exactly how the products work, like the new 3D touch. Scrolling galleries invite you to interact and explore, and clever copy tells you exactly how the new iPhone will improve your life (rather than a long spec list of features).

 

Their navigation is simple and clean, and I love their use of images to further differentiate the options (we scan the web, so words have a habit of blending into each other)

 

 

apple 2

 

 

During the checkout process, they give you the option to chat to a specialist while buying. It’s a simple but useful trick. It gives newbies some help over the line, but doesn’t impede confident buyers from getting their credit card out.

 

 

6. Bellroy

 

As a relatively new e commerce seller, your first task is showing customers how you’re different to everyone else. Bellroy does this perfectly with their range of slimline, compact wallets.

 

 

bellroy 3

 

 

Better yet, on its product pages, every single wallet has its own video, showing customers all the unique features.

 

 

bellroy 4

 

 

7. Rent the runway

 

Rent The Runway has a pretty unique concept: you borrow a dress or outfit for a few days, rather than buying it. This is great for weddings or events where you don’t want to shell out for an outfit you may never wear again.

 

The website introduces the concept simply, and then invites user interaction, prompting them to choose the occasion.

 

 

runway rent

 

 

Extra marks for their delivery calendar too, letting customers know exactly when the outfit will arrive and when it needs to be returned.

 

 

runway rent 2

 

 

So simple, but so reassuring.

 

 

8. Amazon

 

Amazon is the biggest e-commerce website in the world, and quite frankly one of the best. You could pick any one of their features as an example of UX design.

 

From their clever bundles to their customer recommendations, they anticipate their users’ needs and deliver. However, it’s their one-click order system that we’re highlighting today.

 

 

amazon

 

 

It’s still the best example of check-out efficiency on the web. At the core of e commerce UX design is the cart and check-out process. The smoother the better. And it doesn’t get smoother than one-click ordering!

 

 

9. Graze

 

An image that tells you everything you need to know. Wording and design with a personality. An immediate discount for new users, and a big, bold call-to-action.

 

 

graze

 

 

This is a simple masterclass in UX design.

 

 

10. TopShop

 

Shops that sell a lot of products have a much harder job when it comes to UX design. How do you organize every different pair of jeans and present them?

 

Luckily, TopShop has a great plan. With a big, chunky filter dial that floats with the page, you can constantly tweak and change the style, colour, fit, and price of your products.

 

 

Topshop 2

 

 

Even cooler, every product switches to a picture of the model wearing them when you hover over with your mouse. It encourages interaction and gives customers a better look at the items.

 

 

11. Protest

 

Protest might just have the biggest, fattest navigation on the web.

 

 

P

 

 

It’s clear, succinct, and uncluttered. It also reduces the chance of the customer wandering off. The blue colour keeps the customer’s attention right where they want it.

 

Protest also uses a ton of tiny animations across their site. Each one triggers when you scroll over it. It retains customer attention, encourages interaction, and makes the whole site feel dynamic.

 

 

12. New Look

 

New Look gets a place on the list for their innovative basket. It sits on their navigation bar at all times with a bold indicator to remind you it’s there.

 

 

New Look 2

 

 

When you click on it, it doesn’t drag you away to a different page. Instead, you get a sliding panel moving in from the side to show you what’s in your bag. It means customers never get lost, and they can easily checkout whenever they like.

 

 

New Look

 

 

13. Pencil, by 53

 

If you’re going to sell a stylus pen at nearly $60, you’ve got to really sell it! Luckily, ‘Pencil’, by 53 does an excellent job, using a number of UX design tricks.

 

They use a long, parallax scrolling page to explain all the features and show you exactly what you can do with it.

 

 

pencil 2

 

 

They also capitalize on great reviews to explain why they’re so much better than the other options out there. Using a quote from ‘Wired’ is a brilliant trick to give the product credibility and outline its benefit.

 

 

Pencil

 

 

14. Farmdrop

 

In our last article on UX design, we explained how important it is to empathise with your target audience, and connect with them. Farmdrop does this by putting their mission statement front and center.

 

 

farm

 

 

They’re ‘sick and tired of seeing food sourced from miles away’. That’s something that most customers can get on board with. Before they try to sell you anything, they connect with you, and give you a reason to buy.

 

 

15. Sid Mashburn

 

Just another great drop down menu, complete with small icons. It’s a simple trick that helps us make sense of an extensive menu. Plus, it gives the website a little more personality.

 

 

icons

 

 

16. Slow Watches

 

This is a watch with just one hand. It’s a pretty unique concept, so it takes some explaining! Slow Watches does this really well with a full screen explainer video.

 

 

slow watches

 

 

As well as explaining the concept, they also talk through their philosophy behind creating it (great for connecting with the customer), and they use beautiful images that highlight and target their ideal audience.

 

 

17. Firebox

 

When your items don’t fit into normal categories, get creative! Firebox specialises in unusual gifts and irreverent items. Their top 50 chart is the perfect way to explore their most popular products.

 

 

images

 

 

The box layout is great for browsing quickly through products, and many of the images are dynamic, moving and interacting with the customer.

 

Since they specialise in gifts, they also have a ‘gift finder’ on their nav bar, a fantastic way to narrow down the options.

 

 

18. Lazy Oaf

 

Online shopping often feels quite samey, and many will miss the old process of flicking through a magazine or catalogue.

 

Lazy Oaf brings this back with their cool ‘lookbooks’ section. Rather than laying out the clothes one at a time, they show the outfits in various combinations all at once. After all, that’s how they used to look in a catalogue.

 

 

lazy oaf

 

 

Click on the images and you get a ‘quick buy’ box to choose each of the three items on show. It’s a more old-school and immersive way to shop.

 

 

What not to do!

 

We don’t like to rip other websites to pieces, but there are some big names out there getting it all wrong… Here are one or two of the worst offenders.

 

 

1. House of Fraser

 

They’re one of the biggest department stores in the world, but they make one huge mistake as soon as you load up their website.

 

Straight away you’re hit with a full-page pop-up asking you to subscribe to their newsletter.

 

 

Hourse of Fraser

 

 

Even though they’re a big name store, it’s a very pushy tactic that will put most shoppers off. Remember, this is the first impression. It’s much better to create a user journey that educates and inspires your visitor before asking for an email address.

 

Not only that, but there is no real incentive to sign up to their newsletter. A discount of voucher code would be a great option here, and might help customers forgive the invasive popup.

 

 

2. Wal Mart

 

Wal Mart has a tough challenge. They sell pretty much everything, so how do you go about categorizing it and making it simple? Well, I’m not sure… but not like this…

 

 

wall mart

 

 

Unfortunately, this is just a mess of categories that’s almost impossible to find what you’re looking for.

 

There is simply too much information going on here. When you present your users with too many options, they often just panic and leave.

 

 

3. Ray-Ban

 

This is a slightly mean choice, because most of Ray-Ban’s website is very user friendly. In fact, it has a ton of cool features.

 

However, they do something that a lot of e-commerce sites do that really annoys customers. This:

 

 

ray ban

 

 

You’ve probably seen a page like this a hundred times. It doesn’t seem so bad, but it actually creates one more barrier to the sale.

 

If you are a returning customer, you’re now busy wondering what password you created. If you can’t remember it, you’re going to have to go through the whole ‘forgotten password’ process. You could lose that customer at any point…

 

If you’re a new customer, there’s a guest checkout, sure, but all you’ve done is give them another button to click. Another chance to click away.

 

At this point, your customer is completely disconnected from their cart and the buying process. Don’t drag it out, just lock down the sale!

 


 

Great UX design is all about the little tweaks that make things easier for your customers. These 18 websites do it perfectly.

 

Which features will you be using on your own website?

 

Ben Brown

Ben is a copywriter and editor from London. His work regularly appears in The Huffington Post, and he has worked on several successful copywriting campaigns for Sony UK. Feel free to connect with Ben via Twitter.

Like What You've Read?

If so, please join over 5,000 subscribers who receive update from Bitcatcha. We send out exclusive online business tips and tricks on building a successful online business. Subscribe now!