The main aim of your Homepage is to help your visitor get to know your business. It’s your first, and possibly only, chance to make a good impression. It’s one of the most visited pages on your website, so you must get it right.
Hi everyone, I’m Kelly, and today I’m going to show you how to optimize your homepage, hook-in visitors and keep them on your website for longer.
Think of your homepage as the frontage to your online home or shop, it needs to be appealing to invite people in off the street. I like to think of it as a summary of the website, to ensure the visitor ends up where you need them to be.
I split each homepage that I design, into four sections, each with specific content. I’m going to break these down for you, section by section, and end with some tips on how to make sure your design looks gorgeous too.
1. The Hero Section
The first section, which is commonly called the ‘hero section’, should have a photo that describes your brand or the key thing you’re selling, and have compelling copy and a call to action. The hero section is the most valuable section on your website, so use it well. In the video we look at examples from Marie Forleo, Neil Patel and Freddie’s Flowers:
- Marie Forleo. She’s got a lovely picture of her smiling, looking happy, and then a message to the user. “The world needs that special gift that only you have”. It’s quite subtle, but she does have a call to action to go down, so she wants you to keep scrolling.
- Neil Patel. He asks the question, “Do you want more traffic?” and let’s be honest, who doesn’t want more traffic? He’s hooked me in straight away. I can pop my web address in on the site, and get it analyzed for free with his SEO tool. This page is so simple, but it’s powerful and compelling.
- Freddie’s Flowers. It’s a perfect example of how a product-based business, can use the hero section. It’s got a really convincing video, which tells me exactly the kind of flowers I can expect, and the kind of brand they are; it tells me so much about their business. There is even some text to confirm exactly what he’s offering and the price. The call to action is, “Get my first two for £12.50 each”.
Whatever your business, please don’t use a slider during this section. Sliders are outdated, confusing and don’t convert well. Choose one message and go for it, you can always change it if it’s necessary. Nothing on your website is fixed in stone.
2. The Benefits Section
The second section is the benefits section, and it should show the visitor the benefits of using your services or buying your products. This section should be all about them, and how you can help and make their lives easier; the perfect place to highlight any free resources you have.
Amy Porterfield has a lovely section to showcase her freebies, and Neil Patel highlights the four areas of his to maybe struggling with and his free resources that will help.
3. Services Section
The third section is the services section, or it could also be for your products or your blog. You could use it to describe your services or showcase your products.
If you have a particular service or product that you want to push more than the others, give that one more space to emphasize its importance. Try not to include too much text, summarize each service and add a button to read more. Keep it simple and use icons, if appropriate for your brand. Icons are facial cues, to grab your visitors’ attention if they’re skim reading.
If you have a shop, you can use this section to display some of your products, but don’t overwhelm your audience with tons of products and categories on the homepage.
If you have a blog, you could showcase the relevant blog posts here too or tell your visitor a little bit about what to expect on your blog. Amy Porterfield is an online educator, and in this section, she’s talking about her courses, and again showing a lovely picture of herself, and you can read more about her story. Then she talks about her podcast as well, which is another service you could use. By listening to her podcast you get to trust her and you might then go on to buy her fairly high ticket courses.
4. Social Proof
The final section is social proof. It should have things like case studies, testimonials and your client’s logos, if applicable. This section helps the visitor to trust in your experience or products. Over on the Amy Porterfield site, she has a ‘Featured In’ section, which shows the different magazines she’s been featured in, which is again a form of social proof and she also states she is a top-ranking podcaster. If all these people think her podcast is worth five stars, then that’s great social proof for her and her business, and obviously for her podcast as well. In the social proof on Freddie’s Flowers, they have an excellent score, a star rating and reviews of real customers too. What would make this even more powerful is some pictures of the people [who have written the reviews]. At that point [on their site] they’re giving me another chance to start sending flowers, so that’s brilliant.
That’s each of the four sections. Now, once you’ve decided on the content you’re going to put into them, think about the primary objective of your homepage: what do you want your client to do? Place clear ‘calls to action’ throughout your page, and ensure the most important one stands out clearly. Examples of this could be to get them to sign up to your newsletter, view your services page, or take your quiz. Whatever you put on your homepage, be sure to design it in line with your brand image and message, so it speaks to your ideal customer. Please keep your design simple, and remove anything that doesn’t have a purpose, or tell a story.
Your copy should be short and to the point, and all images should be on brand and tell the story of the text that accompanies it. The one thing all the websites I’ve shown you today have in common is white space. It doesn’t necessarily have to be white, it’s just space. The ‘white space’ is just the technical term, but can you see it around here [Amy Poterfield], she’s got the space here, she’s got the space around her, and the background is quite light as well, and as you scroll down – more space. If this heading was right up against these three icons then it would be all be very squashed. The same on Freddie’s Flowers, we have space around here, again it’s not necessarily white, but it’s like parchment paper, and even on the images, this feels like space as well. It just makes it easier for your customer to navigate around your site and makes it feel calmer, and a more pleasurable experience.
I hope you’re feeling more confident about tackling your homepage now. If so, please like and subscribe to my Youtube and I will see you soon.
