How To Design a Non-Profit Website That Engages Donors and Volunteers

by Stephanie Hamilton

Last updated on February 26th, 2018

It’s one thing to design a beautiful non-profit website.  It’s another thing to design a non-profit website that engages donors and volunteers.

Non-profit websites should consider the same usability issues as their for-profit cousins and then some.

The goals of the non-profit website differ compared to a corporate site and the site design should reflect this.

Key considerations that should be addressed in the design of a non-profit websites include:

  • Making it easy for site visitors to learn about the non-profit’s cause  — This should be your primary goal.  You must communicate what it is that your organization is doing immediately through the use of images and text.
  • Incorporating primary calls-to-action such as “Donate” or “Volunteer” — Second only to communicating the cause, it should be abundantly clear what action site visitors should take to contribute to the cause.
  • Allowing media contacts to find the information they need quickly and easily — Media coverage is critical to spreading information about your non-profit and the cause.  Making it easy for the media to find the information they need to cover your non-profit is in your best interest.
  • Including quick links to more information about the non-profit and key figures in the non-profit — One of the most visited pages on any website is the “About” page and this goes double for a non-profit.
  • Using a blog to get the word out and add your voice to the cause — Your non-profit needs a voice, a blog can provide it.
  • Incorporating social media prominently into the design — The causes that non-profits support spread easily across social media platforms.  Non-profits should figure social media sharing capabilities more prominently into their design than their for-profit cousins.
  • Using an email newsletter to keep interested parties informed — Some of your site visitors will want more information but won’t be ready to donate time or money.  Give them the opportunity to engage further with your cause by joining an email newsletter.
  • Using text, video and images on your website that indicates that positive action is taking place — Donors and volunteers will want to know that their time and money is going to be well-spent.  Use design elements to communicate the positive impact your non-profit has already made on your cause.

Below is a roundup of fifteen non-profit websites that are not only beautiful but also entice their site visitors to take action to support the cause.

1 – Nature Conservancy

Nature Conservancy Calls To Action

Notice how the cause is front and center in the home page header.  Calls-to-action to shop, learn about a membership or donate are easy to find.


ASPCA Website Design and Marketing

There are three links to “Donate” in that screenshot.  Can you find them all?  The imagery on this website along with the tagline “We are their voice” communicates the cause clearly.

3 –  One

One Non Profit Home Page of Website

One has a very active blog on their site that gives them a channel from which to communicate their voice to the cause of fighting poverty.  The blog helps them build a strong community that advocates for their agenda and supports their activity.

4 – Red

Red Non-Profit Website Design

The cause is clearly communicated in the website header.  The social media icons are prominently featured to help their cause spread through social networking.

5 – Africa Oasis Project

Africa Oasis Project

Notice how the “Media” link is featured prominently in the top navigation.  Mainstream press coverage is important to a non-profit and it pays to make it easy for members of the media to find the information they need.

6 – Africa Tour 2008

Africa Tour 2008 Website Home Page

This page is no longer live, but the design is still worth noting.

The cause is communicated clearly at the top of the design.  The imagery and text below the header gives us the sense that there is some real action taking place with this non-profit.

7 – Marketing and Website

This design uses a story to illustrate its mission and show that there is positive action taking place with this tool.

8 – BibleTech

Bible Tech

Notice the prominent call to action to join their email list to get more information.

9 – DADS


People are the fuel that keeps a non-profit moving forward.  Notice the clear call-to-action to get involved by finding or starting a chapter of D.A.D.S.

10 –  Bill & Melinda Gates Foundation

How Bill and Melinda Gates Foundation Gets Donors and Volunteers

The Bill and Melinda Gates Foundation site uses an image slideshow with text overlay to tell their story quickly.  They also develop a tremendous amount of informational content around their cause on their blog.

11 – Finding Hope

Finding Hope

The pink design and “ribbon” in the logo immediately communicates the breast cancer cause.  The calls-to-action on the page use various shades of the pink that don’t distinguish themselves very well from the rest of the site.

12 – Cure International

Cure Internation Website Design

The call-to-action is clear in the header of this website and credibility is immediately garnered through the image of the famous Tim Tebow, quarterback of the Denver Broncos.

13 – Humane Society International

Humane Society Website Marketing

Notice the prominent placement of the “About Us” link in the left-hand navigation.  Before getting involved people will want to learn more about the organization and its key members.

14 – Not For Sale

Not For Sale Website

The Not For Sale website uses a short video in the header to show the progress they are making in ending slavery across the globe.

15 – National Peace Corps Association

National Peace Corps Website Design

The Peace Corps understands the power of social media to get the word out about their programs.  Their online store is clearly featured as a method for generating funds to carry out their operations.

The goal of the non-profit website should be to inform the viewer of its mission and make it easy for them to take action.

The most successful non-profit websites tend to have very clear navigation, minimal text, slideshows, and interactivity to elicit action from the viewer.

What elements do you keep in mind when designing a non-profit website that engages donors and volunteers?



Get updates on new articles, webinars and other opportunities:

Stephanie Hamilton

Stephanie Hamilton runs a small branding and web design studio where she helps clients market their company online. Visit By Stephanie and let's collaborate to tell your brand's story. Visit the blog for more helpful design and business resources.


Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.


Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Anonymous says:
    May 18, 2016 at 8:12 am

    I just love the way you have put up the examples to get more traffic for a website specially those who want to voluntarily donate and take eggs. Your efforts are remarkable; if all these steps are followed by a developer of a website then it will surely help him.

  2. Qasim Qazi says:
    February 6, 2014 at 5:39 am

    We want to develop website for our nonprofit organization (AAS FOUNDATION) like above mentioned with attractive colour combination. Please linked us with professional web developers..

    Qasim Qazi

  3. Eli says:
    May 23, 2012 at 9:43 am

    Great article Stephanie! You give some really important advice that all Nonprofits should be following. I recently attended a conference about Social Media for Nonprofits and they mentioned a number of similar approaches. Using social media in addition to just having a website can be a great way for Nonprofits to generate donations and raise awareness about their cause. One of the speakers at the conference has a blog where he talks about some of the ways Nonprofits can take advantage of social media:

    • Stephanie says:
      June 2, 2012 at 9:52 pm

      Thanks for reading, Eli! I agree, a solid web presence along with a well-planned social media strategy can reap rewards for your non-profit.

  4. Rick Cano's - Non-Profits says:
    February 23, 2012 at 2:39 pm

    Thank you Stephanie for your detailed article about How To Design a Non-Profit Website That Engages Donors and Volunteer’s. I’ve been designing WordPress websites for the past 10 years and I’ve designed three specific type’s of Non Profit websites.

    If you’d like I can send you a link to all three of these sites.

    Have a great day!

  5. Al McBride says:
    February 22, 2012 at 10:49 am

    When creating any website even many professionals fail to properly grasp the problem of good design versus a site that convinces people to take a desired action. The former is simply pretty, the latter springs from a clarity of what the site is meant to do from its inception. What is the purpose of the site existing in the first place?

    Non-profit sites are different to e-commerce sites of course. But the underlining base principles are the same. You need to have clear goals for the site and for each page, and from those clear objectives will spring your calls to action. What do you actually want the visitor to do? Whether it’s ‘sign up for our newsletter’, ‘buy now’ or ‘make a donation’, the objective of each page has to be clear and clear before the page is even created.

    Basic project planning is often where so many otherwise good sites fall down, the rush to make things pretty and use content that’s good but maybe not directly targeted to the site or page’s purpose (to use the e-commerce phrase) ‘leaves a lot of money on the table’, so to speak.

    Thanks for a great post!

    Al McBride

    • Russ Henneberry says:
      February 22, 2012 at 2:38 pm

      @Al McBride — Well said Al! Thanks for the thoughtful comment!

    • Stephanie says:
      June 2, 2012 at 9:55 pm

      Hi Ali – I agree. I start every web design project with a creative strategy that will establish the goals of the non-profit (or any business) that’ll lay the foundation for what’s to come.

      Thanks for reading!

  6. Martin Armstrong says:
    February 17, 2012 at 2:16 am

    Make your site as simple as possible, especially on its homepage. I already manage a donor site. I can attest that simplicity makes this site more interesting to people.

  7. Brian Carlson says:
    January 30, 2012 at 2:06 pm

    It’s great see these examples. Thanks for sharing! I noticed how so many of them have original photography that communicates their vision appropriately.


    • Stephanie says:
      June 2, 2012 at 9:58 pm

      Hi Brian – Yes that’s very true. Original photography oftentimes strikes an emotional connection with the visitor where stock wouldn’t. Thanks for reading.

  8. Jim crews says:
    January 24, 2012 at 10:19 am

    Great tips! Often, thoughtful design and a simple message do the trick. The call to action buttons are also SO important. I often hear non-profit partners complain that nobody joins ‘their ‘list’, yet the signup form is buried in the footer!

    CEO –

  9. Rebecca says:
    January 20, 2012 at 3:08 pm

    Great tips and examples. Thanks for this.

  10. Bear Files says:
    January 19, 2012 at 11:21 am

    Love these web examples, Stephanie. Way to point out the specific call to actions too. My clients sometimes ask me to design websites without providing homepage content or conversion goals, which just makes me realize just how important it is to work with the website owner up front to define the website’s top content and overall goals.

    • Russ Henneberry says:
      January 19, 2012 at 12:24 pm

      Couldn’t agree more. It just doesn’t work that way.

    • Stephanie says:
      June 2, 2012 at 10:06 pm

      Thanks for reading! I agree that establishing goals from the beginning can alleviate any problems that may arise later in the design process. It can also prevent website re-designs down the line as a result of not creating a web strategy.

Show Me My Heatmap

To capture data, @blueearth recommends website heatmaps #CrushinItMN



What makes people leave your website?