How to Build an Upside-Down Homepage (And Boost Conversions)

There’s a chance that your homepage is working against you.

A good chance, actually.

The problem with most homepages is that they’re trying hard to be everything to everyone. They’re trying to prove value. They’re trying to tell your company and brand story. They’re trying to get you deeper into the company funnel and sell you something. And then they inundate you with a bunch of different options, plus navigation, and expect that it’s going to be good for business.

When it comes to homepage design, there really is such a thing as working too hard. Because that’s a lot of heavy lifting for a single page to do.

That’s where the “Upside Down Homepage” comes in. It effectively improves your homepage’s performance by simplifying the layout and putting a focus on what’s truly important.

When Growth Tools founder, Brian Harris, originally implemented his upside down homepage, he increased new subscribers by 35% almost instantly.

It worked so well that he created a Leadpages template of the design and sent it to several friends and asked them to test it on their sites as well.

The results?

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

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

Over and over again this page format has proven to be a winner. So it’s probably going to be a winner for you, too.

By the end of this post, you’ll understand how Upside-Down Homepages work, how they’re laid out, as well as know how to write and properly set up your new homepage.

First, why is it called an Upside-Down Homepage?

Very simply, because you take elements that are normally at the top of the page—namely navigation—and move it to the bottom. The idea with this approach to homepage design is that it reduces distractions and points of friction while forcing your reader to read what’s directly in front of them.

Overview of the Upside-Down Homepage

This homepage layout and design is fundamentally different than what you’re probably used to.

Let’s quickly go through the 6 main sections of the Upside-Down Homepage.

Part 1: Above the fold

The top of the page is dedicated to one thing: your primary call-to-action—the number one thing you want your visitors to do. Many websites push this over to the sidebar or down to the footer. But, by making it the first thing someone sees when they come to your site, it increases the chances of them acting on it. Simple, right?

Part 2: Social proof

The social proof section tells visitors that you’re someone to be trusted. This can be sites that you’ve been featured on, companies you’ve worked with, or clients that you’ve gotten great results for.

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 our example, we touch on the three main topics that are important to this business: building an audience, creating products, and launching products.

Part 4: Pilot story

Your pilot story is the key to the Upside-Down Homepage. Instead of letting your best content collect dust on page 10 of your blog, the pilot story puts that content front and center and prompts them to read 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 leads the reader to the next thing you’d like them to do.

Part 6: Navigation

This is what makes this homepage “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 Homepage

Part 1: Above the fold

At the top of the Upside-Down Homepage, you’ll see the main call-to-action. As soon as a visitor 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 our template.

The main call-to-action is to “Get More Customers,” and they give away the top formula that they use to get more customers and grow their audience.

Clicking the hard call-to-action in the white button brings up a form to collect opt-ins.

When creating your Upside-Down Homepage, it pays to spend a bit of attention and time crafting a message that resonates. 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 you can make leash-training easier and more effective.”

Key steps:

1. Identify your 5 most popular blog posts.
2. Pick one that would best fit a first-time visitor to your site.
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 gives you instant credibility in the eyes of a new visitor by showing that you’ve worked with companies they’re 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. If you’re an entrepreneur, a flattering quote from a customer, mentor, or industry peer can work well.

The key here is to show your audience that you’re not some fly-by-night operation; you’re someone with real credentials and a reputation that they can trust. Social proof is a pretty standard element of any homepage design. But it’s an important one to include.

Key steps:

1. Make a list of companies you’ve worked with.
2. Make a list of websites you’ve been featured on.
3. Choose 3-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 or where they want to go in your sales and content funnel.

In our example, the reader would be at one of three stages: They’re either growing their audience, creating products, or launching products.

By giving the readers the ability to select the information they’re most interested in, we can serve them more relevant content and products.

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

Key steps:

1. Map out the 3 main stages that your customers go through.
2. Identify existing content you have already created for each of these stages.
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 Homepage 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 homepage gives visitors too many things to do. With the Upside-Down Homepage, we do the exact opposite.

I want you to think of your homepage as the pilot episode of a TV show—where the job is to hook viewers with a compelling story and get them to watch the next episode.

The exact same thing is true of your homepage.

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

Your best story.

Use the best content from your website to lure your new visitors in and then give them a call-to-action to join your email list and learn more.

Here’s how to find your best content:

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.

Then, structure your pilot story so that it’s compelling enough for your visitors to click your call-to-action at the end.

As an idea, start your story by sharing an attention-grabbing result that you’ve achieved.

Mixergy shared the result that the interviewee experienced.

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

1. Keep your reader’s attention by sharing the problem that the subject of the article experienced.
2. Agitate that problem by talking about the struggle that happens when trying to achieve the result.
3. Give the reader a small glimpse of the solution.

Key steps:

1. Use Google Analytics to identify your site’s most popular content.
2. Pick the piece of content to use as your pilot story.
3. 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 started watching a series 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—it should tell your readers what to do next.

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

For example, this pilot story teases out a marketing strategy that increased traffic by 25%. This is how we set up the call-to-action at the end:

Key steps:

1. Write the conclusion of your pilot story by teasing out the lead magnet your reader will get when opting in.
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 its namesake—what truly makes it “upside-down.”

Most people put their navigation links at the top of their site. On an Upside-Down Homepage, we put the navigation at the bottom.

Like this:

It’s a super simple, but extremely effective approach to homepage design. When navigation links on this page were moved to the bottom, the bounce rate of the page decreased by 83%.

The reason why is simple: People are more likely to stay on your site when you tell a good story before giving them other options. It gives you the opportunity to guide them to your CTAs. And that makes them more likely to find what’s relevant to them.

Key steps:

• Move your navigation links from the top of the page on your homepage to the bottom.

The final word on Upside-Down Homepages

Ultimately, the Upside-Down format is about getting the first page that most people see—your homepage—to work a bit harder at turning traffic into customers. This format allows you to simplify your page and focus on what’s important. It even immediately addresses what most visitors are looking for—whether that’s booking an appointment, buying a product, or signing up for an event.

So if you’ve been struggling with what to do with your homepage traffic, give this format a try. It might be what your business needs to start boosting conversions and getting people into the right part of your funnel.

Wondering what to read next?

Here's what we suggest:

→ The Ultimate Brand Identity Website Checklist

→ The Truth About Free Website Builders: An In-Depth Look at What You Really Get

→ 4 Design Transformations Powered by the Leadpages Shutterstock Integration

→ 12 Homepage Design Trends to Make a Splash in 2021