The Homepage is Where the Heart Is

Many marketers end up building several websites over their careers, with some running into the dozens of completed projects. I built a few dozen myself before I started thinking critically about what each page stands for.

conversion gold

In a typical browsing session I’ll see a lot of pages that have multiple goals. It’s a lot to ask of a single page to complete one goal, much less two or three. Four? Fuhggedaboutit.

The next few issues of Conversion Gold will be about specific page types. We’ll evaluate the distinct roles that they play on the site, and the distinct goals and outcomes they attempt to serve.

I’m going to start with the homepage — it’s the most iconic of all pages, and the central “beating heart” of your website.

The Job of the Homepage

We ask a lot of the homepage. The good news is that I’ve often seen that it’s prioritized correctly, in terms of design resources and attention to detail, but the bad news is that it’s often under appreciated in terms of optimization efforts.

Most people don’t really consider that the homepage can contribute heavily to driving sales. Aside from the plain commercial value, the homepage also functions strongly as a utility for driving the initial visit session.

As with any optimization project, we have to start with a plan. Know what you’re optimizing for before you begin.

Here are the jobs that the homepage is tasked with:

Readers of ConversionGold are also familiar with the notion of context.

These questions, while subjective and unique to your project, will surface the context for your homepage.

Designing a homepage

First we’ll start with navigation.

This is a site wide element, so changes that you make here should be representative of what you’d like users to have across the site. It’s a best practice to feature the primary content sections (not individual products, generally). Move anything extraneous into the footer.

Users infer a lot about your product selection from the navigation bar. Please don’t hide all of your categories under “Products” or some such, as a way to minimize the amount of links. If you have more than reasonably fit into the navigation bar choose to highlight the most popular categories (and be sure to strike a balance that still highlights the breadth and scope of your product selection at a glance).

Somewhere around the navigation you should include (if applicable):

These two pieces of information contribute heavily to establishing trust early on. People want to know that they’re buying from a real company with real customer support.

It is probably the best of all best practices to include a search feature if your catalog warrants it. If you sell just a few products, you can probably get away without using one. If you do though, please make sure that you have autocomplete, even for misspellings. Also, make sure to periodically review the search queries for new product listing or title ideas.

Next comes the hero section.

Before you even think of using a carousel, just know that users typically hate them, and the vast majority of UI/UX research supports not using them.

If you’re still unconvinced, check this out:
http://www.shouldiuseacarousel.com

Take the content that you were going to put into the carousel and put it on the homepage as static elements instead. Please 🙂

If you’re going to introduce your brand using one hero image (and I suggest that you do), please make sure that it doesn’t look like it’s been taken from a JCPenney catalog. Lifestyle images are great, but they have to look authentic. The way that I often describe this to people is that you want the photographer to focus on the people in the photo, not the product. Flip that switch and all of a sudden your images begin resonating with people more often.

Make sure to include a CTA above the fold, typically in the hero section. It should directly relate to the products featured in the hero image. Shop now is not very specific, so choose something category specific (or product specific if you have a small shop and are featuring a product in there).

Introducing products

One common issue is featuring too limited of a scope of products. Lots of users (especially mobile) scan homepages to understand what it is that you’re selling. If the products featured adhere to too narrow of a scope, you’ll give them the wrong idea. This issue is particularly problematic on mobile, where many designers/developers will responsively hide content to optimize the experience.

A word on distraction and information overload

Another issue is offering too many distracting elements and competing content groupings. Users will overcome the confusion some of the time, but they’re far more likely to become overwhelmed and lose patience deeper into their session. I saw this time and time again with the user tests that I reviewed. If the homepage is too busy, they’ll begin the session with less patience and less “drive” than they would have otherwise. Throw another couple of frustrating pages at them and they’re gone, poof.

Trust and Testimonials

The homepage is a great place to establish trust and authority. If you’ve been following along, you’ve already got your phone number and your identity on the site. Your pictures look real. You are clear about what you sell. Your website is easy to understand in a brief couple of seconds.

I consider trust seals, testimonials, and brand logos to be leverage. They don’t convince people with zero interest to buy, but they take someone on the fence over the finish line.

The homepage is a very appropriate page to feature brand level testimonials. You should probably reserve product level testimonials for the product page, but if your homepage has product level focus, you can include those here too if the proximity and location are relevant to imply a content grouping. Simply put, you want the display the testimonial next to the related product.

This also includes category level testimonials (i.e. if you sell cars, suvs, trucks, you could feature a car testimonial under the cars content grouping, suv level under the suv section, etc).

One common issue I see is that sites have really long testimonials. Users aren’t going to read them. Try offering a subject line or a title to each testimonial. If you really need to have a long testimonial, try to bold certain key sections. I might add though, if you can choose a key section to bold, you can probably trim down to just that anyway.

Let’s take a testimonial through the process.

Original:

Conversion Gold is awesome. I run a digital marketing agency and we’ve been expanding into offering conversion services for our clients, so the information is timely, insightful, and actionable. I would recommend this to other agency owners. It has really helped drive our business, and Terry knows what the heck he’s talking about!

Bolded:

Conversion Gold is awesome. I run a digital marketing agency and we’ve been expanding into offering conversion services for our clients, so the information is timely, insightful, and actionable. I would recommend this to other agency owners. It has really helped drive our business, and Terry knows what the heck he’s talking about!

Trimmed, edited, formatted:

Conversion Gold is Awesome

Conversion Gold has really helped drive our agency business, and Terry knows what the heck he’s talking about!

A quick word on homepage length

I’ve seen dozens of studies on homepage length, but none of them really seem to agree on much. There are simply too many variables at play to establish routine best practices. It’s something you should definitely test on your own site though. Do all of the elements contribute to goal completion? Do a multi-variate test to test each section and know it’s worth.

Also be aware that it’s not always the content that holds things back, but the presentation. So before you get excited about removing half of your page, talk to some actual users. Run some eye tracking studies (with something like feng-gui.com) and take a look at heatmaps and session records. See what people do. If there’s an element that is way more visually dominant next to information that you consider to be essential, perhaps play with emphasis and de-emphasis. Test again. Rinse repeat 🙂

One thing is for certain though, please don’t paginate your homepage. I know that you wouldn’t, but I’ve actually seen it.

Resources and Case Studies

Here is a massive list (and long read) on 113 design guidelines for homepage usability by Jakob Nielsen. It’s worth the read, but if you don’t have the time here are the top 10 (by the same author).


I still do not recommend using a slider, but there are ways to fix some of the primary issues that might be interesting to some of you. If you absolutely have to use a slider, here are 9 requirements for designing a user friendly slider by Baymard.


Jakub Linowski (from GoodUi.org) posted a video yesterday on why you should focus on running a handful of big a/b tests vs running lots of smaller ones. It’s a mistake that almost all of us make and this is a great reminder, even for seasoned CRO pros.

You might also like:

Wait, there's more

Drop your email below and you'll get a notification when I post new stuff.

    I'm a developer, marketer, and writer based in Appleton, Wisconsin.