Ecommerce websites aren’t easy to design, especially if you’re Amazon and sell over 12 million products! Where to begin? To set you off in the right direction here’s a detailed review of 10 stunning ecommerce websites to inspire you.
What makes an Ecommerce Website Stunning?
In my view, a ‘stunning’ website is not so much how it looks, more how it works. A stunning ecommerce website delivers an experience that means your users won’t just buy from you once, they’ll become a loyal customer, giving you sustainable growth.
The key to stunning ecommerce websites is an approach that’s both human and usable. Each ecommerce example has features which would make me go back to the site.
Be warned, there’s technical terms in this review like ‘360 spinny spinny’ and ‘super duper’. If you struggle with any definitions, just get in touch and we’ll help you out.
Featured Websites (in no particular order)
Move from concept to colourful package with just a few finger taps. Packwire give you the tools to make your own branded or customised boxes. Choose your box, upload your artwork and order online.
- Beautiful Interaction
The way the boxes move when you scroll in, is an amazing way to add interaction and interest. Gone are the days of auto-scrolling, large carousels, in comes content that’s both engaging and keeps out of your way. The boxes also change on every reload of the page, fantastic way of showing you what’s possible (hit refresh and see what happens).
- Simple, human language
Simplicity in the copy helps you understand the site in an instant – ‘Create your custom box’. Site speed is not all about how fast the site loads, it’s how quickly your undertstand the site you’re on.
- Customer service on-hand
The chat bot on the right doesn’t get in the way and immediately lets me know I have customer service ready, should I need it. Love the custom icon and how it fits with the rest of the design.
- Simple controls, pre-defined choices
When it comes to customising your box, there are 3 main controls to help you. I love how you don’t begin from scratch, there’s already some pre-defined choices within the tool so that you get a quick idea of how much things cost and what type of box you’re customising. Plus, pre-defined choices show you the options available in a meaningful way.
- Don’t lose your work
Just incase I want to show my team or client my freshly designed box, the tools are right there to save my creation or share it directly from the page.
- Illustration to guide you
The small illstrations of each side of the box make it immediately clear which bit I’m editing and it’s super easy to switch to another side. These controls are so simple and interactive, I couldn’t help myself from choosing loads of different colours! So quick and easy.
- Responsive and adaptive mobile design
When on mobile, the design not only condenses to fit your screen, the boxes appear above the title and intro, which means you still get the same great, interactive experience, with no compromise on the design. All to often I see images squeezed on the mobile version of a site, meaning I can’t see the image easy, this is not the case with Packwire.
- Mobile friendly controls
The easy controls to customise your box are just as easy to use on mobile and stay out of the way, so you can still see your box change in front of your very eyes, whilst it’s in the palm of your hands.
- Focused and specific
Being a well-known brand, Ray-Ban’s sunglasses are available from a lot of on and offline shops. So, focusing on a specific product that’s only available from the Ray-Ban website is a great way of driving people to the official Ray-Ban site.
- Life size imagery
On the desktop version of the home page, the featured sunglasses are very close to the scale of actual sunglasses. This gives you a simulation of what the sunglasses are actually like and it feels as though you can reach in and grab them.
- Product in use
The strong, human imagery throughout the site, simulates what the glasses look like as if you were there yourselves trying them on. Avoiding volumes of text and showing the products in use really sells the sunglasses. This seems really obvious, but you’d be surprised at how many times I see products that are intended for people, but people aren’t featured in the photography.
- Guiding your customers
Good interaction design leads you through to the next stage. In the Ray-Ban example, the centred text and 2 models either side allow visitors to focus on the ‘Customize Now’ button – the button which gets you to the next step (customising your sunglasses).
- Interactive product customisation
The customisation tools above the sunglasses are incredibly intuitive; the image led buttons make it clear what and where you need to tap to design your pair if sunnies. The mix of both the customisation tools and product options such as choice of case, give you a complete picture of what’s available.
- All the details you need to buy
Once you’ve customised your sunglasses, all the details you need to buy the product are to hand, including price, estimated delivery rate and potential free delivery. These immediate, but necessary details answer all the questions you’ll have and remove any hesitation about buying the product (unless you don’t like the price).
- Product customiser adapted, but familiar
The position of the customiser tools may change on mobile, but the the design is just as intuitive as the same imagery and language is used. Also, if users are switiching between desktop and mobile (cross-platform) then the jump in the layout change won’t cause any issues.
- Don’t just shrink images on mobile
If you compare the image in the ‘Remix’ CTA (Call-to-Action) between desktop and mobile. you’ll notice that they haven’t done the easy thing and just shrunk the image. All to often, images are just resized. Instead Ray-Ban have used a cropped version of the photo, keeping the CTA just as impactful as it is on desktop. High fives designer.
- 360 spinny spinny, zoomy, zoomy!
The 360° feature is the most exciting, interactive and incredibly useful thing ever. I actually feel like I’m holding the product in my hands and spinning it around. The high level of detail I get within miliseconds and the fun I have using the tool is uber pleasurable. It’s not cheap doing this, but a very worthwhile investment and I’d imagine this is a massive conversion booster.
- Immediate click-throughs
A lot of homepages I see have large hero images featuring 1 product. This is fine, depending on the goal or focus of your website. But if your goal is to get people off the home page ASAP (which it should be), then what better way than to feature 6 of the most popular high-level categories (Jackets & Coats, Shoes & Trainers, etc) and push people straight to the products they’re after.
- Strong navigation
Navigation is one of the hardest elements to get right. Too much navigation and people will struggle to see the wood for the trees (or the tabs from the bar). Too little navigation and people will either bounce or get to the wrong product (frustrating). ASOS have designed a good heirarchy of terms, plus the strong contrast and colours lead the eye quickly to where you want to go.
- MEGA mega dropdown
Once you hover over the navigation for product categories, a beautiful mega dropdown helps you shop. With obvious product categories on the left and visual cues on the right, I almost feel like I’ve approached a physical store and a helpful guide is showing me the way. The personable tone under the title ‘Shop by Occasion’ (‘Going out-out’) is like I’m talking to a mate or friendly shop staff, about the type of clothing I’m after. Great use of language for ASOS users.
- Great use of space for PLP
The PLP (Product Listing Page) on mobile is a great example of using available space, without overcrowding. The usual layout on mobile for PLPs is 1 column of products, which means a lot of scrolling. ASOS’ 2 column approach means that they get more products within the page, so you don’t have to scroll forever. The portrait images really help this layout. This is another good example of using specifically sized images for mobile, rather than just shrinking images from desktop to mobile – which is usually the case.
- Usable and beautiful mobile navigation
2 things amaze me on the mobile navigation. The first is that ASOS have managed to get imagery within each navigation item, without it getting in the way. The imagery backs up the wording and helps me to scan for what I want much quicker. If it was just textual navigation (which is the norm), it may not be so quick to find what I want. The second point is that the navigations items are nice and big. 44 pixels is the minimum depth for a button, or tappable area on mobile. ASOS’ have gone beyond the minimum and means that my sausage fingers will definitely hit the right area, and not hit the area above or below.
Abel & Cole
- Promo bar & a well considered offer
A great way to encourage people through to checkout is with a banner promoting an offer on the homepage. Abel & Cole feature a voucher code in their promo bar offering a 4th box free. What a great way to get customers hooked on the weekly veggie box and ensure they get at least 4 boxes. Once you’ve had your 4th veggie box, I bet it’s tricky to break out of the habit of having a veggie box delivered. This is a neat little trick to get both the first time buyer and encourage customer loyalty.
- Start with the why
As Simon Sinek says “Start with the why…” (watch Simon Sinek’s TED talk here). Abel & Cole’s copy begin’s with why you should choose them. From the great little intro about their history and ‘spuds’, through to the bullet points reading: Delicious, Ethical, Sustainable and Seasonal you got a real sense of their values. It’s copy like this that will turn your visitors into customers. Begin with why someone should buy from you and they’ll be eating your spuds forever… Have you watched Simon’s video yet?
- Do what others do
The reviews featured on the home page is a great persuasion tactic known as ‘Social Proofing’. When people don’t know what to do, what to choose or where to turn, they look to others to help them decide. This is social proofing, and exactly why Abel & Cole have inserted reviews, to encourage you to become a customer and get some veggies.
- Customer service in just 25 words
Your first action in becoming an Abel & Cole customer is to enter your postcode to find out when your box will be delivered. After hitting the ‘let’s begin’ button and entering your postcode a very personable and helpful message pops up. “Our driver Glyn pops round every Friday” – how trustworthy and helpful is that little statement. This piece of copy is very powerful. I feel like I already know my driver now as we’re on first name terms (hi Glyn) and he’s not going to just ‘deliver’, he’s going to pop round. Glyn sounds nice. The intro is then backed up with more helpful advice and why they only deliver to my area once per week, to keep emissions low. They’re answering a customer question (why do you only deliver once per week?) and using their values of being sustainable and eco-friendly to explain why. Genius!
- Continuity with copy
Not only is the visual aspect of the site consistent so is the copy. Abel & Cole could’ve just begun their PLP (product listing page) with dull copy which read ‘Vegetable Boxes’ (boring). But, they’ve gone a step further and used their beautiful and personable language throughout the site. The intro in the PLP begins with ‘What kind of box are you?’, amusing and informative. Going the extra step with copy like this is what completes the design of a site. Don’t just focus on the visuals and functionality, copy is super duper important.
- Helpful hovering
Just before I make my final decision and choose the box (that Glyn’s going to pop over) a lovely little feature pops up, when I hover over the ‘Pick this box’ button. What a great way to answer the final burning question (what to expect in my box?) before hitting the button. Little features like this are incredibly powerful at driving customers towards the checkout.
- What a hero!
The hero image and call to action on the home page are beautifully adapted for mobile. Keeping the desktop version of the site simple has meant that when reducing the space, Abel & Cole don’t loose any of the impact in their intro.
- Scroll, scroll, scroll… Not here
In the PLP, you don’t have to scroll up and down to find your veggie box. Abel & Cole have given me handy left & right controls, so that I can hit left and right to find the right box for me. One thing that would be super helpful here would be an idea of what box is coming next (just a label is fine) and how many boxes are on the page.
- Super helpful product chooser
As soon as I enter the home page of AO.com the customer service begins with a super helpful and interactive product chooser. Changing the options in this tool such as ‘Product Type’ and price range, updates the number of products available. This not only tells me that AO have it all, but also refines my options before hitting search now and makes it much more likely that I’ll land on the right product. This saves me clicking around product categories for the next 5 minutes and gives me exactly what I want.
- Customer service bar
The white bar in the navigation answers immediate questions about returns, delivery and more. These very tiny pieces of information means that I don’t have to go hunting for answers to questions like ‘what if I don’t like it? Do I have time to return my item?’. Removing questions like this means I focus all attention on the product I want and am more likely to buy today.
- Free delivery, nailed it!
Once of the biggest barriers to people buying onlinr is the cost of delivery. Why would I pay for delivery when I can walk to the high street and just pay for the product? AO have answered this question and have told me I can get my product next day for free. Woohoo! I don’t have to pay for delivery and my game will come tomorrow.
- Helpful microcopy
The microcopy to the right of the product (just above the ‘add to basket button) is small but powerful. Everything question I have in the next stage of the process is answered here. For example, it states that I can get my game by the 9th of October. My next question may be, “that’s great, but I’m not in on that day, so I need it to be delivered on the 11th October”. The copy underneath the delivery statement tells me that I can choose my own day and this includes weekends. Great. Now I’m more likely to hit ‘Add to basket’ directly from the product listing.
- Carousel so I can see products quickly
- Refine products follows me
As I scroll down the page, the refine tools follow me, so that I can quickly and easily drill down to the products I want. This is super important for a store the size of AO.
- Setting the tone
Not many brands are as brave as Firebox and that’s what makes them so unique. Upon first reviewing the site design, it seems quite plain. But there’s a good reason for this, they let the products do the talking and the website ‘design’ gets out of the way. The quirky illustrations in the top bar aren’t your standard icons, and even though they’re subtle, they begin to build the voice of Firebox and as you go through the site, you really get to know Firebox as if it was your best mate showing you around all the amazing Firebox products.
- Creep it real
Even though ‘Creep it real’ is breaking all the usability guidelines of what language to put on a button, this is another great example of where Firebox are injecting personality into their site and keeping the humour going.
- Product category page copy doesn’t have to be dullseo
The copy at the top of this page breaks all the rules of ecommerce SEO and is focused on entertaining, rather than informing. “Our all-seeing, all-knowing algorithm feeds itself on a balanced diet of sales statistics, social feedback and current trends – and then spits out a ranking.” What an amazing way to explain a product listing page.
- Numbers on the products, nice little touch
It’s the finer details that Firebox seem to focus on and a great example of this is the numbering on each product in the top 50 products. Including the numbers on this page kept me engaged as I scrolled through and kept reminding me that there were 50 products to view.
This is probably the best ‘About Us’ page I’ve ever seen. Just pure genius and had me rolling with laughter. Just check it out here.
- All the important bits first on the product page
On the product page, all the important elements of the design are featured before scrolling such as a nice big image, reviews and the product title and description.
- Unique icons, unique site
Even on the mobile version Firebox have refused to go for the standard icons from Font Awesome which appear on every other site (love you Font Awesome). Instead, they’ve created their very own handdrawn icon set, which just adds to the tone of the brand so neatly. Well done Firebox. If you ever need inspiration on how to design differently, just follow Firebox’s approach of focusing on all the tiny details and make them unique.
- Home page feature: Before and after
With very little content, Bellroy do a great job of explaining the problem their product solves. Such an amazing demonstration of great design – simplicity and effective communication.
- Video on the home page telling the product story
This video begins with a very quick and engaging video, explaining the problem Bellroy solves. No words required, just a very quick and simple animation to explain why you need Bellroy and then the product range is introduced. I’m sold 🙂
- Product listing page: Show inside
The ‘Show Inside’ is a small, yet powerful feature to show people what you can fit in your bag or wallet. This immediate info encourages people into the product page quicker and I’m sure will increase sales as it’s very helpful. A great example of digital customer service.
- Visual mobile menu removes ambiguity
More often than not, menus on mobile ecommerce sites are reduced to text in order to squeeze all of the menu options in. Bellroy have opted for a visual menu, which really helps to remove any ambiguity and means you’ll definitely know where you’ll go when you hit the link. For example, I may not know what the ‘Keys’ product category means. It could mean that they cut keys? These sort of questions would deter me from hitting ‘Keys’. The visual gives me more of a concrete idea of what the ‘Keys’ category is all about and means I’m more likely to explore that category.
- Mobile product listing with left and right functions
The small, yet powerful left and right arrowws are a good example of how to adapt your product listings for mobile. When using the arrows I can quickly see the colours available with just a few swipes.
- Product listing page – informative photography & scarcity
The simplicity of the Yull product page helps the products shine. The product photography of the slipper’esque shoes (Burlington Lollipops) is how shoes should be displayed. When you try on a pair of shoes, what’s the first thing you do? Look down. Thinking how people buy products leads to better product info for your users. Also, the ‘Only 1 Left’ badge on some of the products adds scarcity and people will more likely buy this product for fear of missing out. I also love the very charming and human approach to the product names like ‘Burlington Pizza My Heart’.
- Single product page – ‘Only 13 items left in stock’
The feature on the product page that tells me there’s only 13 items left in stock really packs a punch. Adding this to the product page creates a sense of urgency, plus it tells me that other people have bought this product. A great example of how to use 2 powerful UX tools: scarcity and social proof
- Find your regimen
To help people find the right product for them, New Chapter have a ‘Find your regimen’ page to narrow down the products you need. This is particularily great for new users who may not know what product they need, but understand their daily regimens. A cracking example of good customer service to help you wade through a sea of products.
- Product and user knowledge
Understanding your users needs and your product are the 2 things that can make a mojor difference when selling online. New Chapter have demonstrated both of these elements by using, short and informal product descriptions, size and delivery options, plus product imagery combined with info abotu the product.
- Powerful messaging
“Plants Make People Happy.” What an amazing way to open! Using simple and powerful language like this immediately sets the tone and tells people your purpose in a way that’s non salesy. Purpose is the reason that customers will choose you over any one else and The Sill have done a great job of embracing people as they visit their site and telling them it’s more about “just plants” – to do this in just 4 words is extremely impressive.
- Navigation and setting expectation
The navigation is obvious and therefore easy to make sense of and the green bar at the top answers 3 burning questions that will push more people to over the (checkout) line and will ensure repeat custom
- Continuity, conversational and expectation
The title of this page (More than your garden variety, starting at $5) ties in beautifully with the copy used on the home page, so even though you’ve moved to the product listing page, you still feel like you’re talking to the same person (website). As well as being conversational (which is a great way to communicate with us humans), the copy tells you what to expect from the products; you’re going to get more than just the same ol’ plants and you can spend just $5 – bargain!
- Quick and simple filtering
The 2 filters at the top are super helpful and well considered, they’ve used size of plant and price/most popular. They could’ve confused things by filtering by different types of plant (eukaryotes, gymnosperms, hornworts and more). However, they’ve considered what people think about when buying plants such as “I need a small plant that will fit on that shelf in the kitchen”. Seemingly small considerations like this are a huge help to customers.
- Customer service
The tags on specific products are super helpful when choosing plant types. Having these sorts of tags shows customers that The Sill have deep knowledge about their products and answer immediate questions. The more questions you can answer, the more your customers will buy, as they don’t have to think as much.
- No compromise on mobile
The mobile version of The Sill is just as good as the experience on desktop. The messaging and imagery still has the same impact and the levels of detail such as the vertical text (‘Bag’) is a great way to squeeze the same wording into the right place, without making it hard to read.
- Immersive images
On mobile sites, the usual method designers and devs take is to shrink the imagery down, usually because they haven’t bothered to adjust the site to fit the constraints of mobile. On The Sill however, the imagery fills all available space and you don’t have to pinch and zoom to see the plants.
From using the personal touch with language or demonstrating the problem your product solves, the examples in this ecommerce website review will hopefully inspire you to create more human centred websites which sell more.
Remember it’s not just enough to think about your products, understand what your users need and design your site to help them buy more of your products.