Tell first-time visitors who you are
For most nonprofits, it is essential to state right away exactly who you are. People coming to your website from Google want immediate confirmation that they are in the right place.
- The sentence, “A documentary about the benzodiazepine epidemic.” tells the reader exactly what the website is about.
- After this validation, the target audience can continue on the rest of their user journey confident they landed on the correct website.
- The more you make the visitor scroll for this information, the more likely they will click the back arrow and search through other results on Google.
If you’re Nike, you don’t need to tell the user in the hero that you’re an athletic footwear and apparel company. The user already knows. But for most small to mid-sized nonprofits it is essential to start off with the most fundamental information.
Share how you bring your target audience value
In a short sentence, use clear language to tell the user exactly what you’ll do for them. Don’t overthink it. Who is your number one target audience you want to communicate with? And how do you bring them value?
- For the Red Cross at the moment, their primary target audience is potential donors.
- They bring the potential donors value by using their financial gifts to help people affected by disasters.
- They communicate this in a short, easy-to-read sentence.
What no to do
Here’s an example of what not to write: “We leverage innovative solutions to transform our local and global communities by fostering a more equitable, civically engaging, and promising future.”
You read it and your eyes glaze over. It sounds relatively smart and they use important words like “leverage,” but you’re left not knowing anything more about what they do. They didn’t actually say a single thing there. And yet, I see this type of communication all the time, even in the prime real estate of the hero.
Instead, boil what you deliver down to the most simple, concise terms. Trust me, your target audience will appreciate the clarity and clicks on the call to action will increase.
Emphasize the most important call to action
In the last section, we talked about identifying your primary target audience. This can be difficult because you probably have several different ones (community members, existing supporters, first-time visitors, potential employees, volunteers, etc.). It can feel not right to prioritize one over the others.
Remember though that this is just based off what your nonprofit needs the most at the current time to advance your mission. Is it program enrollments, donations, event registrations, resource usage, meeting signups, community involvement, job applications or something else? You can always change it later, just choose one for now.
For the Red Cross in the example above, their primary goal is to increase donations. They paired the “Your financial gift helps people affected by disasters big and small” target audience/value sentence with a “GIVE NOW” call to action button. There should be one call to action button that stands out with a bright, easy-to-read color.
A golden opportunity
The hero is a golden opportunity to channel people ready to take action on your main goal. For those who aren’t ready, it gives them the knowledge that that action is available. They may return after a brief scroll down the page or after multiple visits across months. But the tone has been set for all future interactions with your brand that action is available and easy to take.
Multiple CTAs
Note: two call to actions buttons is okay in some situations when two target audiences must be accommodated for. Just know that the decreased emphasis on one clear action usually decreases click rates. Any attempt at more than two call to actions in the hero is advised against. The old phrase, “If you try to please everyone, you’ll please no one” is well suited here. The power of the hero is diluted when too many options are present. Lots of different page options is what the header navigation is for. Leave those options up there.
Choose a simple layout
As you can see a basic hierarchal structure of three elements is forming for the hero: title, text, call to action button. Keep the design of the hero simple and clean so the user actually interacts with the three elements.
- Keep the three elements distinct from each other through use of varying font size, color, boldness and spacing.
- Move onto thinking about the visual component (ex. image, video, graphic) only after you have refined the three elements.
- Choose a visual component that connects with your message, draws out emotion, builds trust, is high-resolution and professional.
- Do not choose a visual component that distracts from your three elements.
- Direct the motion of the image towards the three elements. In the Ridgewood Hoops Club example above, the youth basketball players are running in the direction of the information we want the user to interact with.
Establish your brand identity
The hero is the first place that visitors get to connect with your brand on your website. Make sure all the elements in the hero are aligned with your brand identity and best represent your organization. You are laying the foundation for how the user views your organization. Showcase your unique identity and then keep the brand elements consistent on the rest of the site.
The topic of developing a brand identity is too extensive to go into depth on, but here are some brand elements you should establish above the fold (and then be consistent with):
- Typography
- Color palette
- Logo and graphics
- Spacing
- Imagery
- Voice and tone
Improve loading speed
Loading speed is essential for your entire website, but especially the hero. If it doesn’t load in 3 seconds, most people will leave your site.
There are many factors affecting a website’s loading speed that should be optimized and managed by a specialist. For the hero in particular though, often the cause of a slow load time is the visual component (ex. image, video or graphic). Make sure the visual component has a proper file size. If you cannot reduce the size of the file, then it should be replaced no matter how excited you are about sharing it. In addition, a visual component being so elaborate it can’t be condensed often correlates with it distracting from the three elements (title, text, call to action button) we are trying to highlight.
Design for all devices
Make sure the hero is responsive across all devices. This means that the website should look good on a phone, tablet, laptop and desktop. With mobile traffic consisting of more than 60% of all website traffic, responsiveness is more important now than ever.
- Websites should be tested on all major browsers (Chrome, Safari, Edge, Firefox).
- Test on all widths by resizing your window and through browser developer tools.
- Test on real devices.
- It is crucial that the three elements (title, text, call to action button) are above the fold on all screen widths.
- It’s not enough just to test on the device and browser you use the most.
- Use analytics to see which device size most of your visitors use and prioritize that development.
Make it accessible to all users
Accessibility is the process of developing a website so that everyone, no matter their ability, can easily navigate it. For instance, someone who is visually impaired may use a screen reader that reads the text out loud. A website not properly coded for WCAG accessibility standards would not be available to the individual in this situation.
- Organizations legally have to maintain website accessibility standards. Recent years have seen an increase in web accessibility lawsuits.
- Website accessibility helps nonprofits be a part of the movement to allow equitable access to all websites. Similarly to how public buildings should be physically accessible, websites are also public spaces that everyone should have access to.
- In the United States, about 25% of people have a disability. Organizations can grow more if they allow their website to be accessible by everyone.
- A specialist should optimize and manage your nonprofit’s website for accessibility. For the hero in particular though, often the cause of accessibility issues is insufficient color contrast between text and the background.
Pair with an easy-to-navigate header
We’ve talked about the hero section as what is “above the fold,” but there’s another major part of this area we’ve left out: the header.
Even though this isn’t a part of the hero, here’s a list of some elements you may want to include in your header:
- Your nonprofit’s logo (and link to the homepage from it)
- Navigation menu and submenus
- Call to action(s)
- Contact information
- Social links
- Search bar
Test, review, improve, repeat
Bounce rate is the percentage of users who leave a website after only viewing a single page. Test out different iterations of your hero and use analytics to determine what gets people to stay on the site and click the call to action. In addition, observe real users interact with your website and ask them questions about their experience.
What works best may be something that surprises you. It may even be frustrating because you personally thought a different option was better. It may even go against the principles we’ve talked about in this article. Trust your community above everything and improve the site based off of their needs.
Feedback, analytics and revision is a continual cycle that you should trust in because it is guaranteed to improve your user experience.
Conclusion
Some of these guidelines for creating a hero are deceptively simple. Some you may have never thought about before. The beauty of these guidelines though is that they are just that. Guidelines. Not a formula that churns out replica websites.
Just look at the heroes from the examples above, they all generally follow the same principles while still being unique. There’s not one size fits all when it comes to a hero, just best practices that get you a little closer on average to optimizing your goal.
The hero can be seen as a microcosm of your entire website. All the principles we talked about should also be applied on the other pages. But while you can get away with a less than optimized section on a subpage, you need to invest substantial time in finely tuning the hero. If you lay a strong foundation in the hero, the rest of the site development will be a lot smoother and successful.