There are plenty of inspirational E-commerce Sites and these 12 were chosen for their clean design, great UX-Design or creative products. 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.
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.
Does the phrase “seamless experience” raise your blood pressure? If so, relax as it’s not as tricky as it seems. All you have to do is take one step back and focus on the desired outcome.
For example, if you already have a brick and mortar location make sure you integrate the experience from both channels. Try offering services where a user can easily return products purchased online to a retail store.
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.
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.
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 e-commerce sites to see what they’re doing well from a UX point of view.
How do these websites use clever UX design tricks to encourage their visitors to buy?
1.The Whisky Exchange
This site can do no wrong in my eyes because whiskey 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 flavor notes.
Apple may be an obvious choice for site design and UX, but I particularly like the 360 view option on its products.
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.
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.
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.
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)
During the checkout process, they give you the option to chat with 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.
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.
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 the confidence to buy.
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.
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.
Better yet, 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, showing customers all the unique features.
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.
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.
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.
This is a simple masterclass in UX design.
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.
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.
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.
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.
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. Once you’ve input your payment and shipping details you can make purchases with a single click of your mouse.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
10. 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.
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.
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.
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.
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.
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.
One great UX TIP:Make the checkout process and payments faster.
Have you given thought to make things as easy as possible for customers to pay? After all, this move leads to an increase in conversions and sales. Here are some pointers for making things easier for your customers to pay and increase sales.
- Provide numerous payment methods (e.g. debit or credit card, Apple pay, PayPal)- According to reports, 56% of respondents expect a variety of payment options on the checkout page.
- Do not force people to sign up; it’s a major conversion rate killer.
- Have a seamless look and feel on your checkout page.
- Offer a guest checkout experience.
- Minimal form fields (seriously, the less the better!).
- Stop sending them to other websites to pay.
- Provide reassurance on security and privacy.
- Add a clear call to action.
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 e-commerce sites on which there is enough information for me to make a fully informed buying decision.