What is a Hero Banner?

Over the past ten to 15 years, a term has taken prominence in digital marketing. That term is "hero banner," but also often called a "hero image". 

I have noticed a few different ways that a hero banner has been defined over time. Some have defined it as a home page or the main call-to-action, but that's really not what it is.

Here's a better definition:

A hero banner is part of a home page (or other important landing pages) and could contain a phenomenal call-to-action.

The design and elements contained in a hero banner should always depend on the goal you are trying to accomplish.

So, why should you be concerned with this aspect of design? We'll cover that here, but first, let's take a look at how the hero banner became an important part of web design and marketing in the first place. 

The Evolution of the Hero Banner

Hero banners really started appearing about 15 years ago. Because they evolved from pages that lacked a singularly focused message, it's hard to say when the very first hero banner actually appeared. What started as a Flash presentation (a slideshow or other moving presentation) evolved into a video background. The video background approach then evolved into a bold, single image with a focused message to target an ideal audience.

Between about 2013 and 2016, websites were replete with video banners. Some were done very well, but most were done very poorly. The reality is that slideshows, rotating presentations, and video backgrounds never really performed as well as marketers hoped. The proof? Well, how many major websites use those features now compared to how many used them five to eight years ago?

I don't know either, but not many. (I could give you the stat if you need but the reality is that my stats don't matter... yours do.)

Creating a Phenomenal Home Page

A great website home page should include a few key elements:

• Logo/company branding (appropriately sized to not be overwhelming, but enough for brand recognition)
• Contact information or a link to the contact page where you have a contact form in order to convert leads or support existing customers
• A strong, clear message that indicates what next step you want your site visitor to do based on their needs
• A primary call-to-action (CTA) that matches your key messaging
• Secondary calls-to-action for those who aren't quite ready to perform the main call-to-action or speak to a salesperson
• Important links to your most important pages throughout the site (pricing, blog, about, etc)
• Social links and share buttons

So, how does the hero banner fit into all this?

There is one thing that is very important to note. A hero banner or hero image should reflect the goals of the website.

Some examples to consider:

• Surfrider Foundation has a very compelling yet simple homepage hero banner. I pick this as the first on my list because as of six months ago, they had a carousel on their home page. They never perform as well as simple, bold, calls-to-action.
• Apple has used the hero banner effectively for a few years. About the time of the rotating presentation and video background phase of the internet, they did it too. In recent years, they have opted more commonly for the single, bold banner with one, singular message and call-to-action.
• AirBNB is the largest rental-by-owner site out there. In 2015, AirBNB, like most major websites, had a video background. Now, it does not. They are focused on helping you define your experience and the videos they used to have showing places to rent didn't do that very well.

Take a look at this website built by our team:

David A Levy & Associates website was built by our team for one of our clients. You’ll likely have seen their work if you’ve ever entered an Anthropology, Urban Outfitters, and Tesla (among others). They are a great retail space architect.

What do you notice about their hero banner? Do you notice something missing?

If you said that there is not a primary call-to-action, then you’d be right. If you didn’t say that, then you can pretend you did.

In their case, their goal was not to drive site visitors to a specific call-to-action such as generating a lead. Their sole purpose was to create a website that showcased their brand. This hero banner on the home page has a perfect spot for a call-to-action should they want that but it’s not present because their goals don't define that as a need.

How Does This Information help your company?

I don't know what your website looks like or what your hero banner does for you. But, what I do know is that a properly designed and built hero banner can help drive the right kind of action on your website. Notice, I didn't say that a hero banner will drive traffic... it can't do that. It can only direct the traffic that comes to your website to the pages that support your main marketing initiatives.

Ultimately, you’ll have to decide what you want your website to do. If your goal is to drive people to buy, give you a lead, or go to another place on the website, a hero banner with appropriate messaging could be the way to go. If you don't want to be behind the times, it's time to include these large, bold elements on your website.

What's Your Next Step?

Take a look at your website. If you don't have a hero banner, then I encourage you to reevaluate the why. Also, compare your website goals from when you originally built your website to your website goals today. Do you want to drive more sales? Do you have a unique service offering you want to push visitors to learn more about? These are the types of questions you should be asking yourself and your sales & marketing teams. 

When defining a hero banner and hero messaging strategy, we always start with buyer persona development. We've even been known to employ the brilliance of some Story Brand.

I think the most important part of a hero message is to remember that your client is the hero, so redesign your hero banner with your client in mind. If your client or lead can immediately resonate with the hero message, then they'll likely take the next step of trying to learn more about how you can be their solution. 

There are countless ways to create your messaging strategy but it will take time to do it right. You can't simply leave your messaging to chance because it's what you THINK sounds good. Take the time to develop your first buyer persona (built based on your existing ideal clients) and remember to speak to your audience, not to yourself.

Now, if you already have a hero banner on your site, then it's probably time to evaluate how well your hero banner is performing and make adjustments as necessary. We love tools like Hotjar to evaluate how people interact with the page. You might also consider some A/B testing to create the best-performing page possible.

Learn more about how Tribute Media can help your company re-evaluate your hero banner and homepage design to turn more leads into customers.