How to Get the Most From Your Website’s Hero Section
9 Shining Examples We Can All Learn a Little Something From
I’m a sucker for great hero sections. Having battled through a few of my own, I appreciate the thoughtfulness and restraint involved in getting them just right.
They are also a brand’s most consequential piece of digital real estate. Because in about the time it takes for a page to load, users have already begun forming judgements about the credibility of a product and it’s relevancy to their needs.
The hero section’s job is to make the kind of first impression that convinces the right people to stay a while. To open the aperture of consideration wide enough to keep them scrolling for more.
That’s a lot of responsibility for just 1000x600-ish pixels of space.
So when I spot one in the wild, I make a point to screengrab it — for myself, my clients, and now for you, in hopes they might inspire your own.
In no particular order, below are a few of my recent faves along with some thoughts on what makes them so good.
1. Storetasker
Storetasker (formerly AskLorem), connects growing e-commerce businesses with expert Shopify developers based on the needs and goals of their project.
Why it works:
The headline cuts right to the problem of finding the right developer for your project, without the benefit of a service like Storetasker. Knowing that this isn’t just another marketplace of developers that I have to spend hours sifting through and still not know for certain if I’ve found the right match, is a huge relief.
The supporting statement hits on the features that are most relevant to a person considering hiring a developer — quality, price and scope. I know I’m getting quality, I know it’s likely in my price range and I know that their services are flexible. I could do without “Level Up with Storetasker” as it doesn’t really tell me anything useful and feels a bit cliche.
I also love how they’ve included stories of e-commerce business owners and their perfect match developers. It’s a nice way to contrast the transactional and often impersonal feel of competitors like Fiverr and Upwork.
Finally, the modern design and imagery, showcasing actual examples of sites built through Storetasker, gives me a sense of the level of quality I can expect to receive.
2. Sleeknote
Sleeknote is a lead generation platform focused on creating more effective, less annoying, web pop-ups.
Why it works:
Within seconds of arriving on their homepage, I was able to glean that Sleeknote is not only the pop-up maker for people who care about their users, but also for people who care about aesthetics. Based on the sleek, modern design of their website, I can infer that they probably make popups that are equally sleek and modern — without them having to explicitly say it.
Similarly, the use of the puppy image along with the invitation to get a demo from the smiling Mathias, balances that sleekness with approachability.
Finally, they practice what they preach — no annoying pop-ups automatically appear, unless of course you’d like one to. They even allow you to see a mini demo that captures your email, with a promise that its only for demo purposes and not to spam you. Another nod to the friendliness of the brand and a signal about what you can expect from customer support.
I don’t currently use a pop-up tool on my site, but if I did, I’m already sure it would be from Sleeknote.
3. Proto.io
Proto.io is one of several no or low-code protoyping tools that allow (mostly) anyone to build interactive prototypes of their web or mobile product designs.
Why it works:
A simple 3-word headline makes a powerful statement: Non-coders shouldn’t be left out of the prototyping process.
The sub-headline is a bit wordy, and resultantly vague. That aside, I love the last part of the sentence — “anyone with a great idea” and how it aligns perfectly with the democratic spirit of the main headline.
It also communicates a sense of possibility to the person reading it who may have previously felt stifled by the lack of no-code options. Because it isn’t just coders with great ideas worth developing. Its marketers, product managers, entrepreneurs — a.k.a. people just like you.
Finally, the demo video is freaking brilliant. It’s the first I’ve seen that features an original (and also pretty dope) song as the music bed vs. the same stock ukulele music that seems to find its way into the demos of every SaaS start-up.
The video was also produced with designers in mind — it centers the elegant UX of the product and uses minimal copy and bold type to paint a powerful story about what the product does and who it’s for.
4. Motivated Mornings
Motivated Mornings is a virtual co-working community for anyone who wants to spend more time on work that matters.
Why it works:
If you’ve ever struggled with completing a project that matters to you, this headline provides the gentle kick in the ass you didn’t know you needed.
It says, “Look friend, you’ve prepared enough. Now it’s time to ship. And we can help you do just that.”
By acknowledging the struggles of those of us who are better at starting and prepping than finishing, Motivated Mornings is also saying “you’re not the only one who struggles with this.” That alone provides a powerful antidote to anyone who believes their procrastination habit is uniquely unfixable.
The sub-headline goes on to give you a clear picture of exactly how Motivated Mornings will help perpetual starters finish the work, once and for all.
Finally, the video is a nice example of the hero’s journey in action — showing the transformation of a disorganized schlub into a goal-crushing phenom.
5. Hotjar
Hotjar is a user intelligence tool that shows site owners how visitors are interacting with their website (and how to improve their experience).
Why it works:
The headline speaks to a pain point about other analytics tools that spit out lots of data, but fall short in helping you to understand how users experience your site.
The first thing that stood out to me was how the copy feels more approachable than what you might expect from an analytics tool. I particularly like the use of the word ‘drowning’ — as an intermittent user of Google Analytics, whenever I dive back into the dashboard, I feel like a little like drowning myself.
Because Hotjar is tool for understanding on-page visitor behavior, the insights they provide are a lot more pertinent to developers and UX/UI designers. And while they don’t explicitly call out those roles in the hero section, the language and tone do a nice job of speaking to people whose primary language isn’t numbers.
At the top, there’s a trio of barrier busters — 1. Tens of thousands of users have signed up this month alone, so while you may have never heard of us, we’re still trustworthy. 2. No credit card required — so you can get a feel for what Hotjar can do for you, without all the usual sign-up hoops. And 3. We’re GDPR and CCPA compliant — so despite what your boss might try and offer up as an excuse, you won’t be violating anyone’s privacy by using us.
Finally, they place a visual representation of the tool (again, with their user in mind) to illustrate exactly what Hotjar can help you accomplish.
6. Knapsack Creative
Knapsack is a Squarespace-powered web design firm dedicated to helping passion-led entrepreneurs turn their ideas into beautiful websites — in as little as one day. They also are the designers behind the Motivated Mornings website above.
Why it works:
If you’re on this page, chances are that you’re considering a new or refreshed website. Which means you’re probably not very proud of the one you have. This headline speaks directly to that emotional state, and offers an assurance that Knapsack understands your pain.
The supporting statement offers a promise that is both intriguing (a live design process?) and impressive (in as little as one day?). It also dispels a widely-held assumption that getting a website you can be proud of has to be a long and complicated process.
Finally, I like the directness of the CTA button. It doesn’t say, ‘Learn More’ or even ‘Book A Call’. It says, we’re ready to get started when you are, and we’ve got an actual designer (not a sales person or an account manager) standing by to meet with you.
It then takes me to a contact form that tells me exactly what I can expect to pay (at a minimum) and when I can expect to get started (Booking for September 2021). Those details are sending their own signals about timing, demand and the kind of clients that should proceed (and those that shouldn’t).
7. Subtext
Subtext is text-based tool for creators, journalists and thought leaders to connect directly with their readers and fans and engage in more meaningful conversations.
Why it works:
The headline tells me exactly what I get — a way to connect with my most engaged supporters via text messaging. The sub-headline follows up with a more emotional benefit that anyone who leads conversations on social media can appreciate. It reassures me that I no longer have to entertain the dysfunction of social media (and sacrifice my mental health), just to exchange ideas with my audience.
Embedded in the subtext (😉) of the sub-headline is a call-to-action for a return to meaningful conversation. They’re acknowledging their ideal users’ pain, and inviting them to a better way forward.
The ‘Text Us’ CTA is a nice way to put the product into practice. But I do wish it would take me through a demo of how the product works, instead of just asking for my phone number to ‘schedule a demo’.
And of course the logos from big name news organizations assures you that you’re in good company.
Note: Just before this post went live Subtext updated their website, including the hero section. My impression is that it’s trying to say too much, and doesn’t feel as clear as the original. I also don’t like the word “hosts” as I feel like it’s become synonymous with AirBnB. Check it out and tell me in the comments if you think it’s an upgrade or not.
8. Helena Bowen
Helena Bowen is speaker coach and speechwriter who’s helped more than 150 people turn their ideas into powerful talks for the Ted and TedX stages.
Why it works:
What isn’t to love about this hero section? It proves how just a few lines of the right copy combined with thoughtful design, can tell a rich and powerful story.
Here’s what I gleaned without even having to scroll a pixel below the fold:
“If it’s just another speech, call a different coach or just join your local Tastemakers. But if it’s not just another speech; if you’re ready to take the next step in your career; and if you consider yourself a true industry leader, then you have absolutely no other choice than to hire Helena Bowen. “
Boom!
Helena’s hero story manages to be both succinct and multi-layered. She doesn’t have to spell out her coaching style because of what her copy and design suggests.
She’s not for people who like warm and fuzzy. She’s for people who want to get down to business and deliver a career-defining speech. And by unapologetically signaling to her ideal client, she’s also sending important clues to those people who aren’t.
Helena’s hero story also exudes clarity and confidence —which happen to be among the most important traits of an effective speaker. These values are translated through her copy, her design choices (bold typeface, black, white and hot pink color palette) and a series of undeniable numbers to clinch the deal.
9. Milanote
Milanote helps creative types and their teams organize projects and ideas, through, beautiful visual boards.
Why it works:
The headline tells a story about who this organizing tool is for — and who it’s not. Milanote isn’t for just anyone looking to get organized — because for those people, a perfectly plain, text based tool like Evernote will suffice.
Milanote is an organization tool for creative types and visual thinkers, who want to be more organized, but see organization as something of a creativity killer. They don’t view themselves in the same category as people who use traditional task managing tools in traditional ways.
The quote placed just below their CTA button drives that point home more directly. It uses a testimonial to bring further clarity to Milanote’s value proposition while also bringing credibility from a respected source.
And because this is a visual tool, it only makes sense that users want to see what it looks like. By putting the user interface front and center, featuring vibrant colors and illustrations, it sends another compatibility signal to Milanote’s ideal user whose still deciding if this is the tool for them.
Key Takeaways:
What do all these examples have in common? Most of them follow a pretty standard template of Headline, Sub-headline and Call-To-Action, barring some minor variations.
But it’s their contents, combined with the suggestive power of thoughtful design, that makes these hero sections particularly effective.
What they all manage to do in their own distinct ways, is to make their ideal visitor the hero of their hero sections — by addressing their needs through the right balance of functional benefits and emotional signals.
Below are a couple thought-starters for how to create a hero section that achieves a similar result.
- Start by imagining your ideal visitor and what brought them to your website. How did they find you? What are they looking to accomplish? What emotions or beliefs might be driving that goal?
- Ask yourself what that person needs to know, see and feel in order to believe that they may be in the right place. And then determine how you will meet those needs through your copy and design.
Let me know in the comments if you have any other tips for creating high-impact hero sections. And please also share any shining examples you recommend I add to my collection.
