Here’s your one day plan for a website homepage makeover! By the end of this post, you will know what sections you need to have on your website’s homepage (think of it as the digital foyer to your site) and be armed to welcome folks inside a website that converts.
First off, I just want you to know that the website homepage is the ~hardest~ website page to write. And I say that after writing dozens of homepages for my clients and teaching thousands of creatives how to do it.
Think about your website homepage like an airport terminal — it’s not the *ultimate* place that anybody wants to end up, but it’s a path on their journey.
You’ve got different types of buyers, personas, and prospects landing here every day. We need to consider that they are all at different stages in their client and customer awareness journey and they want different things.
Your homepage has two main goals.
- Give your users useful info.
- Provide top level navigation to get them to the next place they need to go.
Okay, let’s get into these tips for writing that homepage.
No. 1 | Leverage how people read on most websites
If you really wanna nerd out here, the Nielsen Norman Group has been researching eye tracking and user data like this for upwards of 13 years. I remember way back at my agency job, looking at their reports and having lunch-and-learns on this kind of topic.
The main takeaway from their research is that people predominantly continue to read in an F shaped pattern (see in the image below) or a Z shaped pattern when they interact with your website and your content.
Even other patterns that all their research supports, including the layer cake pattern, the spotted pattern, they tend to be a little bit of a variation on a theme. They all come back to at the end of the day, looking like an F shaped or Z shaped pattern.
Here’s what we do for this: we’ve got to make sure that we’re putting important messages, copy, and call-to-action buttons in these prominent places on your website, specifically on that website homepage of yours.
Here are 3 quick ways we can do this today:
- Make sure that we’re designing website homepage headings and those sub-headings to direct attention to the key things we want them to look at. Make sure you are highlighting the key phrases and the keywords that your audience need to be made aware of.
- Use info-bearing words (words that mean something) in your links, navigation bar, body copy, and of course in headline & subhead copy. You’ve heard me say this before, but it bears repeating, don’t be cute and don’t be clever — cut all of that out. Just say what you’re trying to say in layman’s terms more or less. Don’t worry so much about being fluffy and poetic and beautiful – that is secondary to the message.
- Attract attention with lists and bullets. Make sure that you are veering to that left hand side of the page by using lists and bullets and explaining information clearly.
My website acts as a perfect case study. I’ve made many changes over the years as I’ve been testing and learning things.
Let’s take a look at some of those changes.
First, up at the top of my page, I opted to leave ‘Copywriting For Creatives’ as the subheading under my logo because that clearly says what I do. And that affords me the opportunity to be able to say some different things down in the hero section. So if we are thinking about the way that people read online, I definitely want to have this subheading standout with the logo, front and center at the top. Then let’s look at the ‘shop’ button in the top right hand corner, which is where you want to put the most pertinent thing that you want people to do. The shop button acts as the quickest way that they can get started and leads them directly to my copywriting templates.
The ‘work with me’ and ‘contact’ buttons are also in the top left navigation bar — anything that’s a heavy hitter you want to put there. If you look at a heat map of my website, the top left is where most people go to. On the other side of the navigation bar, you’ll find buttons to my free resources and blogs. Those can go on the left hand side because, honestly, they are not the moneymaking parts of my business, but are still important enough to be in the navigation.
Moving into the center of my homepage is the hero section. I’ve got eyebrow copy at the top of the box, but you’ll also note that the main headline sticks out. There are two buttons, one leads to a quiz, but the other, more prominent button, drives to the page that has different opportunities to be able to work together, be it in a course capacity or as an agency copywriting service. My homepage has looked so different over the years and I’m constantly trimming it down and getting more and more specific. To learn more about homepage edits and choices, head here and watch the full video.
She’s got a great bar at the top, which drives to her opt-in. Your eye, or at least my eye, goes immediately to her logo, where I see that she does photography. And then you notice her very trimmed down navigation, and it’s clear how I can get in contact with her. Next my eye goes straight to her headline in the center, ‘I’m here to help you capture your family beautifully’. Based on the rest of the copy, it’s clear who she’s talking to – moms like me – and what she offers via her call-to-action buttons.
These are two examples of cleaned up homepages, where you can understand how the eye checks and moves, and how both Kayla and I used that to our advantage when laying things out. So this is something you can clean up pretty immediately on your website, right? You can open up your homepage editor right now and move some things around, so that the most pertinent information is in that pathway that your user is likely going to run into.
Another pro tip is use this placement strategy to your advantage when you’re creating other imagery and graphics. If you look at all of my YouTube thumbnails, you’ll see that the copy is over on the left hand side and my face is on the right. I also try to use this to my advantage on landing pages that I’m making for different opt-ins. I play with it and always split test things, but it’s just worth keeping in mind.
No. 2 | Start your entire website homepage design and planning with a wireframe outline
There are 12 pieces of a homepage you need (don’t worry, most of them are super short, and I deep dive into each of these with a copywriting template to boot inside CfC), but here are the 12 sections:
- 1 | The Hero – Headline 1, Subheadline 2, Optional CTAs
- 2 | The Real Talk
- 3 | Your Value Prop
- 4 | The Mentor Bio & Onlyness Factor
- 5 | Social Proof Pass No. 1
- 6 | The Break-it-Down-Now Process
- 7 | Your Elevator Pitch
- 8 | Optional Video
- 9 | Pricing, Product, or Getting Started Table
- 10 | Social Proof Pass No. 2 (top 3 best testimonials)
- 11 | Lead Magnet
- 12 | Junk Drawer Footer
It’s great if your website is beautiful, congratulations, but without the right pieces of sales copy and messaging, it means nothing. It doesn’t sell anything. Obviously, on the agency side of my business, where we write website copy for our clients, there is a little bit of tug of war with the designers in a good way. We are looking to see where we can have the best marriage of both the message and the design, but it is imperative that the entire hierarchy of that designed page starts with the message.
Copy dictates design, not the other way around.
That’s why you need to start with this wire frame. Figure out all the sections and then go over to design, play around. And like I said, if you wanna change the order of these, that’s totally okay. They’re just important that each one gets addressed. If you’ve taken my quiz, you know that I also tell you your selling style. Andddd the reason that these 12 sections are important is because each one of them speaks to a selling style.
We tend to sell, like we like to buy.
It’s important that we remember the other types of buyers that are out there and that we give them what they’re looking for. Whether it is no fluff, hardcore data, or whether they’re looking for that emotional story that pulls them in —whatever it is—we’re gonna serve it up hot and ready right here.
Action Step: Look at those 12 sections and then look over at your homepage and make note of what is missing. Can you make an action plan to get that done and then draft all the pieces of copy for that?
No. 3 | Hero and Top Section
As I said, your website homepage is gonna be the hardest, andddd the headline of your homepage is the *hardest* of the hardest. 😉
In very few words we wanna get super clear on what you offer here and like I said in last week’s video, you don’t get two chances to make a first impression. We need to nail this.
I usually see one of these two mistakes: either way too many words in the header OR not enough.
So on your way to that Goldilocks headline, keep this in mind: be completely clear, do not be clever and do not be cute.
When I pivoted from my journalism background and love of writing, to learning how to write for websites, I had to learn to edit that out—just to be very clear, there’s still room and opportunity to add other writing devices later on, but not here.
That hero headline section has got to be able to pass that grunt test (which I explain here in this video).
Action Step: Go look at the hero section of your website and perform a quick gut check audit.
- Does the hero sub-headline section of your website clear and concise about what you offer?
- Are you giving the most significant reason that this (your offer) could change their lives
- Do you have the answer to those questions above summed into one sentence on your homepage
So, when I pull up the hero section of your site and look above the fold (before I start scrolling), will it answer those questions. Is it clear? Is it concise? For more tips and three different types of ways that you could outline this hero section, watch this video on my YouTube channel about the four different copywriting mistakes that you may be making.
I would love to be able to dive into all 12 of these sections like I do with my Copywriting for Creative students, but at least for today I hope you’ve got a good working outline of what you need to have in your homepage. Now you are ready and able to jump onto your home page, move things around, and give it a quick makeover.
LOVE THIS SLASH NEED IT BACK-POCKETED FOR LATER?
CLICK BELOW TO PIN IT!