Competition in the world of eCommerce is hotter than ever.
Granted, your brand, products and marketing are going to play a key role in attracting people to your online store. But there’s another piece of the puzzle, too: converting site visitors into loyal customers.
User experience (UX) design should form a crucial part of that strategy. Because leading eCommerce websites are not just easy to use, they provide a superior buying experience as well. Any website can be functionally sound, but it’s that added element of impact and engagement that keeps a customer coming back for more.
Exactly what this looks and feels like will differ from brand to brand — here’s just a few of our favorites:
1. The ‘can’t look away’ approach (from Queen Garnet)
Queen Garnet make plum juice. But what they’re selling here is something far more aspirational.
There’s a sleek but quirky animation — one you’ll find yourself refreshing the page to watch again — as well as punchy copy: “Meet the Queen of antioxidants”. By the time you finally see the drink bottle a little further down the page, you’re already sold.
Better still, there’s an option to subscribe to the juice for monthly delivery — it’s a clever addition, really helping to emphasize the status and regard this brand has for itself and its product.
The lesson? Go in with impact — you’ve got mere milliseconds to pique a visitor’s interest, so use them well.
2. Total brand immersion (like Moooi)
After being welcomed to “the world of Moooi”, this mesmerizing online shop offers its visitors a chance to embark on a journey “through the unexpected”. You’re then whisked away into a warren of otherworldly spaces and experiences.
It’s at this point that Moooi’s high-end home and lifestyle products are placed in situ — allowing the customer to truly imagine their look and feel IRL. And at the hover of the mouse cursor, the respective items move as if they’re coming to life.
The lesson? Your brand is a key lever for competitive advantage. So create a memorable and interactive experience for your customer — connecting them to your world, and encouraging them to buy-in.
3. Less is more (as shown by Ceremony Coffee Roasters)
The simplicity of this page speaks volumes. As well as placing their core product front and centre, what’s also on show here is the brand’s confidence in what they have to offer.
Once you eventually stop wishing you were tucking into a flat white, “Coffee should be something special” appears hazily on the screen as you click to load a new page. It’s as if the store is whispering to you — reminding you how good a great cup of coffee feels (and the ceremony that deserves).
The lesson? Know your strengths. If fancy animations help you tell your story, then great. But sometimes it’s better to let your brand and products speak for themselves.
4. Tailor to the customer (like Unspun)
This interactive shopping cart empowers the customer to customize their own pair of jeans. As a tech-oriented fashion brand, Unspun’s online store experience ties seamlessly with their mission of reducing waste — manufacturing each individual order on demand.
This slick and simple website places the user in the driving seat and keeps them invested in making their specific order.
The lesson? Customization is a major draw for many site users. You may not be able to offer personalization of your end product, but can you build custom experiences into the site instead?
5. The power of imagination (from HURU)
Tapping into your visitor’s imagination can work wonders for conversion rates. By inspiring them to form a real connection with your product, they’ll be one step closer to adding it to their basket.
And here’s a great example of that in action.
HURU bags pride themselves on surprisingly roomy storage space, and this web visual certainly delivers that message and more. As well as demonstrating the bag’s impressive capacity, it also creates a sense of wanderlust (something we’re all craving right now).
Now all we need is the right backpack…
The lesson? Static visuals can pack as much a punch as moving animations. Worried about site speed, or just looking to keep it simple? Once you uncover a motivating USP, there’s plenty of ways to communicate it — even with flat lays.
6. Bring the page to life (as modeled by Gucci Decor)
A whole host of different products appear on this page in a similar format — on some sites, this would be a recipe for disaster. But Gucci Decor counters that risk by changing the perspective and size of each item as your cursor hovers over. The change is instant — as is the renewed interest of the user.
The lesson? When you have a wide range of products, it’s not always easy to keep your customers curious and keen to continue browsing. Keep them on their toes and make sure the experience remains engaging by bringing your pages to life.
7. The human touch (from Mowellens)
“Created for superhumans (who are only human)”, Mowellens make CBD and hemp-infused skincare and ingestibles. In a relatively unknown market, there’s several roles this eCommerce site needs to play — one, for education, and two, for conversion.
With copy that speaks person-to-person — and with a leaf slowly fanning this page as you read — Mowellens provide a gentle introduction to the world of CBD. While the animations are, in all honesty, a little clunky, this website gets points for intention (if not execution).
The lesson? There’s a great deal of scope for human interaction in the digital space. Whether you’re selling CBD or B2B marketing services, people love to talk to people. Engage your visitor in a conversation, and they’ll be stopping by again.
8. Hands-on interaction increases time on page (as we see from Fotonaut)
While clear navigation is the cornerstone of successful UX, some eCommerce sites will also benefit from giving the visitor some control. In this example, Fotonaut encourages the user to interact with their star product by using the horizontal scroll bar to rotate it. In fact, the scroll bar icon wriggles from side to side until you take control.
The entertainment factor can’t be ignored here either and aligns well with the humorous description of the product itself — “The most entertaining photo booth in outer space”.
The lesson? Give some control to your users and create a uniquely entertaining experience.
9. Tell your story (like Sea Harvest)
This web store takes the user back to a time when buying fresh fish certainly wasn’t done online. But whether the year’s 2020 or 1902, people want the same thing from a catch of the day: quality and availability.
“Straight from the source” is the hook used by Sea Harvest — communicating both freshness and reliability. The website’s intelligently familiar layout and subtle micro-moments — like the circle appearing around ‘About’ as pictured in this example — guide the user around the site with ease, while cementing a lighthearted, memorable feel to the experience.
The lesson? Web stores don’t need to look like web stores. Borrow a different aesthetic if it helps reinforce your brand story and product credentials.
10. Blur the lines between digital and physical experience (as seen on Simply Chocolate)
Flavor and taste can be hard to sell on eCommerce. But Simply Chocolate has invested in creating a web store that captures something of the real, eating experience. To scroll down the page you literally have to tear the end off one of their chocolate bar wrappers — neatly blurring the lines between the physical and digital product experience. Then, the flavor cues pop up in the background, too.
The lesson? Ask yourself: what do my customers need to feel in order to check out? Then make that possible.
How does your eCommerce experience match up?
It’s no secret that engaging UX helps convert visitors to customers, and one-time buyers to loyal fans. What brands know less of, though, is how well their sites are performing when it comes to customer experience.
As an AI-powered platform, UserReplay helps businesses spot strengths and weaknesses in the current eCommerce offer — analyzing billions of customer data points. If you’re losing potential revenue, we’ll help you find out why — and how to fix it.
Head to our eCommerce product page, to find out more.