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

by 20 01/19/2012

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.

2 – ASPCA

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 – Change.org

Change.org 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

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?

About 

Stephanie Hamilton is the Owner/Creative Director of Atticus Pet Design Studio and a freelance Web/UI Designer. Holding a BFA in Graphic Design, she has several years experience helping businesses reach their full potential through strategic branding and good design. Follow her on facebook and twitter.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

20 COMMENTS

Bear Files

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.

January 19, 2012 Reply

    Russ Henneberry

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

    January 19, 2012 Reply

    Stephanie

    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.

    June 2, 2012 Reply

Rebecca

Great tips and examples. Thanks for this.

January 20, 2012 Reply

Jim crews

Stephanie,
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!

Jim
CEO – CharitySub.org

January 24, 2012 Reply

Brian Carlson

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

Brian
http://www.briancarlsonphoto.com
http://www.briancarlsonphoto.com/blog

January 30, 2012 Reply

    Stephanie

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

    June 2, 2012 Reply

Martin Armstrong

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.

http://www.digitalsynergy.com

February 17, 2012 Reply

Al McBride

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
Director,
http://www.SelfAssemblySites.com

February 22, 2012 Reply

    Russ Henneberry

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

    February 22, 2012 Reply

    Stephanie

    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!

    June 2, 2012 Reply

Rick Cano’s – Non-Profits

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!
Rick

February 23, 2012 Reply

Eli

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:

http://www.bradaronson.com/22-high-impact-low-cost-social-media-opportunities-for-nonprofits/

May 23, 2012 Reply

    Stephanie

    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.

    June 2, 2012 Reply

Qasim Qazi

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

February 6, 2014 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>