Designing Your Charity Website: How to Make Your Homepage Shine

Every charity has a story worth telling. But, all too often, that compelling story about the social problems you’re solving, the people you’re helping and the difference you’re making is buried within your homepage – under long paragraphs, cluttered navigation menus or clunky page structure. 

Remember, your website is often the first place someone encounters your mission and organization — which means that your homepage and About Us page are not just casual or unimportant design choices. 

In reality, these are two of the important assets your charity can build to offer a first impression and tell your story.

Best Practices for Designing a Charity Homepage

Your homepage — sometimes called your “landing page” — is the centrepoint of your website. It’s typically a visitor’s first impression of your organization, the place where people land when they discover you online.

For smaller charities operating without a multi-page website, a well-thought-out landing page can be enough to cover your website needs. 

If you don’t have a website or a landing page yet, learn how to leverage CanadaHelps Charity Profile as your digital homepage.

What Should a Strong Homepage Include?

Snapshot

Your homepage should present a snapshot of your organization. Effective homepages capture what your charitable organization does, your purpose, and your impact in a sentence or a few bullet points that contain key information. 

Imagery

Ideally, your homepage should feature 1-2 high-quality images. In the event you work in an area where photographs present safety or privacy concerns, using an emotive illustration, even something AI-generated, is sufficient. 

Skimmability

Skimmability is an important aspect of a homepage. Skimmability is the need to highlight and summarize key information in a way that visitors can understand at a single glance. Skimmability matters because users typically spend 3 seconds on any given section of a webpage. Charities should keep text passages short and punchy, since people don’t spend time reading long paragraphs. 

Above the Fold Section

This is the portion of your webpage that is visible, without scrolling, when traffic lands on your homepage. The ‘above the fold’ section is prime real estate for engagement and driving conversions. 

Since 77%–84% of visitors will not scroll down after landing pour time and energy into perfecting the above the fold section, especially the following components: 

• Headlines
• Keywords
• CTAs 

Check out Saskatoon Community Foundation’s excellent homepage design for examples of snapshot, skimmability, and ‘above the fold ’ in action.

How to Structure Your Homepage

Make it easy for visitors to find and complete a donation through your CanadaHelps donation form directly from your homepage. It shouldn’t take users more than two to three clicks to donate. A well-known UX principle holds that the more clicks a user needs to complete an action, the more likely they are to drop off before finishing — lowering your conversion rate.

Best practice: anchor your donate button in the top-right corner of your navigation menu bar.

Navigation bar best practices

• Anchor it so it remains ‘stuck’ when scrolling
• Place a Donate Button on the right side
• Include clear labels and subheadings for your other website pages. Such as: 
  • • About Us
    • Campaigns or Programs
    • Ways to Give

Donation button best practices

• Anchor the button inside your navigation menu
• Use bright or contrasting colours that align with your brand’s colour palette
• Use action-oriented language: ‘Donate Now’, ‘Give Now’, etc
• Position the button in the top-right corner

For charities with multi-page websites, one of the primary pages to design — following the homepage — is an ‘About Us’ page. 

Charity Homepage Checklist

What to Include on Your Homepage:

• Topline navigation bar featuring a menu of options
  • Limit your menu to a maximum of 5-6 subcategories 
  • A multitude of options confuses the user, lowering efficiency 
• Snapshot of your charity
  • What your charity does (mission, purpose) 
  • Who your charity serves (children, animals, a specific community, the environment, etc.) 
  • Your location and the geographic region(s) you serve 
  • Impact metrics 
• Actions you want visitors to take
  • Direct traffic to the next step in their journey 
  • Make a donation 
  • Register for programs 
  • Submit a volunteer application 
  • Register their email 
• Testimonials from donors or volunteers 

What to Avoid on Your Homepage?

• Long blocks of text 
  • This can look like covering your organization’s entire history or origin story 
• An extreme number of options or submenus 
  • More than 6 options can create confusion for the user 
• Heavy elements that slow down load speeds, these include:
  • Uncompressed images (ex. 4000+ pixels wide)
  • Natively embedded videos
  • Host videos on a third-party site like YouTube or Vimeo 
  • Unnecessary WordPress plug-ins
• Multi-page material like case studies, blogs, or annual reports View 

What should a Strong ‘About Us’ Page Include?

After the homepage is complete, one of the next pages we recommend building within your website architecture is the about us page.

Your About Us page should go deeper than your homepage, helping visitors build trust in your organization. Use it to illustrate credibility and showcase your proven impact in your area of the charitable sector.

• Origin or founding story
  • Centre the impact your organization creates
• Mission, purpose, and/or philosophy
• People or communities you serve and why
• Board of Directors/Governors
• Impact data
  • Rely on statistics when possible (number of individuals who have participated in your programming, number of meals served per year, etc)
  • Showcase laws or policy changes that have resulted from your work
  • Illustrate impact points with charts, graphs, or visual aids
• Press mentions or media stories about your organization

Additional Website Pages to Develop

If your charity runs only one or two programs or campaigns, your About Us page should be enough to cover the breadth and depth of your work. Once you surpass two campaigns or programs, it’s time to consider developing additional pages to fully capture your work and strengthen your digital story.

As your charity grows, consider developing these website pages:

• A “Programs” or “Campaigns” page
• A “How to Get Involved” or “Ways to Support” page
• A “Volunteer Opportunities” page
• A newsletter sign-up page or modal
• A “Ways to Give” page

Next steps

Your homepage and About Us page serve as the base of your digital fundraising story. Once established, they set the tone for the rest of your website architecture that follows. 

Making some of the intentional changes outlined here, to the structure of your website’s home and about us pages, can make a real difference to how visitors experience your organization and whether they convert and make a gift. 

For a deep dive into all aspects of how charities can optimize your telling your digital story – download our free digital fundraising guidebook on UI/UX design for Canadian charities. Learn and discover practical tips on turning your website into a conversion tool.