Blog home

How to design an engaging nonprofit home page

By Sarah Henry
November 15, 2019

Does your organization’s website give visitors a good online experience? Although social media and email campaigns are both great ways to raise awareness, your nonprofit’s website is often the first place people encounter your mission. It’s also your first chance to make an impact on your audience behind their computer screens.

How do you get visitors to engage with your website? In the digital age, we are surrounded by online content. It can be hard for your organization to stand out. That’s why it is important to make your website’s home page design irresistible.

Your home page should represent your organization visually. At first glance, it should give visitors a basic idea of what your organization is all about. It should be clear that you are a nonprofit in a specific industry, serving a specific community. From the top banner to the bottom of the page, your home page should both represent your mission and queue up the rest of your website.

Here are some tips to make your website’s best first impression.

Above the fold content

It takes only seven (7) seconds for your home page to have an impact on your visitors. Those seven seconds include the time it takes to load your site.

How do you engage with your audience as much as possible in seven seconds?

This is where the content above the fold matters. Above the fold is a newspaper term; it refers to the content in the top half of a newspaper’s first page—the part that shows when the newspaper is folded in half. In website terms, above the fold means the content that loads at the top of the screen and that is visible without the visitor having to scroll down the page.

Eye-tracking research has discovered that your content above the fold will be viewed over 80 percent of the time. It needs to be bold and engaging while representing your nonprofit’s mission and incorporating your branding.

Use eye-catching visuals and white space

Eye-tracking tests have found visitors are immediately drawn to images and videos. As you select images and videos for the top half of your home page, strive to feature high-quality images that have a low file size, so the images load quickly yet clearly.

Don’t overload your design with too many components or colors. Keep your page simple. Space out your components so your viewers don’t get overwhelmed and so their eyes are drawn to the key content areas.

Choose one, or maybe two prominent calls to action (CTAs) to sit on your home page banner. Link to places on your site where the majority of your visitors will be interested in going.

American Indian Services home page. A women in Native clothing is at the right of the image, looking to the viewer's left. Text to the left of the image clearly identifies the organization's mission as providing scholarships and programs. The design is clean and uncrowded.

Take a look at this example from the organization American Indian Services. This home page content does a great job of utilizing both color and white space to draw your eyes to the main points. The high-quality photo banner draws you in to quickly understand that this nonprofit serves the American Indian community. The strategic placement of the text and CTA against the simple blue background of the sky emphasizes the copy so you quickly learn the AIS offers scholarships and programs. Within a matter of seconds, visitors understand AIS’s mission. Keep it simple to make an impact.

Introduce your mission quickly with a preloader animation

A preloader or loading animation is an easy-t- load graphic that appears on the page while the rest of the website is loading. Incorporating a preloader is a great way to improve your bounce rate—the rate of people who come to you home page and immediately leave it—and engage your visitors, especially if your site happens to take longer to load. Your preloader is also an opportunity to give a quick introduction to your mission or your branding.

The words END HUNGER in white and highlighted in orange. Beneath them, a circle rotates, indicating that content is loading.

Take a look at a great example from Action Ministries. Its site uses a preloader that is branded with itscolors and says “End Hunger” —the organization’s mission in just two words. While the site is loading, visitors already can tell if they’re in the right place.

Essential components

After your website has piqued your visitor’s interest, the viewer will take in the rest of the components of your home page. Here are a few essential items to include.

Home page for the American Brain Tumor Association. Numbers and arrows point to elements that correspond to the ennumerated list below this image.

  1. Logo: Put your logo in the top left corner. Studies have found that users are 89 percent more likely to remember your organization’s logo if it is found in the top left corner of a web page, as opposed to the top right.
  2. Navigation bar: The navigation bar should sit horizontally on the top of every page. It should be fixed on the home page, meaning it is still visible as visitors scroll down the page. Exclude the navigation bar on your donation page and other sign-up pages, as you don’t want distractions to discourage visitors from completing the form or donation.
  3. Donate button: Your donate button should sit in the top right corner of your website. Visitors familiar with nonprofits will expect the donation button to appear in the top right corner. The longer it takes for visitors to find the donate button, the more donations your nonprofit is missing out on. Don’t make finding the button more difficult than needed.
  4. Social buttons, site search, language options: We recommend you also include the following in your headers: a site search functionality, a link to your social channels, your contact options, and multi-language options if your site offers them.
  5. Accessibility features: The final must-have component above the fold is a button for your site’s accessibility features. This plugin from UserWay is free and available on WordPress and offers all kinds of accessible navigation, including keyboard navigation, accessible contrast colors, highlighting links, and so much more.

Below the fold content

The rest of your home page is what I like to call the “tasting menu” for your website. Visitors tend to scroll quickly. They don’t read every component but instead scan to see what your website offers. When they notice something that catches their eye, they will read more thoroughly and click to continue on.

Break down your below-the-fold content according to the links in your navigation bar. These headings are the most common pathways that your users will follow, so your home page content should be broken down in the same way.

Each segment needs to include four components: something engaging like a picture or a graphic, a bold heading, a short snippet of what’s included on the following page, and a CTA to take visitors where they want and expect to go. Here is a great example from abta.org.

Content from below the fold on the American Brain Tumor Association home page

Remember, you should never have a dead end on your website. Each snippet and each page should have a CTA or link that takes the user somewhere else. Never leave visitors unsure about where to go next.

The footer

The final component of your home page is the footer. Here are a few standard components you’ll need.

Footer from the American Brain Tumor Association home page

  1. Put the logo again in the top left-hand corner of your footer. If you had to use smaller version of your logo at the top of page, you can display a larger or expanded version here.
  2. Next to the logo, include an expanded version of your site map and navigation bar. These links are helpful for users who want to go to a specific location or for those who search the page for specific keywords using command+F or CTRL+F.
  3. Below the links, include your organization’s official name, address, phone number, fax number, email address, and any other form of contact information the public can use to reach you.
  4. The footer is a great place to include logos or seals that show your organization has earned a GuideStar Seal of Transparency; received a high rating from CharityWatch, Charity Navigator, or another organization; or is a member of a professional association.
  5. You can also include a CTA or short form to subscribe to your organization’s newsletter for updates.
  6. In the very last section, include an up-to-date copyright and official organization name. You may also want to include your Employer Identification Number (EIN) here, because many donors will return to your site to find this number during tax season.

If you follow these conventions, you’ll end up with a beautiful and engaging home page that your visitors. Take care if you decide to break any of these conventions—not following them can cause your visitors to take up to 50 percent longer to figure out who you are and how to use your website. Your chance to be creative is in your design—your color choices, brand strategy, voice, tone, look, and feel. Stand out from the crowd through your beautiful and engaging design.

Want to learn more?

Join me at the upcoming webinar, “How to Design an Irresistible Website that Attracts the Right Members,” offered by Wild Apricot on November 19.

Tags: Websites