This guide helps you make a great first impression on your website. Use this as a reference for creating and refining your home page.
The home page is the first thing your website visitors see and sometimes it’s the only thing they will ever see. That’s why it’s crucial to get this step right and make sure your visitors know exactly what your business does from the get go. This is your first impression and first impressions last so spend as much time as possible in getting this right. How you can start is by following a common website template that is proven to work.
Intro - (Header)
Supporting Paragraph 1 (Feature #1)
Supporting Paragraph 2 (Feature #2)
Supporting Paragraph 3 (Feature #3)
If this looks familiar to an academic essay format, that’s because it basically is one. Essays are a popular format in academia because they are effective in conveying an argument to the reader. An essay is structured towards a series of questions your reader might ask when encountering your initial claim. This is why a similar format works for your home page. You are making a claim that your product/service solves a problem and your visitor should learn more about it so that they will buy. You introduce this claim in your Intro (the website header). Then your supporting paragraphs will be distinct features your product/service provides that support the initial claim you made about your product/service. And finally the conclusion wraps it up and drives home the claim that your visitor should buy your product/service.
A note on home page design:
In an academic essay, the text you use and page colors are completely secondary because they don’t help the argument of your essay. The same principle goes for the design of your home page. Aesthetic design is most certainly important but it should be prioritized after your messaging. So remember - an effective home page prioritizes the messaging over the design!
Your header is the most essential part of your home page. It sits “above the fold” which means it shows in the area of your vistor’s screens without needing to scroll. And oftentimes, it is the only thing your visitor will see before they decide to either keep scrolling to learn more or leave your website for good. Accept that most visitors will make a decision to stay or leave from your header so give it the appropriate amount of time and energy. We will go over the structure for your header below and use Hotjar as an example.
Hotjar is a popular tool for understanding user behavior on websites. (This is not a sponsored post, we just love their tool)
The title is where you capture your visitor’s attention so that they are at least interested enough to read the rest of your home page. The most attention grabbing thing your title can do is convey to the reader what problem they are facing right now that your product/service can solve. Your most interested readers are ones who are currently facing a problem and are seeking an immediate solution. So work on identifying the specific problem that your product/service solves and indicate that in a clear and concise sentence as your title.
Title - Complete Nutrition. Convenient Formats.
Commentary - As a potential customer, I know immediately that Soylent is a food product that provides complete and also convenient nutrition. As a busy person who minds their health, the ability to consume something nutritionally complete and conveniently grabs my attention.
Title - The fast & visual way to understand your users
Commentary - As a potential customer, I know immediately that Hotjar can help me understand my users fast and also visually. I'm used to trying to understand users via graphs and data points so the visual part especially intrigues me
All these examples convey what your product/service does exactly and why the visitor should care. This means highlighting what makes the product/service unique and what it is that you fundamentally offer. You need to avoid saying generic things like “I am a web designer” because there are thousands and thousands of web designers in the world and what makes you different from any of the other ones?
Now that we got the title out of the way let's talk about the subtitle. If your title is about what you do, the subtitle needs to explain how you do it. More than ever, people don't just want to know what things are but they also want to know how it works or how it gets done. The how is important because it proves that you know how to solve the problem for your customer.
Soylent Subtitle - Drink it, shake it, chew it - whatever your tastes, Soylent's made for you.
Commentary - Soylent's subtitle reaffirms to me that there's a chance I might like their product because it comes a variety of different forms.
Hotjar Subtitle - Everything your team needs to uncover insights and make the right changes
Commentary - Hotjar's subtitle helps me match my problem with a benefit. I'm need to understand my customers more but also the real solution I'm looking for is making the right changes to improve my product for my customers.
This is where your landing page differs from an academic essay. Now that your visitors know exactly what you do, it’s time to show proof that you know how to do it. Ideally your customers will realize this when they try your product/service and it solves their problem. But at this point, they’re most likely not ready to buy yet so the next best thing is to showcase other people who have used your product/service and loved it. To achieve this, you can show logos of companies that have used your service or testimonials/reviews from customers. The goal here is to let your visitors know that the claims you are making are legitimate and that you have credibility. The best place is to show social proof is “above the fold” to really entice them to learn more about your product. However, you can still show more social proof throughout your home page with more testimonials/reviews.
A note on social media feeds
If you’re going to include a social media feed, you should do so with the intention of showing that customers are engaging/using your product. You should avoid having a social media feed that is just trying to directly promote or sell your product.
Call to Action
And finally we have the call to action in your header which is to get your visitors to go further into your sales funnel and turn them into paying customers. The call to action needs to summarize what your visitor will get for taking the next step.
Soylent CTA - Shop now
Hotjar CTA - Try it free
Make sure that you make the text something that will hit the homerun and get your visitors to be excited about proceeding to the next step in your funnel. The more inertia your customer has in the sales funnel, the better chance you have of converting them into a paying customer. So that’s it right? You told your visitors what you do, how you do it, and have asked them to become a customer. Well you may get a few visitors who have seen enough to move forward but most will not be ready yet. They will want to see more supporting evidence about your product.
These will take up the bulk of your home page and help drive home the claim you made in your header. Additionally, this is also where you can answer any objections your visitors may have about your product. You want to aim for at least 3 features but you can certainly have more if you need to. The home page can be as long as you need it to be but only if it needs to be. If every word and sentence is concise & clear and further backs up the claim you make about your product, then that’s perfect. Otherwise less is certainly more.
The structure for each feature generally follows a title, paragraph, and an image. The title will describe the value of a distinct feature for your product/service in a short sentence. The paragraph will be 2-3 sentences that explain how and answer any objections the visitor may have, and the image will help the visitor visualize everything you’re saying to drive it home.
Once again, make sure to be as clear and concise as possible with the value that your customers can get from your product feature.
Examples: Web designer
Feature #1: 2 hours turnaround time
Feature #2: Trusted by the best restaurants
Feature #3: 10 years of experience in the restaurant industry
This is where you summarize your product/service’s value and hopefully by now your customer is bought-in and ready to proceed to the next step. This is where you can add a really captivating CTA (Call to action) such as “Get up to $25,000 in clients through a better designed website”.
Avoid popups, no one likes popups. Especially popups that show immediately when opening a website that say “Join my newsletter for X”. They haven’t even read through why they should care about your product/service yet, why would they sign up for your newsletter?
Don’t go overboard with animations. Animations are a great way to make your website engaging and differentiate itself from others. However, animations are oftentimes overused where the page takes a while to load and things don’t work the way they should which leads to confusion and adds extra roadblocks. For example, your menu should not take 5 seconds to load due to some fun animation you wanted to add.
In respect to design, it should be a balance of both the expected (following a common template) and the unexpected (Apple’s product pages scroll based animations). This allows clarity for the user while providing excitement.