UX is extremely important for any kind of online activity, but when you add in the huge amounts of money up for grabs in the e-commerce UX world, you have a core ingredient that can single-handedly make the difference between a best-selling product and a total flop.
And when you’re looking to learn how to spot the elements that set a great UX apart from a terrible one, it’s best to look to examples for inspiration… so let’s do just that! Here are 7 examples of outstanding e-commerce UX work:
I don’t know if I’ve ever seen a content-complete retail layout as clean and crisp as UgMonk’s. Everything is perfectly sized and spaced-out, and when you get to a product page, you see the little nuances that add so much, like how the product information stays in place as you scroll through the photos but moves out of the way when you reach the reviews, or how the cart pops up in a sidebar to make it so easy to head to the checkout.
Even on the homepage, you can see the available sizes provided as a tasteful overlay when you hover over an item, and when you go to the full sizing pop-up, it actually provides a photo of the product being modelled with the model’s height listed for extra clarity.
Graze has nailed the art of providing great options. The site is so colourful and vibrant, and it offers such satisfaction in selecting the type of box you want and customising your experience that it all feels premium despite being a modestly-priced service. Go through the process and see how smartly it uses coloured text. Personalisation is a big UX winner.
Everything from the resolutely lower-case lettering to the stylised art provides an atmosphere of playfulness and childlike wonder that makes the site a joy to use even if you’re not planning on making a purchase. It’s been a while since I got a Graze box, but just visiting the site makes me tempted once more!
I love the long-form page layout used on the Minaal site. As you scroll down, you’re provided with just what you’re most likely to be looking for. You find recommendations and praise from leading media outlets to confirm that it’s a company you can trust, a specific product highlight to solidify the product type, user testimonials for social proof, and then a set of discounted bundles perfect for those ready to buy and looking for the best deals.
But it doesn’t stop there. It continues to more granular highlighted products for those seeking something more specific, a newsletter signup promising “exclusive deals, stories from the road & $20 off shipping” (not a bad offer), and an appealing Instagram feed of products in situ and gorgeous shots of life on the road.
No piece about flawless e-commerce UX is complete without a mention of Apple. It’s really led the online retail world by being so remarkably great at every aspect of the sales process. The trend of leaning heavily on negative space, being bold and sparse with colouring, focusing on high-quality imagery above all else, and making the UX communicate the luxury of the products was really kicked into high gear (if not started entirely) by the Apple team in the times surrounding the introduction of the iPhone.
These days, the Apple team know exactly what they need to say and what they can leave out— and they’re masters of brevity. “Say hello to the future” is all they need for the iPhone X lead. Everyone knows what the iPhone is by now, after all.
Modkat is a company that sells designer litter trays, and it communicates everything so well. Like Apple, it knows what it doesn’t need to say, and it lets the imagery do all the talking. When you see a cat in a litter tray with a price tag, you don’t need to wonder if the cat is for sale.
Scrolling down, you see three boxes: a product highlight, a link to liners, and a comparison. The first is clear through the imagery, the second through the text, and the third through both. It’s impressive that the Modkat team managed to get a photo of a cat looking so contemplative! In fact, the inclusion of a cat in every relevant product shot is a huge factor— it might sound like an obvious thing to do, but plenty of companies wouldn’t have bothered.
If you want to know how to get a landing page just right, look at the Athletic Greens homepage. You have the hero image with bold, punchy text and a CTA that understands user intent beautifully (“Get Your Greens”), then proceed to exclusive recommendations from notable figures, then in-depth product copy, then a crisp graphical representation of ingredients, then more detailed quotes from the aforementioned figures, and it keeps going…
A company story, user testimonials, a cost comparison, a taste comparison, a confident “Don’t buy if” section, a three-step process, another CTA, and a final reassurance that the product can be trusted. Meanwhile, the navigation bar stays at the top with a CTA of its own. It’s great work. All the user’s questions and concerns are anticipated, understood, and addressed.
I picked Choose Muse for its above-the-fold content before I even scrolled down the page: it’s that good. While a video of the product being used plays in the background, you get to click through an explanation of why the product exists, what it does, and how you can use it. Down the page, of course, you find the mandatory social proof, recommendations and reassurances.
With a bold red CTA at the top of the page promising a money-back guarantee, you can learn about the product, decide you want it, and convert, all without leaving the above-the-fold content. That’s great design work, and it plays just as well on mobile devices as on desktop platforms.
Invest in UX in E-Commerce
Having a strong UX makes an enormous difference in the potential of your e-commerce site to convert users into customers and delight them so much that they stick around. No matter what you sell, how you built your store, or what your growth trajectory is — investing in UX is a smart move. Review some top WooCommerce themes, take a look at some great Magento options, or even pick from these businesses for sale from Shopify to get UX inspiration across the e-commerce ecosystem! There really is no one-size-fits-all UX approach, but a myriad of smart choices and decisions you need to make for your business.
By using available technology, taking inspiration from the great designs out there, and committing to learning about the essential principles that make UX work, you can give yourself the best possible chance of keeping your users happy with any websites you have currently and any you may set up in the future.
Kayleigh Alexandra is a content writer for Micro Start-ups — a site dedicated to giving through growth hacking. Visit the blog for your latest dose of start-up, entrepreneur, and charity insights from top experts around the globe. Follow us on Twitter @getmicrostarted.
Want to learn more about the UX Academy courses- Click Here: https://myuxacademy.com/courses/