How to design a high-converting hero banner?

Beginners guide to improving hero banner conversions using simple templates.

Photo by Austin Distel on Unsplash

I have been reviewing and redesigning hero banners for over 2 years now and it has taught me quite a lot. Hero Banners are easily the most ignored areas of websites these days. In fact, I have redesigned hero banners for websites that didn’t even have one!

But how can you redesign a hero banner when it didn’t exist in the first place?

Well, here's the thing, for me, a hero banner means the first fold of the page — the first thing your visitors see when they land on your website, and what matters is if you have used it to make a clear statement about your business.

First fold visual by Rishav

The first fold or hero banner of your website is important because:

1. It’s the first thing your visitors see (no surprises here): We know that first impressions make a huge difference. Think about a website you recently visited and were blown away by the production quality and user experience. What was the website's hero banner like?
2. You can clearly communicate what your business is all about: There will be plenty of opportunities throughout your website to sell your product or service but with the hero banner you make it clear the moment someone enters the door. You don’t have to push your visitors. Rather make a clear statement as to what the website is all about (reading, exploring, videos, buying products, subscribing, etc.).

This has a direct impact on whether your visitors:

1. Know what you do.
2. Know what they are expected to do.
3. Should they trust you?
4. and if they should even scroll further down the page.

So how do you create a hero banner that gets high conversions?

This article will outline the details. I have divided this article into smaller sections so that you can find information that is most relevant to you.

1. Diagnose: here you can learn techniques to find problems with your hero banner.
   (If you don’t have a hero banner as I discussed above, you might still find it valuable to understand what are the factors that make a good hero banner.)
2. Problem + Solution: here you will find ways to solve the problems you found. Sometimes you will already have a solution but at times you will have to come up with one.

Let’s get started!

Diagnose

You will start off by diagnosing your website's hero banner. This will help in understanding what is working / not working for you. But to diagnose, you will first need to know what to look for.

If you search the internet for random websites and also some good ones, you will start to recognize some key details. In fact, you already know these details but probably never thought about them separately.

Most hero banners are made up of 4 key elements.

1. Headline
2. Sub-Headline
3. Call to Action
4. Hero Image

Headline: This is the most important piece of your hero banner and this is where you draw your visitor's attention. David Ogilvy says “On the average, five times as many people read the headline as read the body copy”.
So, what happens if you don’t have a headline that grabs visitor’s attention? High Bounce Rates, Low Scroll Depth, Low Initiates, etc — basically all the bad stuff.

A few simple rules for reviewing or writing good headlines:

• Make it clear. Always aim for clarity over any fancy words or phrases.
• Don’t overhype your business or product. (Ex. Most amazing product ever)
• Be very specific and direct. Say what it really is.

So, ask yourself questions like ‘is my headline clear?’. ‘Does it overhype the product?’

Let’s take an example to understand this.

Average Copy: Our customers can be found all over the world.

Good Copy: We have over 20,000 customers across 63 countries.

With numbers, you can get specific. Also, note how it is clear what the line means and does not try to hype things up. It feels just like any other line you would say while speaking to someone.

Sub-Headline: More often than not the purpose of the sub-headline is to expand upon the headline.

Two questions that every Sub-headline should answer:

• Why should a user choose to buy from you?
• What benefits can they expect if they buy from you?

Image credits to App Academy

‘Join the most respected code school’. This line separates them from the competition and tells the users why they should choose App Academy.

‘Learn in-demand skills and become a software engineer. Pay no tuition until you’re hired.’ Those are huge benefits for anyone.

If I see something like that for UX, I would jump right into the bootcamp.

Call to Action: This is the button where your visitors will take action, so copy and design for this are important. Your CTA (call to action) button should be the most prominent thing on the banner — so that visitors see it right away.

How do you do this?

1. Use bright contrasting colors so that the CTA button stands out.
2. Every other button in the first fold should be given less importance through changes in elements like color, size, placement.

For the CTA copy, make sure that it informs visitors about what will happen or what they get if a click is made.

Don’t use generic terms like ‘Submit’, ‘Download’, ‘Click here’. Good examples of CTA copy is ‘Get in touch’, ‘Book a Discovery Call’, ‘Sign up Now’.

Hero Image: This is the first thing that your visitors are going to see. It’s best to keep things simple and use images that your visitors will relate to. Avoid using fancy images that probably don’t mean anything. They confuse visitors.

The important aspect of a good hero image is asking yourself a question: Is this image relevant to my visitors and the offering they are looking to purchase?

The hero image from App Academy is relevant as it shows young professional coders. Truth is, they might not be coders but with the other aspects of the website, it looks like that.

Now that you know what to look for, it’s best you start looking at your hero banner and recognizing the issue that I just discussed. If you don’t have a website of your own, then try searching for things like ‘Top 10 productivity tools’ or ‘Top 10 Mailing tools’, etc. This will help you find some really good websites where you will see both good and bad hero banners.

Problem + Solution

So we have a list of problems with us and this is a good place to be. Trust me, knowing the problem is often most of the job done. All that is left is to make small fixes.

Before you start fixing your hero banner, you might want to think about its structure. A good structure makes it easy to visualize your copy and also presents your business in the best way possible.

Hero Banner Framework by Rishav

I have created a template for you. It’s really simple and all you have to do is start adding your content to those sections.

Is this something new? Absolutely not! But it’s something that I have seen work well across many different types of business. There are various conversion factors that make it work well (clarity, F shape reading, etc) but that is for another article. Feel free to use other styles of hero banner — whichever you believe will connect best. Many people center their content and that looks great too.

So, let’s start solving the problems we encountered.

Headline: How do you write a good headline? As always, use a template to make life easy.

Template 1: Say what it is.

You might think that this is really simple but at times writing this can be difficult.

Image Credits to ConvertKit

ConvertKit does an amazing job at writing their headline. ‘Audience building for creators’ clearly states what the product is all about. Can they bring more clarity? Yes, by probably stating what tool it exactly is but this is still pretty good.

Template 2: Say what it is and what it can do.

Image Credit to Zapier

Zapier tells you right away that their product helps in automating workflows. They are very direct in stating the headline but when you read the sub-headline there is plenty of emotional benefits added in.

Template 3: Say what it is and who it is for.

Image Credit to WhiteHat Jr

The White Hat Jr example is great! It clearly states live coding classes and also tells you who the intended target audience is, kids.

Sub-Headline: I already told you about the things to consider while writing your sub-headline. But do you feel like there are too many things to talk about and you don’t know which ones to choose from?

This happens quite often and a good way to tackle this is to list down all the benefits of working with you. Then, ask your users what they really like. This can be easily done by conducting a survey using tools like Hotjar. Ask people who already buy from you — What made you buy from us? If you had to recommend us to someone, how would you describe us?

With this approach, you will find benefits that your current customers bought your products for and it could very well be that new customers will also respond to the same. As always, be sure to A/B Test your copy.

Call To Action: An easy way to think about the call to action is to complete the sentence ‘I want to…’. Example: I want to Join Now for Free. Just start looking at websites and see how this sentence completes. It’s that easy.

I would also suggest checking out Neil Patel’s website. He often has really long copy for the call to actions but they are also that good. Give it a try!

Now, what about the other things I mentioned in the template? Those are important too. Your top navigation should not distract users so that focus is maintained on the hero banner. Keep simple top navigation.

Lastly, the client logo is also very important in case you are trying to get people to convert right away. Showing a client logo helps build trust and you will find this across many websites. Trust is an important element for new visitors who aren’t aware of your business is quality.

I want to end this article by showing you one hero banner that I believe is really good. It might not follow all the rules I mentioned above but that’s also something that I want to talk about.

Image Credit to UX Studio

Look at this hero banner and try to analyze it using the elements I mentioned before. Everything is just as we discussed for each element. The only difference would be that they haven’t given more importance to the hero banner CTA, choosing to go with the top navigation one.

Now, this is a UX Studio! They are one of the best in the world for UX research and design. What does that mean? It means that your business is unique and so are your visitors. Follow the templates I talked about but also go about testing new things and make sure to test bold changes.

UX Studio probably doesn’t expect people to click right away and feel that more people scroll and only then convert, which is why the down arrow to allow for more scroll engagement. We’ll never know but we can always learn and test it out for ourselves.

Hope you liked this article about designing a high-converting hero banner. I will be posting more content around Conversion Rate Optimisation, my journey into UX Research and Design, and a few other things…till then stay safe and keep testing.