How to Build an "Upside-Down Home Page" (The Highest Converting Home Page Design I've Seen)

Editor's Note: We're excited to introduce this guest post from Bryan Harris. A serial entrepreneur since childhood, Bryan is the force behind business-growth and video site Videofruit. Today, he's sharing the results of a major shift in his home page design—and how it's getting him 35% more email subscribers each week.

Ever been embarrassed by your website design?

I was.

People would ask for a link to my website and I would hesitate to give it to them because I hated the design so much. The front page looked horrible, the blog itself was a cluttered mess, and I knew it.

Finally, a few months ago, I decided to fix my home page design.

Over the last 90 days, I've engineered the highest-converting home page design I've ever seen.

Not only does the new design look 100 times better, but it's also increased the conversion rate, which has increased the number of new subscribers to my site by 35%.

It worked so well that I created a Leadpages template of the design and went to several of my friends and asked them to test it on their sites to see if it would improve their conversion rate as well.

The results?

Blogger Jeff Goins got 2,500 new email subscribers from the page.

Andrew Warner of Mixergy got 1,200 new subscribers from the page.

Over and over again this new page design and layout have proven to be a winner.

So today I want to show it to you.

(Note: Big thanks to Devesh Khanal, Mariah Coz of Femtrepreneur and Jane Portman of UI Breakfast for their help in design, copy, and testing on this project.)

Here is what you’re going to learn today:

First, I'm going to give you an overview of the new layout and design.

Then, I'll walk you through how to write and properly set up your new homepage.

By the end of this article, not only will your new homepage be beautiful, it will also grow your audience faster than ever.

Ready?

Let's go!

Overview of the upside-down home page

This new homepage layout and design are fundamentally different than what you are used to.

Let's start with a quick walkthrough:

There are 6 main sections of the Upside-Down Homepage.

Part 1: Above the Fold

The top page is dedicated to one thing: giving your readers what they want. Many websites push this call to action to the sidebar or footer. However, I've found that by making it the first thing someone sees when they come to your site, it increases the chances of them seeing it and acting on it.

Part 2: Social Proof

The social proof section indicates that you are someone to be trusted, based on the sites you have been featured on and companies you have worked with.

Part 3: Your Road Map

The road map gives your reader a quick glance at the path you are going to walk them down as they get to know you. In this part of my home page, I cover three main topics that are important to my blog and business: building an audience, creating products, and launching products.

Part 4: Pilot Story

The pilot story is the key to the Upside-Down Homepage. Instead of letting your best content get lost on page 10 of your blog, the pilot story highlights your best content, introduces the new reader to you and your site, and then gives them a call to action to learn more. (More on that in the next step.)

Part 5: Call to Action

The call to action at the end of your pilot story works much like a content upgrade in a normal blog post. It takes your reader by the hand and leads them to the next thing you'd like them to do.

Part 6: Navigation

This is what makes this home page “upside-down.” Most websites have their navigation at the very top of the page, but we found moving it to the bottom of the page increased focus and conversions.

How to create your own upside-down home page

Part 1: Above the Fold

At the top of the Upside-Down Home Page, you’ll see the main call to action.

As soon as your reader hits your website, they have the option to immediately sign up for your list.

Here’s what the above-the-fold call to action looks like on Mixergy’s homepage.

Mixergy’s main call to action is to “Learn From Proven Entrepreneurs,” and they give away their top 9 interviews of all time. This demonstrats an effective call to action strategy.

You’ll notice the hard call to action in the yellow button.

Clicking that brings up a lead magnet to collect opt-ins:

When creating your Upside-Down Homepage, don’t randomly choose your above-the-fold call to action. A great way to pick a call to action that converts is to use the headline from one of your most popular blog posts.

For example…

If one of your most popular articles is “10 Ways to Teach Your Puppy to Walk on a Leash,” you can take that headline and adapt it as your above-the-fold call to action with something like this: “Just got a puppy? Download our free guide that will show you 10 ways to teach your puppy to walk on a leash.”

Your action items:

• Action Item #1: Identify your 5 most popular blog posts.
• Action Item #2: Pick the article that would best fit a beginner to your website.
• Action Item #3: Wordsmith the headline of that article for your above-the-fold call to action.

Part 2: Social Proof

The second part of the Upside-Down Homepage helps to instantly give you credibility in the eyes of a new visitor by showing that you’ve worked with companies they are already familiar with.

Like this:

If you haven't been featured on a site yet, this can be a great place to use a quote from someone you respect to build social proof. If you’re an entrepreneur, a quote from Seth Godin or Gary Vaynerchuk would work well.

The key here is to show your audience that you are someone they can trust.

Your action items:

• Action Item #1: Make a list of companies you have worked within the past.
• Action Item #2: Make a list of websites you have been featured on.
• Action Item #3: Select 5 of the most popular items from your two lists and feature them in this section of your homepage.

Part 3: The Road Map

Remember those Choose Your Own Adventure books you read growing up?

That’s what a road map is for your homepage. It lets each visitor to your site select the stage they are at in your sales and content funnel.

For my company, every reader can be at one of three distinct stages. They are either growing their audience, creating products, or launching products.

By giving my readers the ability to select the information they are most interested in, I can serve them more relevant content and products.

For example…

If someone chooses the call to action in the “Grow Your Email List” section of the road map, I know this is someone who is a good candidate for my free class on that topic, Audience From Scratch.

However, if someone chooses “Launch Your Product,” this person is most likely someone who is more advanced and who I would want to follow up with as a potential coaching candidate.

Your action items:

• Action Item #1: Map out the 3 main stages that your customers go through.
• Action Item #2: Identify existing content you have already created for each of these stages.
• Action Item #3: Fill out your road map with each stage and give away the existing content as a lead magnet.

Part 4: Pilot Story

The third part of the Upside-Down Home Page is where things get interesting.

It’s the secret sauce.

Most websites have an above-the-fold call to action. Many use social proof and some even use a road map to help their customers find their best content.

But after that, it’s just a mess.

A typical website gives its visitors too many things to do. With the Upside-Down Home Page, we do the exact opposite.

I want you to think of your home page as the pilot episode of a TV show.

The job of that pilot episode is to hook viewers with a compelling story and get them to watch the next episode. The exact same thing is true of your home page. The #1 goal of your home page is to capture your visitors’ attention and get them to keep reading.

So instead of cluttering this area with other calls to action, we’re going to use what’s been proven to work:

Your best story.

We’re going to use the best content on your website to hook your new visitors and then give them a call to action to subscribe to your email list to learn more.

Let’s walk through the two primary steps.

Step 1: Find your best content.

To find your most popular content, follow these steps:

1. Log into Google Analytics.

2. Click “All Web Site Data” for the site you’re analyzing.

3. In the sidebar, scroll down to and click on “Behavior > Site Content > All Pages”

4. Scroll down to see the stats for your site’s traffic and you’ll notice the most visited pages on your site. Be sure to sort by “Pageviews.”

Chances are your homepage is ranked #1, followed by a page or post that’s getting the most attention. Choose the content that’s ranked highest here.

Now it’s time to structure your pilot story so that your visitors are compelled by it and follow your call to action at the end.

To do that, start your story by sharing an attention-grabbing result.

In Mixergy’s case, we started the article by sharing the result that the interviewee experienced.

Once you’ve introduced the result, you need to do three things:

Thing #1: Keep your readers’ attention by sharing the problem that the subject of the article experienced.

Thing #2: Agitate that problem by talking about the struggle that happens when trying to achieve the result.

Thing #3: Give the reader a small glimpse of the solution.

Here is an example of all four elements in action on the Videofruit homepage:

Your action items:

• Action Item #1: Pick the piece of content you’ll use as your pilot story. (Make sure it’s one of your already-popular articles.)
• Action Item #2: Format the article to follow the four-part structure we outlined above (result, problem, agitate, solve).

Part 5: Call to Action

Remember the last time you binge-watched a show on Netflix? What happens at the end of each episode?

They make it extremely easy to watch the next episode by auto-playing it.

The call to action at the end of your pilot story is your auto-play.

The call to action should tell your readers what to do next.

I recommend saving the meat of the content you used for your pilot story and giving it to the readers here.

For example . . .

In the pilot story on Videofruit I tease out a marketing strategy I discovered that increased my traffic by 25%. This is how I set up the call to action at the end.

Your action items:

• Action Item #1: Write the conclusion of your pilot story by teasing out the lead magnet your reader will get when opting in.
• Action Item #2: On the button that triggers your lead magnet, tell the reader what to do (click) and what they’ll get (the formulas).

Part 5: Navigation

The last part of the Upside-Down Homepage is what truly makes it 'upside-down,' similar to how some people create engaging Instagram posts upside down.

Most people put their navigation links at the top of their site. We do the exact opposite. We put them in the footer.

Like this:

We’ve found that by moving the navigation links to the bottom of our homepage, our bounce rate decreased by 83%.

That means people are MORE likely to stay on our site when we tell a good story FIRST and give them options SECOND.

Your action item: Move your navigation links from the top of the page on your homepage to the bottom.

Get the upside-down homepage template

The Upside-Down Homepage is a super-simple way to increase the conversion rate of one of the most visited pages on your website.

Want a free copy of the Upside-Down Homepage template?

Here’s what I want you to do right now (this should take no more than 60 minutes):

1. Download your free copy of the Upside-Down Homepage, if you haven’t already.

2. Locate the most popular content that you want to feature on your Upside-Down Homepage.

3. Follow the pilot story framework to complete your Upside-Down Homepage.

Get to it!