Home Pages that Hit the Mark (And How Yours Can Too)

by 10 05/15/2013

What makes a home page great?

If your answer involves fancy technology or loads of affiliate links, you’ve missed the point.

According to Steve Krug in Don’t Make Me Think, the home page has four jobs:

  1. Show me what I’m looking for.
  2. Show me more.
  3. Show me where to start.
  4. Establish credibility and trust.

Tall order, right?

So let’s look at how four usability/conversion experts have done it on their sites… to get a sense of what works for them so you can do it yourself.

Unbounce

Unbounce is a landing page tool that make it easy to build, publish and test high-performing pages without an IT guy by your side. (On a side note, this tool works beautifully with Crazy Egg’s heat map software.)

unbounce landing page

The layout

This home page has one purpose, to get you to test drive the software.

It starts with two promises:

  1. Build, publish & A/B test landing pages in minutes.
  2. Increase the ROI of your marketing.

Then you’re asked to respond. The orange button asks you to “build a high-converting landing page now.” At the bottom of the page, the offer is made again: “Get more clicks, leads and conversions on your landing pages. Start a 30-Day Trial.”

In case you want more information before accepting your free trial, the page also gives you:

  • Social proof: 4,100 companies use Unbounce, including Intuit, Amazon and Twitter.
  • Testimonials from customers at two more big-time brands, HootSuite and Kissmetrics.
  • A little more information on landing pages, with links for readers who want more.

Why it works

When people visit Unbounce, it’s probably from a search for a landing page software. (As a test, I searched for “easy landing page” and found Unbounce near the top of page 1. The same with “landing page tool” and “landing page without IT.”)

As soon as I land on the page, I know I’m in the right place because of the brand promise across the top of the page. But it’s such a good promise, I suspect I’ll get even more than I expect.

And the page has a clean design with lots of white space, so I don’t have any trouble navigating the information on the page.

The page definitely measures up to Krug’s requirements for a home page:

  • The promise tells searchers they’re in the right place.
  • The unexpected perk is the simplicity of the product. Just three simple steps can yield a high-performing landing page.
  • Social proof and testimonials convey trust and credibility.
  • And where to start? Unbounce suggests a trial of the product.

One of the things I like about this page is that Unbounce doesn’t try to share the whole story on the home page. This is a sophisticated product, so there’s probably a lot to tell people. But all that’s shared on the home page is the core benefit. If you want more information, links are available.

How you can do it

No matter how exciting your product is or how big your story, don’t overwhelm your visitors the moment they click onto your page. Find the most compelling benefit and the strongest offer, and feature them.

Then take people on a journey through your website to learn the rest of the story. Think of it as a treasure hunt. One gold nugget here and another there.

Reveal your story one benefit at a time, and visitors will enjoy the hunt.

ConversionXL

Peep Laja offers website makeovers and reviews to help you improve your conversion rate. One of his tenets is “noise reduction,” or lean design, and his website is a case study in simplicity. Here’s his home page:

conversion xl home page

The layout

Against a white background, stark black and red text spells out the brand promise: websites that sell.

There’s no sidebar to distract you. No images or icons. This page is the elevator speech for Peep’s consulting business.

Below the brand promise, Peep tell you what you’ll find on the website: “advice that gets you better return on your marketing efforts,” with three bullets underneath.

Finally, you’re invited to sign up for his newsletter.

Why it works

A little-known trick among writers is to place the most important word or phrase at the end of a sentence — or, in this case, line of text.

That’s exactly what Peep does here. The last word of the first line is “websites,” and the last word of the next is “sell.” That’s his promise in two words. The fact that “sell” is in red simply adds to the energy.

While I’ve heard varying reports on wide opt-in forms — mostly that they don’t perform as well — on this page, it may work, if only because there’s nothing else to do here.

This page performs well against Krug’s requirements.

  • You know what the site is about.
  • The bullets hint at something more (particularly the ones that promise information no one else shares and making more money).
  • You don’t worry about where to start because the options are limited.

The only thing this home page doesn’t do is overtly build trust and credibility. That’s where the clarity of this page comes into play, though. Since there’s no hint of hype, I’m inclined to trust him.

How you can do it

This style of home page is definitely worth testing. Try distilling your brand promise into one simple statement, with a few bullet points to express what people will find on your site.

Personally, I’d like to add icons to each bullet point and link them to a second-tier web page. But that’s just me.

BlueAcorn

Blue Acorn is a full service eCommerce agency that helps retailers and brands get more sales with its build/attract/optimize approach. It takes care of design, development, marketing, and optimization for clients, so everything seamlessly works together.

blue acorn home page

The layout

When you land on this page, there’s no doubt about what you’ll find. The brand promise, “We drive eCommerce growth for retailers and brands,” is front and center. Below it is BlueAcorn’s three-step process: Build, Attract, Optimize.

To the left, there’s a ribbon that floats as you scroll down. It repeats BlueAcorn’s three-step process, and adds three extra navigation links. (The screen capture isn’t exactly right, probably because the element floats. *sigh*)

This ribbon and the interactive graphic in the body of the page create a unique, eye-catching anchor for this home page. They invite play and make you want to explore to see what other treasures you might find.

Scroll down and you get a mini sales presentation:

  • Differentiation: short blurbs explaining what BlueAcorn does that’s unique
  • Social proof: logos from big-name brands that trust BlueAcorn.
  • Introduction to the blogs

Why it works

This home page is beautifully laid out, informative, and best of all, fun.

All the marketing pieces are present. But after playing with the interactive elements, you’re already convinced. Differentiating statements are just icing at this point.

Does it line up with Krug’s requirements? Yes.

  • The brand promise tells you what the website is about.
  • The interactive graphic promises more good stuff inside.
  • The ribbon tells you where to start exploring.
  • Trust is built by clear, concise differentiation and its mention of client brands I recognize.

How you can do it

Try to break down your customer experience into three benefits… or your process into three steps. Make a landing page for each and link to them from your home page.

Of course, if you can make an interactive graphic, by all means, do that too.

MackWebSolutions

Mack Web Solutions is an organic web marketing agency dedicated to creating fresh, clean web designs that avoid ever-changing internet “fads.” It prides itself on keeping up with best practice so clients don’t have to.

mack web solutions home page

The layout

This is a sleek home page with a modular design that keeps you interested without overwhelming you.

Navigation is at the top right.

Below that is a cute headline: “It’s Mack. Not Mac.” This blurb explains what the agency does (web marketing) while creating a mental connection between its brand and Mac’s.

To the right is a link to the blog. Then, in a three-column section at the bottom of the page, come the marketing elements:

  • What we brag about
  • How we do it
  • Who we hire

Each module on the page links to an internal page that gives more information, allowing visitors to pick whatever topic they want to learn more about.

Why it works

This page is attractively designed and has the look and feel of a big-name brand, so my first impression is favorable.

While this page is a little text heavy — I can’t grasp what’s going on here unless I read — there’s enough white space to divide sections and give a sense of space, so it doesn’t feel like the page is all words.

Does the page perform Krug’s four requirements for a home page? Sort of.

  • It doesn’t tell me plainly what the brand does and makes no brand promise, per se. It’s implied but not clearly stated.
  • There’s no real hint of better stuff inside, unless you count the brand’s sassy personality. The first time I visited this website, I clicked through to a lot of pages, just to soak up more of this writing style. But then, I’m a writer. I do weird things like that.
  • Navigation and on-page links do a good job of helping me figure out where to start.
  • It doesn’t rely on numbers or brand names to build trust. Instead it uses a flash presentation of bragging rights. For brands that don’t have 100,000+ followers or big-name clients, this is a good way to go. It’s subtle, but it still builds credibility.

How you can do it

A modular design like this one makes it easy to present lots of information without creating a long stream of text that no one wants to read.

Put a brand promise in the main block of text so visitors know what you do or what they’ll gain from exploring your site. Then, like Mack, put three marketing elements underneath, each linking to an internal landing page that offers more information.

The take-aways

As you can see, great home pages don’t overload visitors with too much detail. They serve as an entry to your site, not an information dump.

  1. Simpler is better: simple navigation, simple copy, simple design.
  2. Drive just one action, so visitors know what to do next.
  3. Lots of white space allows you to provide more information without overwhelming visitors.
  4. Pare down your message to the core. One brand promise and three marketing elements may be all you need.

Then, following Krug’s advice, make sure people know at a glance what you do, what they’ll learn if they stay on your site, and where to start. Add a few credibility elements, and you’re good to go.

About 

Kathryn Aragon is editor of The Daily Egg and publisher of the C4 Report. She is committed to helping businesses communicate, connect, convert... and capture their market. Follow her on Twitter and Google+.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

10 COMMENTS

neale

Thanks Kathryn. I learnt a lot from this post. This is the first time I have heard about the “four jobs of the home page” I love simplicity and these make it real simple Thanks

May 15, 2013 Reply

    Kathryn Aragon

    That’s wonderful, Neale! I agree that a few simple rules make a big difference. Glad these hit the mark for you.

    May 15, 2013 Reply

Ashley Faulkes

Hi Kathryn, nice job yet again. It’s great to see so many nice web design principles put into practice with such success. Simplicity, white space, restricting the messages etc. So many people think you have to load up your pages and put tonnes of text everywhere, when in fact it is so detrimental!!

May 16, 2013 Reply

    Kathryn Aragon

    You’re so right, Ashley. Too much “stuff” distracts people and keeps them from taking action. Thanks for commenting!

    May 16, 2013 Reply

Oli Gardner

Thanks for the shout out and great critique Kathryn. It’s interesting to see our homepage through someone else’s eyes.

May 17, 2013 Reply

    Kathryn Aragon

    My pleasure, Oli. I enjoyed the chance to take a closer look at what you’re doing at Unbounce.

    May 17, 2013 Reply

Ruben Villanueva

Good article, however in my years of experience doing web design & digital marketing, designing a landing page based on the heuristic CRO principles works only as a fundation. The key to achieve results is to focus your entire energy on understanding your users minds by doing: market reserach, user interviews, remote usability testing, dynamic website survey, heat & click maps, talking to your customer service department, etc. Designing a landing page based on best landing pages practices will not guarantee whether you landing page will work since all users do not behave in the same way while navigating a website. So do all your research first and then jump to your slipt testing

May 18, 2013 Reply

    Kathryn Aragon

    Hi Ruben. I couldn’t agree with you more. This article wasn’t meant to be a guide to optimizing your home page. There’s absolutely no way we can touch on all those concepts in one article (at least, not with any depth). That said, I appreciate you adding to the discussion.

    May 19, 2013 Reply

Anupam

Kathryn,
coming to your point#4. Establish credibility and trust. i would stress on using customer testimonials. nothing helps build credibility more than your customers speaking for you. You can really make the site very engaging by using them smartly. if you want to see the best examples – customertestimonials.wordpress.com/2014/01/11/1-best-examples-of-customer-testimonials-on-the-home-page/
thanks, AB

January 12, 2014 Reply

    Kathryn Aragon

    Hi Anupam. Great point. There’s no better way to prove you’re trustworthy than to have your customers say so. Nice article, by the way. Thanks for sharing.

    January 13, 2014 Reply


Leave comment

Some HTML allowed

Get conversion optimization, design and copywriting articles FREE >>>