It doesn’t take much time for people to make a judgment on your website. And what do they see first? The hero section of your landing page. You have 0.05 seconds to make a good impression and answer some questions.
This number is based on few studies one of them from Google. In this very short amount of time, your visitors will decide whether they are going to stay or leave.
So, let’s talk how can we design a good hero section for your landing page.
Before you can promote your brand or product to new visitors, you need to define your business goals. Are you looking to generate brand awareness, boost sales for enterprise customers, capture emails from new leads, or educate your audience in some way?
According to your answer, we will classify your goals in 3 types of objectives:
Keep in mind, always decide what your goals are before even thinking of designing a page. Perhaps this one of the main mistake people makes when they start designing a page or hiring a freelancer for this job.
You don’t really want to compete, what you want is to create your own subcategory and dominate it. Ok, I’ll give you an example: Subway. Subway built its own subcategory, ‘healthy fast-food’, almost an oxymoron. They are not really competing with Mcdonald’s, they are selling a very different product with a different promise. In 1999, an article appeared in Men’s Health about a college student, named Jared Fogle, who lost 245 pounds by walking and by eating a Subway diet consisting of a two sandwiches each day.
The subcategory, in this case, is a fast food lover who is looking for healthy food. Interesting right? In order to create such an experience for your customers, you have to know them very well.
Thankfully, a common set of landing page patterns and practices have emerged over the years, making easier for a designer to decide. The downside is it seems so easy these day that a lot of people are just using templates. In reality, in order to make sales, we need a very customized approach for your audience. How? By positioning your brand to a specific persona.
The design decisions are based on those studies. One step further, we have to take a look at our competitors, you might be able to get better results by building upon what your direct competitors are already doing or by identifying a subcategory your competitors didn’t notice yet.
Now, your branding approach might be different than Subway, but what should not be different is the number of details you know about your audience.
Your product is solving a real problem for your clients. The reason people are visiting your landing page is that they somehow searched for your type of service/product. We have to convince your audience that in exchange for some money you will make their lives easier, or nicer or whatever they are expecting. In the Hero section have to answer 4 main questions:
A very good example is Airbnb. Their hero section includes the brand promise, the unicity suggested by words, phrasing and the background image, the hero includes the action which is defined as what we want people to do on our website. In this case, is to search for houses and/or experiences.
If you have a product, show it.
Here is an example of showing your product in action. Bonobos sale swim trunks, they could have just shown a close up of the product, but it’s probably more compelling (and fun) to imagine yourself out with some friends doing cannonballs in the trunks. It is a product we use on vacation, when we are generally in a good mood, so an image that suggests happiness is welcomed.
Go Pro is doing a good job with their hero section. They are selling action cameras, so what better way to create a hero other than filming extreme sports with your camera. You actually see their product in action.
There are different types of visual elements for your landing page. We have a few options:
Product images are when we use our product usually not in action:
Contextual images are what Bonobos and Go Pro are doing.
Famous founder: If your website is based on a famous person, the best way is to use a related image with that person.
In the first case, Gary V is using a photo with him speaking in front of an audience. His brand promise is to educate people, education is often viewed as a form of generosity. We can see the audience face but not his.
In the second case, president Trump who is well known for his personal brand used a photo with him saluting the military. From a wide range of presidential activities, he chose one related to one of his main political arguments which are the respect for the military personnel.
Graphic animations: They are becoming more popular these days. We can use graphics animations to tell the story visually. One example is https://www.proteantecs.com/ Proteantecs is a company that uses chip-embedded Agents that provide information about electronics performance. The technicals are very complex and hard to explain to a non-tech person, but the designer was able to create an animated story that somehow explains what they are doing as simple as possible.
If you’re interested in this particular design case study to watch it here: https://www.youtube.com/watch?v=Y1vfnYpOFD8&t=1356s