If you run an online store, you’ll know the importance of having a website design that puts your brand in the spotlight and gives users a great experience.
To achieve success, your website should set a good first impression. It should look good. It should function properly and encourage visitors to make a purchase. Quite simply, if your website doesn’t look the part and if bits of it are broken or poorly designed, visitors aren’t going to stick around for long, let alone make a purchase.
In this post, we’ll take a look at some of the best ecommerce websites and discuss what makes them so good. We’ll consider things like design, conversion optimisation tactics and the overall user experience.
So, get ready to explore the best ecommerce websites and take inspiration for elevating your own online store.
What makes a good ecommerce website?
Research suggests that website visitors only need around 0.5 seconds to form a first impression of a website. Research also shows that 95% of first impressions on a website are design-related. That’s why it’s crucial your website looks flawless and captures the attention of your visitors right away.
Luckily, there are some best practices you can follow to keep visitors engaged and more likely to perform a desired action. Here’s a list of things to consider:
1. A visually-appealing design
Your website needs to look good for users to engage with it.
If you use an ecommerce platform like ShopWired or Shopify, then a large portion of your website’s aesthetics will come from your chosen theme. Each theme usually has a range of customisation options, allowing you to change the colour scheme, fonts and parts of the layout. You’ll need to experiment to see what works best for you.
Beyond your theme and layout, other visual aspects of your website you'll want to consider include:
Product images- Make sure your images are clear, high-quality and display your products in all their glory. Remember, if a potential customer has never seen the product in real life, your images are all they have to go off. Give them a few different angles and make sure any unique selling points are clearly identifiable.
Font and colour scheme- The typography and colour palette of your website play a crucial role in shaping its overall aesthetics and creating a cohesive brand image. Select fonts that are readable and resonate with your brand's personality. As for colour, it's not just about choosing colours that you like, but rather those that represent your brand effectively and influence customers' emotions and perceptions positively.
White space - Though often overlooked, white space, or negative space, is an essential design element. Proper usage of white space enhances readability, guides users' attention to crucial elements and gives your website a clean, uncluttered look.
Navigation - A well-structured navigation system is crucial for providing a smooth user experience. Your visitors should be able to easily find what they're looking for without spending ages frustratingly clicking around. The design of your menus, search bars and category pages should be intuitive and user-friendly.
2. Get your value proposition and trust signals in ‘above-the-fold’
When we say ‘above-the-fold’ we're borrowing a term from the newspaper industry. Just like how a newspaper's most important stories are placed on the top half, or 'above the fold' of the paper, in web design, it simply means the portion of your website that visitors see without scrolling down.
Your website needs to quickly tell visitors what your business is all about and how your products or services are different (and better) than the rest. This isn't just a good idea; it's pretty much a must for any type of website, not just ecommerce ones.
Let's imagine you've got an online store selling handmade soaps. From the moment someone lands on your page, they should get a sense that your soaps are special. Maybe it's because they're made with locally sourced ingredients, or perhaps they come in some really funky shapes and scents. Whatever it is that sets your soaps apart, your website needs to shout it from the virtual rooftops!
It’s also useful to get your trust signals in above-the-fold. Trust signals are things like customer reviews, ratings, certifications, secure payment badges or even a physical address. These elements help build credibility and reassure visitors about the reliability of your ecommerce store.
3. Clear calls-to-action (CTAs)
One of the best ways to guide visitors towards performing a desired action is by making the journey crystal clear. Think of it like a well-lit path leading straight to the treasure.
A great tool for this are Call-To-Action (CTA) buttons - those buttons that catch your eye and almost seem to say, "Click me!" For example, a vibrant "Add to Cart" or a persuasive "Buy Now" button on a product page can effectively guide customers towards the checkout process.
But it's not just about getting them to the checkout page, it's about making the entire customer journey intuitive and straightforward. This could include CTAs prompting customers to sign up for newsletters, to learn more about a product or to explore a new collection.
The key is to make these CTAs stand out, yet integrate seamlessly with your site's design and flow. This way, you're not just driving customers to make a purchase, but also enriching their overall browsing experience on your site.
4 examples of great ecommerce websites
In the section below, we’ll look at some brands who get it right when it comes to website design.
As we explore the first two examples, we'll be focusing specifically on their homepage, which serves as the welcoming portal into their online store. Let’s take a look.
Drunk Elephant is a skincare brand that has become hugely popular in recent years.
The first thing you’ll see when you land on their website is a pop up offering a 15% discount and a ‘Sign Up Now’ button. This is a great way to give visitors a reason to click further into the website. It's also a great way for Drunk Elephant to grow their email list by obtaining some basic details. Many websites miss out on this opportunity.
Drunk Elephant's vibrant and colourful homepage is quite minimal in design and utilises the space on the page very well.
At the top of the page is an announcement telling visitors that shipping is free on orders over £45. Directly above this is a menu bar containing some useful buttons including a search function. Down the left hand side of the homepage and rotated 90 degrees is a text snippet reading ‘Keep your friends close, and your moisturiser closer.’ This is fun, quirky and a bit different, leaving a good impression on users. The way it forces you to turn your head is attention-grabbing.
Taking centre stage on the homepage is one of Drunk Elephants most popular products- Bouncy Brightfacial. This product has its own section with a clear image, a colourful background and an accompanying description that sells the product's benefits:... 'fades stubborn spots.'
Users can click on the image to be taken to the product page where they can find out more information about the product and make a purchase. What’s so clever about this design is that Drunk Elephant knows this is a popular product, so they use the homepage to show it to visitors right away and ensure the product is only one click away.
Homepage- Below the fold
As visitors scroll down the homepage, more popular products appear as clickable sections.
Again, these sections are clear, have a great use of colour and space, and encourage the user to click through to the product page to find out more.
Towards the bottom of the homepage is a message from the company founder, Tiffany Masterson, about the brand’s story and mission. This is a great way to add a touch of personalisation and authority to the website. Adjacent to this is on the right is a Shop button which takes users to Drunk Elephant’s whole catalogue of products.
Finally, at the bottom of the page is a footer section that contains more trust signals in the form of accepted payment methods, as well as a form for visitors to receive the 15% discount.
Overall, Drunk Elephant’s homepage is an excellent example of ecommerce done right. It's engaging, colourful, enticing and tells you who they are off what they offer from the start. It's easy to imagine users wanting to revisit their website more than once.
Visitors to Skullcandy's website will be impressed by its sleek looks. The colour scheme with its deep blacks and vibrant golds contrasts perfectly with the white text to produce a visually appealing page that’s easy to read and visually striking.
A menu bar at the top of the page lets users easily navigate the website. Users can either click Shop to go through to the main store or can search for a product manually using the search function. There’s also an option for Support, meaning support is only a click away for those that need help.
Just beneath the menu bar is an announcement that reads ‘Free shipping over £100.’ Reminding potential customers of this benefit is a good technique for encouraging them to make a purchase.
The three products displayed on the homepage are well put together, with high-resolution images that show them off alongside enticing headlines and descriptions that sell the benefits. Clicking on an image takes the user to the product page for that specific product. It looks good. It functions well. Top marks here.
At the bottom of SkullCandy's homepage is a section called 'Smokin' Deals.' Users can click anywhere on this section to be taken to the sale section of SkullCandy's online store. Letting visitors easily access discounted items from the homepage could be a good way to boost conversions. The continued use of the gold neon text on the black background makes this section pop out, drawing the visitor in and making them want to click.
Also at the bottom are the page are more calls-to-action and trust signals, including an email CTA, a navigation menu, accepted payments and links to their social pages.
Product page design
In this section we'll look at some websites with solid product pages.
Spotlight Oral Care
The first example is of Spotlight Oral Care's teeth whitening strips.
This product page from Spotlight Oral Care is a standout example of excellence in ecommerce design. It skillfully combines product information, a user-friendly design and engaging visuals to create a shopping experience that not only informs customers but also entices them to make a purchase.
Taking centre stage here is the product image. The shadowed effect makes them appear to pop out from the page and looks professional. On the right hand side is a clear and large product title, a user rating, the price, an Add To Cart CTA button and some key information about the product. All of this is viewable above-the-fold without the need for scrolling.
As the user scrolls down the product page, the product information remains in place, but the images change to reveal the product in use. This ingenious design choice enhances the user experience by providing a dynamic and engaging visual journey without losing sight of the essential product information.
Once the user has scrolled through all of the initial product images, the page moves to a new section with some more information about the product, as well as some before and after pictures. Notice how the Add To Cart button remains in place at the bottom of the screen? This lets users easily make the purchase at any point of the journey and is a good conversion tactic.
Further down the product page, the user is treated to a number of recent customer reviews and a product FAQ that answers all the common questions users want to know.
Spotlight Oral Care goes on to recommend other products from their range that you might like based upon the one you're currently viewing. This handy feature could boost the potential for cross-sells.
Finally, at the bottom of a page is a box that lets users easily sign up for Spotlight Oral Care's newsletter. This is a great way to keep users engaged with the brand, as well as building a pool of email addresses to targe your efforts towards in future campaigns.