How to Mimic the Website Design of Powerhouse Nonprofits

Read Time: 5 minutes

Website-Design

In today’s digital landscape, web design that enhances customer—and donor—experience has become increasingly important. Internet users expect convenience, speed, and lots of options when browsing online or making any kind of purchase or donation.

For nonprofits and for-profits alike, that means focusing on the end user’s experience and making sure everything serves a purpose. Reducing points of friction, being concise, and creating user-friendly navigation are some key points to focus on.

To get you started, we analyzed the websites of 16 prominent nonprofits and compiled a list of five design features they have in common. We selected a mix of nonprofits from Forbes 100 Largest U.S. Charities and Top Nonprofits’ 20 Best Nonprofit Websites.

Scroll to the end of this blog for a full list of the nonprofit websites we analyzed.

THE HOMEPAGE

Be purposeful about your homepage design—it’s often the first impression your visitor will have, and you have seconds (or less) to make it count.   

In general, the nonprofit websites we compared had a long, vertically-oriented homepage with all the necessary information a user needs to learn about their cause and be encouraged to make a gift. This includes their clearly stated mission, a bold call to action, current projects, and a few testimonials.

Long homepages help reduce points of friction in the user’s decision-making process. They provide all the information needed to take action, without having to click through several webpages.

That said, be careful not to clutter your homepage by trying to stuff it with everything you have to say about your cause. Choose the essential information and present it in a clear, concise manner.

Many of the websites we looked at also used eye-catching photographs or videos on their homepage. These additions were meaningful and relevant to their specific cause and left a memorable impression on the visitor.

Conservation International, for example, uses compelling photography and action-inciting messaging to drive home their mission and encourage their web visitors to learn more about their cause:

Conservation-International-Website

Finally, infographics and features like trackers were widely used throughout all 16 websites. These visuals help to draw potential donors in and share the impact their gifts could have.

Take a look at the aid tracker on Direct Relief’s homepage—a simple, but powerful, display of its impact:

Direct-Relief-Website

THE DONATE BUTTON

Be strategic with your donate button.

The donate button should be easy to find no matter where the visitor is on your website. Across all 16 nonprofits, the donate button was prominently displayed, most often in the top right-hand corner of the page. Many of these charities also sprinkled a few donate buttons throughout each page in an unobtrusive manner.

Make sure to draw your user’s attention to this button by differentiating it from the rest of the page. You can do this by making it a brighter color that contrasts with other design elements.

Habitat for Humanity draws the user’s attention to both donate buttons on its homepage by using colors that pop on the screen:

Habitat-for-Humanity-Website

Beyond donate button color, continue to reduce points of friction by minimizing the number of clicks needed to get from any page on your website to the billing page. The websites we analyzed took no more than two clicks to get to billing.

BILLING

Make the donation process as smooth as possible for your online donors.

Your donation page set-up can either encourage or deter potential donors from making a gift. If the process seems too time-consuming, a potential donor may abandon the page mid-task.

The majority of the websites we compared used one long page for the billing process. This way, they create transparency by letting their donors know exactly what is expected of them.

Require only the necessary donor information and provide multiple payment options along with an easy way to select gift frequency.

Some of the more popular payment options on the 16 websites we compared were: credit and debit cards, electronic checks, mailed checks, PayPal, and Amazon Pay.

Americares has a user-friendly, single-page billing process:

Americares-Website


TAKE ACTION

Offer your donors multiple opportunities to learn more about your work and make a difference.

All 16 websites we analyzed had a “Take Action” or “Other Ways to Give” page. These other ways to give can range from volunteering time to making in-kind gifts.

Some of the most popular options were: planned giving, honor and memorial gifts, financial grants, gifts from donor-advised funds, assets, stock donations, bitcoin, in-kind gifts (e.g. vehicles and clothing), volunteering, and peer-to-peer fundraising.

Information on specific causes was another common feature we observed, giving potential donors more insight into the work they could support. Salvation Army has a clean setup on their website where users can click on individual focus areas and learn more about them:

Salvation-Army-Website


MOBILE OPTIMIZATION

Meet your donors where they already are!

Organically increase your donations and website traffic by making sure your website is not only user-friendly but also mobile-friendly.

Take a look at charity: water's mobile-friendly billing page:

charity-water-Website       charity-water-website2

Visitors should not have to horizontally scroll or pinch to zoom in order to fill out billing information, read text, or access other features on your website. If a potential donor encounters these types of barriers when visiting your website, they will be more likely to abandon the donation process midway through.

All 16 organizations on our list tested positive for mobile friendliness. If you don’t know if your website is accessible and comfortably viewable from a range of devices, take this free Google test to find out.


Contact us if you have questions or need strategic guidance about your organization’s website. We offer a range of online fundraising services, and we would love to explore how we can work together to elevate your efforts.

Nonprofit websites we analyzed:

online fundraising, Blog

Giullianna Varalta Ciavolella

Giullianna Varalta Ciavolella is a Marketing and Business Development Intern at Campbell & Company. Giullianna contributes to key thought leadership efforts, including online fundraising and mid-level giving, and works to improve our client experience.

Comments