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.

The Ideal Home Page

Remember that your home page primarily exists to get people to browse and view products. Its calls to action are unlikely to do that alone; what really matters is your navigation, and how easy it is to make decisions with it.

Mobile first

The majority of most stores’ traffic comes from smartphones, and they lag your store’s average conversion rate by at least a third. That makes mobile your biggest conversion opportunity.

Since the only correct way to build your store is mobile-first right now, let’s talk about what your mobile layout looks like:

We’ll get into page content in a minute. There are a bunch of details here that are worth discussing:

• The hamburger menu should be at top left, and the cart should be linked at top right, in a sticky header nav.
• No live chat widgets or other distracted sticky elements.
• Tap targets and nav items should be separated by at least 44pt, so that people with larger fingers don’t erroneously tap the wrong thing.
• Functional links should be visually distinct from browsing links.
• Search should be linked inside the hamburger menu.

Desktop

Here are our sketches for how desktop layouts should look:

Our recommendations here go more into content, but there are a few takeaways for the nav as well:

• Primary nav should focus on browsing the product catalogue, not on the store’s branding or content marketing. That means that primary nav links should go to category & product pages, not the blog or about pages.
• The masthead shouldn’t have a carousel, and it should have a clear headline & colored-button CTA.
• A very brief brand statement should appear below the masthead. What do you sell, and what makes you uniquely different from competitors?
• No more than 2 downsell products should appear below the brand statement.

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 →