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:
- Show me what I’m looking for.
- Show me more.
- Show me where to start.
- 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 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.)
This home page has one purpose, to get you to test drive the software.
It starts with two promises:
- Build, publish & A/B test landing pages in minutes.
- 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.
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:
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.
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.
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.
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.
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.
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.
- Simpler is better: simple navigation, simple copy, simple design.
- Drive just one action, so visitors know what to do next.
- Lots of white space allows you to provide more information without overwhelming visitors.
- 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.