Tips For Creating Usable Charity & Nonprofit Websites

How do I create a charity/nonprofit site?

Draw your viewers' attention through high-quality photos
Clarify the nonprofit's purpose and intention right away
Ensure your navigation is clean
Create bold and attractive donation buttons

Great charities and nonprofits all need a stellar web presence. Most people search Google for everything, and charities are no different.

It’s easy to study other nonprofit websites to gather ideas and build a visual library for your design work. But to make a usable design, you need to understand how people interact with websites.

With this article, I want to shed light on common trends for charity and nonprofit sites. I’ll explain how these trends work and how they improve usability. If you’re designing any sort of nonprofit website, then this guide can help you plan the most important part: the user experience.

Draw Attention With Photos

A great picture is worth a thousand words. This proverb rings just as true on the web as with any other medium, and photos are a perfect way to jazz up a nonprofit website.

But the goal should be relevant and purposeful photography. These photos should help sell the cause or the improvements made by the charity.

I’m a big fan of hero images, because they can blend naturally into the layout while still grabbing attention above the fold.

Here’s a great example from a hero image the Climate Reality Project has utilized in the past, which uses a photo from earth’s upper atmosphere.

Once you scroll down, this hero disappears. But you’ll find many other photos on the homepage and other heroes on internal pages too.

These photos should improve on the message at hand. It’s a good idea to include some text along with the image to clarify the organization’s purpose. But try to let the image speak for itself.

Another nice example is the homepage for Invisible Children. This uses a background video in place of a photo which typically grabs more attention.

But this also takes longer to load and requires a larger file size.

However, for this site, the video works well enough and it loads quickly. It’s usually easier for charities to snap photos rather than record video, so the static hero image photo is usually a simpler choice.

Images are powerful when used properly. Every charity has some main goal or primary cause, and it’s easier to show rather than tell.

If you want more examples or design ideas, check out this Smashing Magazine post on nonprofit layout design.

Clarify Purpose & Intent

When people first land on a charity’s homepage, they always ask a few questions.

Why does this charity/nonprofit exist? What are they trying to do? And how does this relate to me (the visitor)?

Your website should attempt to answer most of these questions at the very top of the page.

Visitors should be able to tell what your charity does almost instantly. Nobody wants to dig around your site just to figure out what you do, and in fact most people will just leave instead.

It can be difficult to see this on your own site since you may constantly be looking at it. So try looking at other charity websites instead. See if you can easily discern what they do right off the bat.

Here’s an example of a well-designed homepage that unfortunately doesn’t explain much about the cause. This shows you can have a nice website design but poor usability.

This site brands itself as a “change agency” which helps “those who work where life change happens”. This is far too vague to grab attention or even sell the charity’s purpose.

By contrast here’s a homepage that not only clarifies its cause, but also has well-written copy promoting a compelling message on privacy in the modern era.

Just from the top-most information, I can assume this nonprofit is about digital privacy. The image doesn’t quite sell the idea, but the copy is very well executed.

The primary thing you really need to answer is the goal/purpose of the nonprofit organization. If you can sell what the organization does, then more people will want to scroll further and learn more.

If you’re concerned about your homepage not grabbing new users, then check out my guide on homepage learnability. It covers some basic tests you can run and should help clarify the concept of a “learnable interface”.

Clean Navigation

All websites are made up of links, and the most important links are in the navigation.

Visitors can get a sense of what a company does just by scanning the nav links. A nonprofit’s primary links can typically break down into these categories:

What the organization does
The main cause/problem with data/examples
How the average person can help or donate

A clear navigation should explain how a nonprofit works. It shows which topics are most important, and it offers a trail guide into the website.

I really like the Memphis Zoo navigation for it’s design and structure. It scrolls along with the page so it’s visible at all times.

The colorful icons are a nice visual touch to help clarify the purpose of each link. Visitors can quickly scan the menu because the link text is big and clear, even from a distance.

It’s also a really simple navigation. Some of the links do have dropdown menus, but for the most part these five links don’t feel overwhelming or difficult to interact with.

The Livestrong site has an excellent navigation both in design and content. The links clarify what each menu is for and the written copy is stupid simple (always a good thing!)

For example, instead of the word “about” they use the phrase “who we are.” Same with the link titled “what we do,” which answers a very common question that most visitors have.

The link text feels incredibly natural and makes a crystal clear statement about the content.

Another nice example is the WWF site, which uses dropdown navigation and simpler parent links organized by three major topics: species, locations, and the specific work done by the WWF.

There is no single correct method of building a navigation menu. Each nonprofit has their own goals so different links will make sense for different scenarios.

But try to place yourself in the shoes of a typical visitor. Make the link text clear and try to answer their most common questions quickly.

Attractive Donate Buttons

This isn’t a necessity, but most charities benefit from donations. But visitors don’t want to browse around just to give money—so make it super easy!

The Conservation site has a big orange donate button fixed in the top right corner. This bright color stands out against the more neutral navigation colors to quickly draw attention.

And the button is a bit larger than the top bar so it gives the impression of hanging over the navigation. This uses asymmetry to bring attention towards the donate button.

Not all nonprofits need donations, but they usually need people to take action. Think of the most important action for new visitors and create a button/link for that behavior.

The NRDC uses a smaller donate field down toward the bottom of the page. This also includes a small e-mail newsletter signup.

They don’t affect the overall experience, but they are noticeable. If you’re okay with a subtler approach, then this strategy can work well.

But sometimes being pushy can work just as well (or even better) to get a user to take action.

On the charity:water site, you’ll notice a big donation form. This is right in your face and the donate form is actually larger than the explanation of where your money goes.

It’s a somewhat pushy feature, but I bet it works well.

Consider the goals of the nonprofit and try to design around those goals. If you need more hands on a project, then create a big “volunteer” section. Or if you need money, then donations might be more important.

Just make sure to build a clear CTA that draws attention and gets people to take action.

Final Thoughts

Charity sites aren’t that much different than most other websites. But they do have different goals and very different information.

I hope this post helped clarify the purpose of user experience on a website. When you design with the user in mind, you’ll see much better results and create a trustworthy web experience around your brand.