Ecommerce Homepage Design: Best practice and tons of examples to follow in 2022

The homepage. Your most visited page. The page you show to your friends. The only page your CEO looks at. 

Ecommerce homepage design is crucial. However, in our experience, also the one that strays the most often from best practice.

This is because whilst PDPs, basket and checkout pages tend to play a focused role (ie, sell products now!), homepages have a couple more jobs to do. Important ones too!

Do you feel your homepage and ecommerce web design need a little love? Check our Magento design services.

What is the purpose of ecommerce homepage design?

A homepage has two main purposes. 

First, it needs to introduce the brand/product and persuade visitors into purchasing. Let’s call this the “brand job”.

New customers are the lifeblood of ecommerce businesses. Customers lapse inevitably (especially for big-ticket items or other low-frequency purchases) and need to be replaced by new customers. In addition to that, (purchases from) new customers offer more value than (purchases from) repeat customers because a new customer has all their lifetime value in front of them. 

This is why Cost of Acquisition of Customers (CAC) is such an important metric in ecommerce. If you’re acquiring customers at a lower value than the profit you make from them during their customer lifetime, you’re in the safe zone of growth. (it’s a tiny bit more complicated than this, but still). 

And a good homepage is so, so important for a healthy CAC. 

Now, the second role: it’s to help users navigate your product catalogue. Let’s call this “the UX job”

Every ecommerce site has (should have!) at least three ways for users to explore. The homepage is there to feature all of them, enabling different customers to follow their own ideal journey. 

• Search. Users searching for items are showing the highest level of purchase intent, which is why users who search are more likely to purchase that those who don’t. Who is more likely to buy in a store? The person who goes straight to a shop assistant, or the person who walks through the aisles looking at various products? 

• Category navigation. For users who roughly know the type of product they want to buy, category navigation allows them to browse all existing products. The homepage has to make category navigation self-evident, for example through the use of menus and homepage modules. 

• Featured journeys. This could be product collections that don’t fall under one category. Instead it might be a curated mix of products from different categories,  or have something special about them (celebrity collaborations, new product innovation or an interesting story to tell). 

Seven principles for ecommerce homepage design

Showing your brand in the best possible light and helping users navigate through your catalogue is what homepages exist for. And following these principles will help you design a homepage that can do that effectively. 

Write a solid H1 to make it super clear who you are and what you sell

New customers will always find their way into your homepage. Even when users have come elsewhere on your site, they will also visit the homepage to orient themselves.

Therefore, the homepage has to show them where they are (and reassure them that they are in the right place).

The best place to do this is right below the header, with a headline and an accompanying image/graphic.

There is a real art in writing this headline. You need to include both:

• What products they can actually buy, eg “Fruits and vegetables”, “Trainers”,
• What is the value proposition built into these products “Farm to Fork”, “Homemade”, “Uniquely crafted”, “Time-saving”, “Circular”. Of course, this is about substance and not just shizzle. Users are wary of poorly substantiated claims. Unecessary fluff might do more harm than good

Of course, you don’t need to be so Janet and John about it. You can use some clever copy and images to give people a very clear idea of what’s for sale.

Having said that, this approach is not without its drawbacks. Allbirds ranks 10 on Google (footnote) for the term “sustainable shoes”, and there is no question they would rank higher if their H1 headline also included the keyword.

This is a choice each company has to make between brand development and SEO.

This also depends on your level of brand awareness. New brands should assume a high proportion of new users and a low level of awareness, which means that their homepage headline (H1 tag) has to be pretty specific.

More established brands might prefer to use their header area more creatively, rotating seasonal content or featuring star products, campaigns and initiatives. This works because a high proportion of customers will already know the brand.

Make the search bar impossible to miss

Search matters. Shoppers who use search convert at higher rates than those who use other ways to navigate the site, which tells us that those shoppers came with a higher intent of purchase.

To suit those customers who either came to the site with a search in mind or to entice a shopper to search for a more particular item, a prominent search feature is always a good idea. 

There are two factors that can help you decide how prominent to make the search box:

• The way in which customers shop in the category. For example, many customers come with a product or brand in mind when shopping for electronics, making search a key homepage feature. But when shopping for clothes, customers tend to favour category navigation, making the search bar less necessary.

• Number of categories and SKUs. The more complex the range, the more the need to use search. This is why search bars are so prominent on retailers such as Amazon or Argos.

Typically, words can be better understood by users than icons, although the search icon (magnifying glass) is universally recognised. The best design is to show both the icon next to a prompt (“search for a product”) or next to the word “Search”. To show only the icon runs the risk of being missed, and to only show the word can be confusing (as in the AllSaints example). 

Search box design is an uncomplicated design task. Asking a user to purchase an item will show how long it takes for someone to think of, and find the search box allowing fast testing of different prototypes 

Have a look at some good examples of search boxes, using design cues to highlight and separate the box from the menu and the use of text prompt in combination with the magnifying glass

Invest in unique photography and distinctive graphics.

If the homepage is there to make an impression, your images are the most important non-navigational element to get right. 

According to an eye-tracking study conducted by the University of Missouri, it takes two-tenths of a second for users to form a first impression. Whilst users typically start by paying attention to elements such as the logo and the top menu, they spend almost as much time focusing on the hero images, such as images on the header or those spanning content width across the site. 

There are no hard and fast rules about photography composition, as it largely depends on the product category.

Consumer electronics, cars and technology benefit from making the product the centre of attention with close-up, 360 angle images in high definition. Apple is the king of product photography, with stunning images of its products in pristine monotone backgrounds. This is because the role of photography is to make the user fall in love with the product.

 Furniture and homeware perform best shown in context, inspiring customers to “see” the item in their own homes. The sites that are most effective at inspiring customers to upgrade a room in their homes will create a memorable impact (and perhaps some social media sharing). 

And of course, fashion and beauty are all about casting models that can convey the brand’s attitude and lend a mirror to the consumer so they can see the product in action. Since fashion brands sell style and confidence as much as they sell clothes, it’s key to put the time and effort into bringing the brand to life.  

Taking the time and energy in creating unique photography has other benefits too. It can help your Google rankings, as Google favours unique content and photography. Just remember to add alt text for Google to read, and for accessibility.    

Show a good representation of your product range

For retailers carrying many product categories, the question is how many and which ones to show on the homepage. Should you focus on key categories driving more revenue? Or showing as many categories as possible? 

Many ecommerce companies use revenue data to answer this question, featuring only categories that represent a meaningful revenue share. 

In reality, this has an unintended consequence. Customers keep coming back to the site via the homepage, however if less popular categories are not shown, customers might never take notice. 

In effect, this is a self-fulfilled prophecy. Ecommerce managers think those categories don’t sell, so they never give them a chance to. 

Instead, smart merchants engage in active category cross-selling by creating modules and assets to promote lesser-known categories. Grids and carousels can show many different images, suiting retailers with many categories.  

In addition to that, let’s bear in mind that newer, niche categories can play a strategic role in brand management. For fashion and lifestyle brands, the increasing product range can play a role in attracting new customer segments or creating new brand associations. A good example of this is luxury brands launching fragrance and beauty products to appeal to younger, less affluent consumers. 

Avoid clutter

Visual clutter is the enemy of conversion.

Overloaded with information, users can feel paralysed and abandon the site altogether. Like a messy room, cluttered pages are not the ones we want to stay in!

Homepages that display some degree of clutter (excessive text, moving images, ads, promos and a lack of empty space) will see conversion and bounce rates improve. Of course, the uplift will depend on a myriad of factors, so it’s hard to estimate.

To avoid clutter:

• Keep to a consistent styling with a limited selection of colours and typographies
• Use white space, generously. Also, dividers. 
• Create a visual hierarchy to help the visitor understand what’s important. Make crucial information and calls to action more prominent, and group related elements together. 
• Avoid unnecessary animation
• Use concise and clear language

The approach to clutter can also depend on the context. Retailers with large ranges need to display many categories and products so that visitors can start browsing straight away and get ideas to go further into the catalogues. By grouping elements together and mixing categories, product grids and featured collections, the result is an engaging site that is easy to navigate.

On the other hand, DTC manufacturers or retailers carrying a much smaller premium offering can afford to leave a lot more empty space so that product photography can shine and copy has a chance to be read in full.

Make the homepage unique, and memorable

In UX design, we follow Jakob’s law.

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

Jakob nielsen, nielsen norman group

This is why PLPs, PDPs, baskets and checkouts can look so similar. And this is a good thing! Small variations are introduced to suit use cases, but largely they follow the same standards for extra ease of use. 

—

Do you want to design a good checkout too? Come over here! 

—

However, homepages are different because of the various roles they play. 

Ecommerce homepages are the main entrance to the site when a user is engaged in active comparison, for example when a user is shopping for something they never bought before. 

If a user compares 3-4 sites, homepage first impressions can really count in taking someone deeper into the product pages. And can build associations in people’s minds that make purchases more likely. 

Your homepage should be an ode to your brand and be full of assets that embed your brand’s visual language into consumers’ minds. 
Make sure your marketing, ecommerce and product teams are involved in homepage design so that all views are taken into account.

Instil trust by showing your “reasons to believe”

As we know, homepages introduce brands and persuade customers. 

Therefore, it is very effective (especially for those newer brands with low brand awareness) to use the homepage as an opportunity to show your value proposition. When you do so, spell all the benefits of shopping with your company. 

Examples of these “reasons to believe” are

• A competitive fulfilment proposition (low delivery costs, delivery times, return management).  
• Sustainability credentials, specially certificates and accreditations such as B-corp, or stories speaking to this. 
• Social proof, in the form of review widgets or customer quotes. 
• Financing options, specially important for big-ticket items. 
• And of course, core brand benefits, hopefully relatively unique between your competitor set. 

Hope you found this useful.
Love, and conversions.