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.
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
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 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
The cause is clearly communicated in the website header. The social media icons are prominently featured to help their cause spread through social networking.
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
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
This design uses a story to illustrate its mission and show that there is positive action taking place with this tool.
8 – BibleTech
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.
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
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
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.
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
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.
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?