On average, visitors spend less than 15 seconds on your homepage before deciding if they want to stick around or leave. Think about that, only 15 seconds.
First impression lasts and you’ll want to make sure it’s a good one.
Just like a physical store where customers are turned away by unattractive store design and unfriendly sales assistants, e-commerce shoppers behave in the same manner.
A well-designed and easy to navigate e-commerce homepage is a winning recipe. It plays a critical role in determining if the visitor will spend time to browse the website and making a purchase or simply bounce.
You may have good quality products at the best price but without a good homepage, your visitors will leave without buying.
To help you design a high converting homepage, we have compiled 20 best practices across the industry which are key to create a winning homepage for your store.
First impression lasts and you’ll want to make sure it’s a good one.
1. Clear, easy to understand differentiation
Failing to clearly articulate your value proposition is one of the most common mistakes that turn customers away.
Once the visitor lands on your homepage, they should immediately be able to tell what they can expect from your store. Make sure that your logo is clearly displayed on the homepage.
Besides that, you need a tagline or value proposition that your business brings. It doesn’t need to be complicated but needs to communicate the unique value of your brand.
Magic Spoon makes it clear that they are the first company to make low-carb, high-protein breakfast cereal. It’s a simple description that highlights their first to market status and their product benefits (low carb, high protein).
Think about your products, are they unique from what competitors are offering? Are there any extra benefits that your brand brings to the table? This could be customer service, quality or price.
Make sure that the differentiation is clearly displayed on your homepage.
2. Attractive banners, images that showcase your products
Banners are the first thing potential customers notice on your homepage as they tend to be the most prominent part.
If the banners are attractive, customers are more likely to click on the image and check out the rest of your website.
Remember the objective of any homepage is to invite visitors to click and view a category or product page and therefore ushering them closer to the purchase.
The banners need to be well-designed and go well with your design language. Banners can be of a product, category or general value proposition. However, make sure the photos you use are of high quality and resolution.
Since banners are the first thing your visitors see on the homepage, make sure the design is simple yet eye catching. It should also have a call to action, whether a link to the product page or current promotion.
Huel does a great job with their homepage banners which are simple and bold. The images are clean and the black & white tone goes well with the design language.
Remember the objective of any homepage is to invite visitors to click and view a category or product page and therefore ushering them closer to the purchase.
3. Grid banner layout
We strongly caution against a banner slider or slideshow.
Many studies, including one done by Google, have shown that it doesn’t work. They are distracting and confuse your visitors. And they look bad on mobile. Most visitors view sliders as spammy ads so they ignore them straightaway.
This is called banner blindness.
A much better option is a grid layout. This means showing your banners as static images. When images are shown at the same time, it’s less overwhelming and visitors can proceed to click on the image that is the most eye catching. The most important message like your promotion can still take the central place.
Take a look at the example below:
Instead of showing all the main categories as a slider, Roval displays their main categories as static images.
4. Add a prominent search bar
A homepage is incomplete without a search bar. If a customer comes to your website knowing exactly what they’re looking for, they are further down the conversion funnel and you should make sure they find what they want in the fastest and easiest way possible.
Customers who complete a search are 3x more likely to complete an order.
A popular feature of a search bar is autocomplete and autocorrect. Some advanced homepages also automatically show you photos of the search results as you type the keyword.
Tony Bianco shows search results as images automatically.
5. Easy to navigate menu bar
Pictures speak a thousand words. Without peppering the homepage with too much text, you should rely on images to guide visitors so they can find what they’re looking for.
Most rely on the homepage and menu bar to understand what your store is selling. A winning homepage encourages visitors to explore the site further.
Images are also really useful when you have many categories. You don’t have to display an image of every category to avoid overwhelming visitors. Instead, you should pick a few main categories that you know are popular and use thumbnail images in the menu bar.
Have a look at Rebecca Minkoff. Once you place your mouse pointer on any category in the menu bar, a relevant image appears.
6. Feature top categories
Recommending top categories gives your visitors a good sense of what to buy.
It can be a few top selling categories like what Swarovski has done.
To come up with good categories to showcase, I’d encourage you to think about your visitors and their reason to buy.
For instance, if you own a furniture store, your customers probably have different tastes like Scandinavian, vintage or modern. You can showcase these tastes by featuring them as categories.
This encourages customers to explore different products and therefore giving them a much better shopping experience.
This applies to fashion stores as well, you can segment customers by occasion. And if you are selling children products, you can segment by age.
An example of segmenting by use case is Quadlock who segments their customers by the key occasions their product is used for.
The key here, as always, is you need high quality and high resolution images.
To come up with good categories to showcase, I’d encourage you to think about your visitors and their reason to buy.
7. Showcase bestsellers, top products, new arrivals
It goes without saying that a homepage without products is incomplete. Showcasing your products throughout the homepage is a good way to inspire customers.
The caveat is you should show the right amount of products to represent the product diversity but not overwhelm customers with choices. One common type of product carousel is to feature bestsellers or new arrivals.
The Modern Shop shows top selling products on their homepage.
8. Personalize your homepage
While the homepage is important to allow product discovery, you shouldn’t overdo it as it will lead to a situation called choice paralysis.
As the most prominent part of your website, the homepage receives a lot of different types of customers. One surefire way to ensure that everyone has a good shopping experience is personalization.
30% of Amazon’s e-commerce revenue comes from personalization. Yes, it’s very effective.
Based on each customer’s browsing history, you can curate products that are the most tailored to their interest. This can be achieved with personalization tools.
Personalization is often regarded as an afterthought but it plays a very important role in improving conversion and average order value. Customers are also more likely to become repeat customers as they believe you understand their needs.
One surefire way to ensure that everyone has a good shopping experience is personalization.
Personalization shouldn’t only be limited to product recommendations. Banner images can also be automatically adapted to suit each visitor’s interest to give a full and complete personalized shopping experience.
Giani Dafirenze creates a personalized experience for every visitor through personalized banners and product recommendations.
Notice how the set of banner images has changed in the following image after a visitor has taken an action such as viewing different products.
9. Avoid clutter, keep it simple
A crowded website gives off the vibe that your website is not authentic and professional. Worse, if customers feel overwhelmed, they will leave.
84.6% of online shoppers says that crowded design is one of the most common turn-offs they experience.
It’s best to keep the design simple and to the point. Stick with a few colors and elements that define your brand language.
This is also another important reason why personalization is so effective at filtering information to make sure that each customer only sees content they care about the most.
Kopa Life has a very simple design language using three main colors (pink, light grey and black) to help guide users to find products they want to buy.
10. Show social proof and testimonials
There’s nothing that cements trust more than customer reviews. Pick a few that you can showcase on the homepage. Think about #1 which is your value proposition. If your unique value is based on quality or customer support, pick reviews that echo this sentiment.
Caseco shows customer testimonials on their homepage.
11. Make sure pageload is less than 3 seconds
Nothing chases customers from your website faster than slow pageload. A delay of just 100 milliseconds can reduce conversions by 7%. It’s horrendous.
Do a frequent audit of your website and identify opportunities to optimize speed. There’s a few free tools like Google’s Pagespeed Insights. Most of the times, the culprit is heavy images so you may want to think about resizing and compressing them.
12. Clear delivery and shipping policy
Delivery and shipping should be clearly stated on the homepage. If you have an attractive shipping offer (free shipping or express option available), this can improve conversion. If your customers are from different countries, you should mention if you ship overseas.
Shipping message is usually on top of the homepage, either on the right or left side of the page.
Ryderwear’s shipping policy is front and center on their homepage.
13. Clear return procedure and policy
While shipping policy needs to be clear and obvious on your homepage, so does the return procedure.
After all, a whopping 67% of shoppers will check your return policy before placing an order. Making your return policy obvious can encourage purchase and therefore improve conversion.
Nimble has a page dedicated to their return policy and commonly asked questions.
14. Show an option to contact customer support
Customers are more likely to buy if they feel reassured that their queries will be answered as soon as possible. A common method is to display your contact number at the top of your homepage, just above the navigation bar.
Showing the phone number gives a personal touch and increases conversion as customers will buy when their needs have been answered. Less important contact information like address can be at the footnote or the about us page.
Caseco has a contact number displayed on top of their website.
15. Live chat feature
Customers will have queries and they want answers fast. Aside from giving your contact number, you may want to install a live chat support.
This is great for improving conversion and reducing cart abandonment.
All birds has a live chat app on their website with a few frequently asked options.
16. Place less useful information in the footnote
80% of your homepage should be all about your value proposition and product offerings. If there’s other information left out in the main section of the homepage like return policy, size or measurements, you can place them in the footnote.
Customers expect to find content in the footnote and doing so improves user experience.
Gymshark has a great example of what should be contained in the footnote including help pages and newsletter signup box.
While you are at this, you should also make sure to remove ‘Powered by Shopify’ that comes with the theme if your store is new. You can follow this simple guide.
17. Responsive for mobile
Mobile transactions will reach 73% by next year. It therefore is imperative that you design for mobile first.
Take a look at this example from Tony Bianco. Notice a very big search bar that’s integrated with the latest Instagram posts.
And this is their desktop version.
Other considerations you need to keep in mind for mobile-first design include:
● Big and friendly CTA
● Hamburger menu on the side
● Design big, stay away from pinch and zoon
● Easy to navigate
18. Add an email subscription box
Email is a good way to build followers and keep your customers engaged.Most stores have their email subscription box built in at the bottom of the homepage.
If you write a blog, you can also showcase a few popular posts here as well.
Pura Vida’s email subscription is at the bottom of their homepage near their footnote.
19. Add social media and latest Instagram posts
Showing latest Instagram posts is a form of social proof. It’s telling your customers that your store is active with real customers using your products.
Noli yoga’s latest Instagram posts can be found towards the end of the homepage, showcasing influencers and real customers wearing their yogawear products.
20. Have an ‘About Us’ page
Most visitors will be curious about your website, especially if it’s new. What matters is the why, not the how.
Create an ‘About Us’ page to tell your customers about your passion, why you’re starting this business and the mission of your brand.
Everyone has a story to tell and it’s a good way for the customers to know you and your brand better. Customers buy because they feel their value is aligned with the brand’s mission.
Pura Vida’s About Us page is all about the founders’ origin story and what they want the brand to accomplish.
Summary
Your homepage is the most prominent part of your website as it’s where most customers land.
A good homepage encourages customers to explore the site further and find products they desire to buy. And this is exactly why you want to nail this and create a high converting homepage.
It’s important to keep in mind that homepage optimization is an ongoing process and you need to continuously optimize and learn from the best in the industry to ensure every customer gets the best user experience possible.
