Out now: Finding Clarity in Uncertainty, a how-to guide for navigating difficult economic moments. Stay informed.

The Job of a Home Page

 

Based on my experience with tearing down hundreds of stores’ home pages over the past few years, a few big trends have become apparent – some good, others in need of improvement.

What’s the fundamental purpose of an online store’s home page, and how can you rework yours to function similarly?

Navigation

By far the most important element on your store’s page is your navigation. Home pages are the springboard for further browsing in the vast majority of customer sessions, and your navigation is expected to work in a specific way.

Move functional links into your footer, and keep your primary navigation focused on either the cart or primary navigation categories. Hiding the entire shopfront behind a “store” mega menu is tremendously risky, as it requires customers to click once before they can even see what you’re selling.

Navigation should be sticky on both mobile and desktop, meaning that the header remains stuck to the top of the screen as the customer scrolls.

And finally, this should go without saying, but if you like making money and capturing leaking revenue, navigation should be designed mobile-first, along with the whole rest of your store.

The masthead

People use your home page’s masthead to determine what you sell, what you might have on sale, and your overall brand values. Your masthead should include a full-bleed photograph, and should probably not be in the form of a carousel unless you’re willing to put in the significant effort to implement it correctly.

Text should be text, not text superimposed over an image.

There should be a primary call to action in the form of a colored, opaque button with real text.

Literally do whatever else

As you run heat & scroll maps on your home page, one thing you might find surprising is the sheer quantity of content that customers don’t read. Most people only look at the top two screenfuls of content, instead choosing to use your masthead & nav to parse what you have on offer.

Think of your store like a news article that follows the inverted pyramid method of reportage. The first paragraph of a news article is always the most important, and the final paragraph is always the most throwaway. The same with your store: the most important content should be in your masthead, and it should be listed in descending order of interest to the customer.

The final option

There is one exception to the inverted pyramid rule, and that’s the final option that you give customers.

Once someone gets to the bottom of any page on your store, you want to give them a clear next step, so they don’t encounter any perceived dead ends. This could range from a downsell product to a discount offer to an enticement to sign up for your store’s mailing list.

Baseline home page optimization

First, run heat & scroll maps on your existing home page.

Then, run a test that cuts any content that fewer than 25% of customers are viewing in your scroll maps – as well as any content that isn’t clearly focused on conversion. Note that this might comprise a lot of your home page.

Segment your experiment’s traffic by people who land on your home page: that is, your home page should be the first page that your customers view in their session.

This is an easy-win test that we often see increasing conversion rate well over the industry average – because it’s backed up with clear evidence, and because it’s focused on significantly reducing page weight.

← Back to the Blog Check Out Draft’s Store →