Ecommerce homepage design: 5 practical tips from the head of the UI / UX department

If you want to know how to create ecommerce homepage design according to the usability rules, what tasks it should solve and what typical mistakes can be made on it, this article will help you.

You will receive 5 practical tips from Denis Studennikov, head of the UX/UI department at Turum-burum studio, and learn about the correct structure of the main page, its features for mobile, and current ecommerce trends.

What should be on the homepage of an online store?

Homepage of an e-commerce website is the face of the company, its “shop window” and entry point. This is the place where potential customers get acquainted with the store and the products it offers. Remember the 3-second rule? This is exactly how much time a user would normally spend on deciding whether to stay on the site or leave. The main thing here is not to mess things up and properly place accents, arrange blocks and slides.

Also you can learn more about the importance of incorporating UX design into your development strategies from the article A Guide to Understanding UX Design: For Home Professionals.

Define the purpose of your homepage

The main purpose of the ecommerce homepage design is to distribute traffic by sections and offer as many entry points as possible. Thus, the user is sure to move on and take a deeper look at the products faster. Remember: the less time the visitor spends on the homepage of your online store, the better. According to Denis Studennikov, our UX/UI department head, only around 2% of visitors scroll down to the very bottom of the page.    

Once on the homepage, the user either goes to the catalog for further product search and selection or scrolls down. In the latter case, it is essential to arrange and prioritize the blocks properly.

Depending on the marketing goals of the online store, there are 2 main tasks that its homepage should pursue:

•       Maximum concentration of entry points

If it is a big online store of household and electric appliances, the main task would be to show the widest possible range of products on the homepage. Under the main banner you can place a block with hot offers, promotions, discounts, popular products and other items in the low- or middle-price segment that attract the visitor’s attention.

If the homepage is not the main entry point, then its role is not that significant, and the main task would be to guide the user by categories and facilitate the search.  

•     Image component

If the goal of your online store is to build a brand, the homepage primarily plays a representational role and only then addresses the issue of sales.

For example, the Intertop homepage is one of the most visited pages of the site. It is a famous brand, so people use a navigational query to get to the store.

In this case, it is important to show the image component of the online store and tell regular users about new arrivals.

That is why we used a multi-banner concept in this project — to let the business owner have as many opportunities to present new products and promotions as possible.

Use the crucial elements of the homepage

There are generally accepted rules for the homepage design, as well as key elements that need to be taken into account when designing an online store:

• Header with a logo is a mandatory part of the website design that should contain important information about the store (name, contacts, menu).

Above the header a top banner can be placed for promotions and news, as it is done in the Calvin Klein online store.

• The main banner is a quick way to show what the store is selling in general, as well as present the current promotions, hot deals, new products and sales.

• Product block thumbnails or slides are entry points providing quick access to top deals, new arrivals or promotional products.

Don’t choose just one way of presenting information, diversity is important. For example, you can display new arrivals in blocks, and special promotions — in slides, to avoid the “tunnel effect”, when the interface blocks look so much alike that the user’s eye is focused on just one thing, and the other elements stay overlooked.

• Unique Selling Proposition. Homepage is the place where you can communicate with your potential customer. Make the design for website homepage clear for the user what your advantages are, what makes you different from your competitors in the market, explain what your unique selling proposition is. Avoid trivial things (fast delivery etc.), make an accent on what really makes you stand out.

• Marketing blocks. It is a good idea to place a contact request on the homepage in the form of a subscription, a loyalty program or a special offer. To make it work, add some value for the user: a discount on the first order, an individual offer or access to closed sales.

• Footer. The importance of this website element is often underestimated. However, there is a certain pattern of user behavior, when they scroll down to the footer because they are used to seeing useful links there. So place the elements familiar to the visitors in the footer — for example, links to social networks, blogs, news channels, contacts.

Segment the audience

Creating several homepages is no longer a new trend in e-commerce. It has been quite effective, in particular, in the fashion niche (Yoox, LaModa, Pratik). In this case, during the first visit to the homepage, the user can be asked to make a selection by key parameters: for example, Women/Men/Kids. In this way, the homepage can be personalized and offer the most relevant products to each target audience.

Take into account specific features of mobile interaction

A mobile version of your online store is no longer a recommendation, it’s a requirement. Not only should the website elements be reduced and rearranged for it, but some blocks and features of the store should also be replaced. For example, in mobile the main banner and other images should be redesigned for portrait viewing.

Avoid common mistakes

Even if you choose the approach, strategy and arrangement of elements correctly, there are still things you can do wrong that will prevent you from reaching your goals. Here are some common mistakes you should beware of when designing the homepage of your online store:

• Too many slides cause the "tunnel effect” with the user, produce sameness and information overload;

• No description of the company, and/or the logo is not obvious;

• Irrelevant main banner that provides no understanding of what the store is selling, or even misleads the user;

• The website structure is defective. For example, right below the main block the Instagram block is placed, which takes the customer away from the official site. If you want to present Instagram content on the homepage, it would be a good solution to display a pop-up with a picture from the social network and a photo of this product on the site when a product image is clicked upon. And then take the user to the next stage of the funnel — the product card.

• Customer reviews about the products or the store are unnecessary on the homepage, they can be annoying and even decrease the customer loyalty.

As a result of such mistakes, some customers leave the website within the first seconds. Now you know what you should do for homepage optimization to avoid it.

Things to remember about homepage

When making ecommerce homepage design for your online store, do all you can to quickly take the users to the necessary section. Save their time on finding the relevant product card. If the majority of visitors scroll down to the middle of the page and then go to other sections of the site, it means you have managed to arrange your entry points properly.

Use the homepage to segment your audience, raise brand awareness and maintain your company’s online image, building on the core business goals.

You can also read about Website conversion rate optimization: Useful tips from 5 world-leading proven experts from Optimizely, Hotjar, CXL, Baymard Institute.

‍