Design

Our favorite nonprofit websites of 2017

Although you don’t have the most money or the biggest team, nonprofits do have a leg up when it comes to grabbing attention and pulling heartstrings. They have more potential for the most compelling Unique Value Propositions, calls to action, video content and the like. If you can somehow come up with the budget for a new site come 2017, here are a few nonprofit web design trends after which you can model your own site. For more inspiration, visit the nonprofit web design page on Webdesign Inspiration.

Save the Rainforest

rainforest.arkivert.no
rainforest.arkivert.no

Why does this nonprofit site stand out:

One website characteristic we talk about for grabbing the attention of your users is your Unique Value Proposition – read about it in “Think Personal Value” for more pointers on this. This Save the Rainforest campaign incorporates the tactic we mentioned in our post: start by showing the audience what personal value your nonprofit has to them and why your nonprofit needs them.

*Takeaway: Focus on your UVP statement and let it guide the rest of your site. 

CTA’s & forms:

If you click on “become a protector” in the top right of the screen, the form keeps you on that page. Many users don’t like getting taken to another screen, especially if the screen doesn’t match the branding of your current page. For Save the Rainforest, this transition was seamless.

*Takeaway: Focus on your form as a primary goal of the site and keep the transition to it as smooth as possible. 

Additional perks of the design:

Besides the intriguing intro video with inspirational music and clear CTA’s, this site has an interactive feature. You can click on a part of the map and see the real people affected by this cause. The interaction brings you into their world, as if you can actually meet the people you’re helping.

nonprofit-ux-design

*Takeaway: If you are just starting out on the process of RFP, see if there’s an agency that will help develop an interactive feature. Keep in mind, people pay attention to these microinteractions and interesting interfaces more than they ever did before. 

Something we dislike about the UX:

It was a challenge to get back to the home video and some of the VR usability got a little confusing.

*Takeaway: If you do invest in a fun feature like this, test it thoroughly and even have your current volunteers and donors test it to find areas that aren’t translating well. 

Sharing America’s Marrow

sharingamericasmarrow.com/
sharingamericasmarrow.com

Why does this nonprofit site stand out:

This site has a clear audience and a beautiful simplicity to it through and through. The designers stuck to their branding in each aspect, making the journey from getting interested to getting involved a pleasant one.

*Key takeaways: Invest in a strong team as this site will last longer than many others.

CTA’s & forms:

2 of their 4 site navigation items are about getting involved somehow. It’s easy to get there. nonprofit-website-design-ideas

*Key takeaways: Speak to your user, knowing that not all of them can donate financially. Give them possibilities and highlight all of those. 

Additional perks of the design:

Rather than attempting to speak to every audience at once, it’s clear that this site has a target audience and sticks to telling their story and speaking to them.

nonprofit-web-design-ideas

*Key Takeaways: At the start of your design, have your entire team go through an audience persona exercise – like ours here. Understand this target market before diving into anything else. 

Something we dislike about the UX:

The get involved form takes you to a separate page. It feels disjointed and is surprising since the rest of the site is so smooth.

*Key takeaway: If you have to use a separate form page, see if you can explain this transition to your audience before it happens. 

Time to Choose

timetochoose.com

Why does this nonprofit site stand out:

This site had amazing footage with which to work. It capitalizes on drone video – a growing trend and one that is attainable for nonprofits. Right below this, it tells you precisely where you can get involved and how that helps their cause.

*Key takeaway: If you invest in quality content like a powerful video, you don’t have to say a lot. You simply have to tell your audience where to go, now that you’ve got them hooked. 

CTA’s & forms:

Each CTA on the homepage pulls you to another convincing and informative video.

*Key takeaway: When you call your users to take action, make sure you explain how that specific action affects the cause. 

Additional perks of the design:

The explanation videos under each separate call to action are not that complicated, but they’ve done a great job of optimizing them. They only play when they’re in the users’ main screen and they mute once you scroll away. They have a concise statement below them to further engage the audience.

best-nonprofit-web-design

*Key takeaway: If you got content, optimize it appropriately. 

Something we dislike about the UX:

There are so many calls to action, which can be a good attribute, but they all take you to separate pages. If these could be the same stylistically, they might get more conversions.

*Key takeaway: Simplify your forms and stay consistent.

 

Of course, our very favorites are the ones our team at ArcStone launched this year! Take a look:

Big Brothers Big Sisters of the Greater Twin Cities

Idealware

Minnesota Corn Grower’s Association

Kids in Need Foundation

If you’re ready for a web design project, contact our digital strategists & designers at ArcStone. They’ve designed over 10 nonprofit websites, learning a lot in the process. Yours could be next!