Millions of customers and millions in sales: that’s the dream many ecommerce store owners have when they launch their online store. As a designer here at Volusion, it’s my job (and passion) to help clients create the best website possible so that they can achieve their goals. Every day I think about what will work best for my clients' specific businesses and their specific customers. It's important to craft a custom website for each target audience and each individual brand, because no two are the exact same. Nonetheless, there's also a lot to be learned from those who have come before us and achieved wild success.
Because no one wants to reinvent the wheel, we decided to take a deep look at the sites that have already achieved the pinnacle of success with loyal, repeat customers and non-stop sales. For our analysis we scored the top 50 ecommerce sites across the web to discover their common traits and best practices, so that we can learn from them and gain valuable insights you can incorporate into your own site. Let’s see what we discovered.
1. Homepage Elements
Your homepage is probably the most important page of your site. It’s typically the most visited page and also the page the majority of customers land on before diving deeper into your store. For these reasons, a great homepage is both a valuable sales tool and a great opportunity to showcase your brand. Since the average customer makes a decision about your brand within 15 seconds of landing on your homepage, it’s more important than ever to get your homepage right.
Here are some sites that are making the most of that quarter of a minute and securing sales in the process.
Not only is Etsy’s homepage extremely well organized, it also lets customers know what the brand is all about from the very beginning. They waste no time identifying themselves as purveyors of handcrafted, vintage, custom, and unique products. They also list products in expandable pop-out categories in their homepage header to get customers shopping (more on this in the next section). They even give customers a final bode of confidence by making sure shoppers know their transactions are completely secure and backed by “best-in-class technology”.
RedBubble’s homepage totally fits the brand. It’s creative, artistic, and visually compelling. From its carefully coordinated colors schemes to its charismatic grid layout of popular categories, the messaging and intent of the site are clear from the get-go. It sets the brand feel and then goes straight into shopping. They even have multiple search bars to make it easy for decisive shoppers to quickly start adding to their cards. Simple and to the point, this is a great homepage.
Here’s What We Learned
The top 50 ecommerce sites have teams of people thinking about, scrutinizing over and testing their homepages to find out what works and what doesn’t, so there's a lot to learn from them. I was surprised by how many similarities they all shared, regardless of industry or target audience.
- Have a large promotion as the main focus. The majority of the sites we analyzed had a very clear, large main promotional graphic as the first element of their homepage. These were typically very eye-catching, set the tone of their brand and also generally promoted some sort of product or category. In this case, most were concerned with helping shoppers make a Valentine’s Day purchase, but can be easily changed throughout the shopping season.
- Utilize scrolling homepage layouts. People no longer want to have to work to learn more about your products. Thanks to the proliferation of mobile sites, shoppers are more receptive to simple, easy sites. Scrolling sites also allow you to put tons of content right on your homepage, increasing your SEO and making it easy to rank higher in searches. It can also reduce user fatigue by continually feeding them fresh, interactive content.
- Put products on the homepage. Featuring products on the homepage is a conversion best practice, so it’s no surprise that most of the top 50 ecommerce sites had featured products on their homepages.
- Use a grid layout of categories. In addition to having featured products, a very common element was some sort of grid layout consisting of different blocks of popular categories. These were usually visually enticing and made up of lifestyle or product images to represent the categories they linked to.
2. Site Navigation
Your site navigation is usually the main way your customers get around your site and find products. But it’s also important to remember that your customer is coming to your site because they have a problem. Done right your site navigation will help them solve that problem. It also plays a major role in capturing or losing a sale. If your customers can’t find a specific product, they can't purchase it. What’s more, the sooner customers can find exactly what they need, the more handsomely the search engines will reward you with improved SERP rankings.
Nike keeps their site navigation concise by consolidating their top level categories and hiding their subcategories in a pop-out menu. This helps ensure that the content they have available is scannable – a key component of a top performing ecommerce website in the mobile-first era. As with any good navigation menu, it’s all about providing the desired product or content at the exact right time.
Forever 21 has perhaps the cleanest, most well-organized header we analyzed. The simple row of categories and use of whitespace makes it very easy to navigate around their site. You can tell their web designers had their younger audiences in mind.
Here’s What We Learned
While every ecommerce site has some sort of navigation, some are far more effective than others. Fortunately, there are some best practices you can take into account to help your customers navigate your store with ease.
- Make sure your online store is in the thumb zone. We’ll address your mobile layout more in a moment, but there’s one navigation design feature that’s worth mentioning here: the thumb zone. In essence, it’s the space a shopper can comfortably navigate when browsing with one hand. If your site navigation is too restrictive, it could result in user frustration and cart abandonment.
- Keep your navigation concise and organized. You can clearly tell that the sites we analyzed have thought about how their customers shop and organized their categories accordingly. Techniques like heat mapping can help show you popular portions of your site and guide you to make small changes based on observable shopper behavior.
- Use popout menus for a better user experience. Most of the top 50 ecommerce sites lumped their subcategories into as few main categories as possible and used pop out menus for further exploration.
- Search is important. It may come at no surprise that 100% of the top 50 ecommerce sites have a search box. Some sites have more than one (see our Etsy example above.) In short, it’s pretty much a must-have.
3. Mobile Layout
According to an Adobe Survey, 62% of smartphone users have shopped and completed purchases from their mobile devices in the past six months. If you’ve somehow been selling under a rock or sleeping on this necessity, time to hop to it. At this point, having a mobile version of your ecommerce site is absolutely mandatory. Having a mobile site impacts just about everything from user experience and conversion to sales and SEO.
H&M has a beautifully simplified mobile site made up of a consolidated menu and focused homepage content. They also make it a cinch to search out and ‘heart’ items that spark their shopper’s interest.
Target also has a much more simplified mobile site when compared to their desktop site. They do a great job of reorganizing their content for easier shopping on smaller screens. In a clean and intuitive format they cover everything from featured categories and sales, to new products and top picks.
Here’s What We Learned
Unsurprisingly, all but one of the top 50 ecommerce sites has a mobile-friendly site. They all make some very important adjustments to improve the mobile shopping experience.
- Simplify your layout on mobile devices. To accommodate for the smaller screen sizes, many of the top 50 ecommerce sites removed portions of the content that was on the desktop version of their sites. This allows for a more focused, easier shopping experience.
- Consolidate your navigation for mobile devices. It's also very common to see the navigation menus consolidated to a single push or "hamburger" menu. The hamburger menu is the three-lined symbol you’ve probably seen on a ton of mobile sites that, once pressed, allows you to see more of the content.
- Place your add-to-cart buttons strategically. Your add-to-cart button is one of the last actions that stand between a shopper and a sale. The placement of the button itself, as well as the corresponding quantity boxes, is critical, especially when we’re talking about your mobile store. Check and make sure that your add-to-cart button appears below the product image. When housed above, it can make it difficult to hit the thumb zone. The more an online shopper has to stretch and risk dropping their device, the less likely they are to complete the purchase. Double check that both button and CTA are above the scroll line.
4. Video and GIFs
Online stores are always looking for ways to increase their conversion rates. Some of the top 50 ecommerce sites accomplish this by incorporating videos into their landing pages. Doing so can send their CTRs skyrocketing by 80% or more! There’s something about showing your products in action through videos and GIFs that demystify them and compel browsers to become buyers.
Bloomscape uses lifestyle photography and an automatic video with plant lovers of all ages to connect with customers. The seamless video loops entice green thumbs of all walks and shows how easy it is to unpack and enjoy their product.
Owl takes a similar approach to automatic product videos, making them the focal point of their entire homepage. Their highly minimalist design seems to amplify its allure.
Here’s What We Learned
The most modern of the top 50 ecommerce sites had creative, purposeful product videos embedded in their homepages. We’re not surprised the technique works so well for stores sans brick and mortar. Though it’s important to remember that not just any video in any format will do. You can prevent a product video from backfiring by educating yourself with some rules of the reel.
- Check your load speeds. Sure, product videos can be extremely effective. However, you need to ensure they don’t impede the shopping experience. And you really only have about three seconds to do it. That’s because 40% of all internet users will abandon a website that takes any longer to load. Check your load speed using sources like Google Developers Pagespeed Insights and make sure you have a cache in place for all your other product photos.
- Show people and products. Remember that you’re attempting to help online shoppers get a sense of what it’s like to experience your products. Show your customers how they fit into their lives. Demonstrate the benefits and how their day-to-day lives can be improved. It’s lifestyle marketing meets classic marketing, and it works.
- Use short, looping clips. This goes back to load speeds, but also gives you a chance to showcase more product. Each clip should be about 5 seconds. Looping them together can give the illusion of a longer runtime without dragging down your load speeds.
So there you have it. There is quite a lot we can learn from the leaders in ecommerce. This short guide only scratches the surface of a long list of valuable best practices and techniques available.
Considering implementing some to your online store? It’s important to first think about your specific customers, how they shop and to craft a website specifically tailored to their needs. Keep an eye on your analytics and make note of what is or isn’t working. In the end, you have to start from somewhere, so why not start at the top? If you enjoyed this article, you might also like this infographic we created about Constructing a Higher Converting Add-to-Cart Button by studying the buttons of the top 50 ecommerce sites.