planning / 10 Stunning Examples of Ecommerce Websites

10 Stunning Examples of Ecommerce Websites

Andy Thorne
10 Stunning Examples of Ecommerce Websites
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)

Packwire

packwire.com

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.

Packwire

Packwire – create your own custom box online.

  1. 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).
  2. 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.
  3. 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.

Packwire – everytime a user reloads the page, a different combination of boxes and colours appear! Endless possibilities

After tapping ‘Let’s do this’, you scroll down choose a box

Packwire’s easy-to-use box designer tool, allowing you to design your box online before you buy.

  1. 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.
  2. 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.
  3. 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.
Packwire - ecommerce site for customising boxes.

The mobile version of Packwire has the same great features and still give you a fun, engaging and simple experience.

  1. 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.
  2. 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.

Ray-Ban

ray-ban.com/uk

Ray Ban - Home Page

The Ray-Ban home page focused on 1 product

  1. 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.
  2. 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.
Ray-Ban Product CTA

Call to action promoting Ray-Ban’s product customiser

  1. 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.
  2. 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).
Ray-Ban Product Customiser

Ray-Ban Product Customiser

  1. 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.
  2. 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).
Ray-Ban Mobile Website

Ray-Ban Mobile Website Design

  1. 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.
  2. 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.

ASOS

asos.com

ASOS 360 product view

ASOS 360 product view

  • 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.
ASOS Homepage

ASOS Homepage

  1. 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.
  2. 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.
ASOS Navigation

ASOS Navigation

  • 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.
ASOS Mobile Ecommerce Design

ASOS Mobile Design

  1. 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.
  2. 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

abelandcole.co.uk

Abel & Cole Homepage

Abel & Cole Homepage – a well considered promo offer ‘BOX18’

  • 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.
Abel & Cole Social Proofing

Use testimonials as a way of persuading customers to buy

  1. Start with the why
    As Simon Sinek says “Start with the why…”. 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?
  2. 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.
Abel & Cole Popup User Journey

Abel & Cole use a handy little tool to let you know when the driver delivers in your area

  • 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!
Abel & Cole PLP

Helpful interactive box pops up on hovering over the ‘Pick this box’ button

  1. 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.
  2. 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.
Abel & Cole Mobile Site

Great use of space on mobile and an unusual but good horizontal product listing page

  1. 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.
  2. 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.

AO

ao.com

AO Home page

AO Homepage

  1. 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.
  2. 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.
AO Product Listing Page

AO Product Listing Page

  1. 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.
  2. 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.
AO Mobile Pages

AO Mobile Pages full of neat little features

  1. Carousel so I can see products quickly
  2. 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.

Firebox

firebox.com

Firebox homepage

The simplicity in design and bags of personality really bring this site to life

  1. 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.
  2. 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.
Firebox Top 50 Products (PLP)

The top 50: 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.

  1. 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.
  2. 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.
Firebox the best about page

The best about page I’ve ever seen

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.

Firebox Mobile Website

Great mobile ecommerce website from Firebox with some nice custom iconography

  1. 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.
  2. 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.

Bellroy

bellroy.com

Bellroy Home page Feature: Before and After

Before and after images help people understand the problem Bellroy products solve in an instant

  • 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 🙂
Bellroy Product Listing Page Feature

The simple ‘Show inside’ button demonstrates the product capabilities very quickly

  • 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.
Bellroy mobile ecommerce site

Great mobile menu and nice product listing page

  1. 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.
  2. 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.

Yull

yull.co.uk
Yull product listing photography

  • 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’.
Yull product page

Good scarcity feature ‘Only 13 items left in stock’

  • 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

Newchapter

newchapter.com

Find your regimen with New Chapter

Find your regimen with New Chapter

  • 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.

This page, demonstrated both product knowledge and all the immediate info your users need to purchase

  • 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.

The Sill

thesill.com

The Sill - Shopify Website for Plants

The Sill Homepage – Excellent copywriting and simple, elegant design

  1. 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.
  2. 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
The Sill Product Listing Page

The Sill product listing page (PLP) leads with a very personal, friendly tone of voice

  1. 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!
  2. 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.
  3. 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.
The Sill - Mobile Ecommerce Website

Mobile version of The Sill – no compromise on the design even at this size

  1. 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.
  2. 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.

Summary

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.