Non-Profit Website Design: 5 Best Practices

Non-Profit Website Design: 5 Best Practices

Web design is, arguably, equal parts art and science. While aesthetic choices vary over time and across demographics and industries, functionality is increasingly vital. Whether you're designing a non-profit website or an eCommerce store, or anything in between, modern audiences are increasingly demanding and wary. At the same time, they have a sheer abundance of choices, so aesthetics remain vital as a diversifying factor. Web design must evolve and meet their needs – from an effective logo to a full contact page.

That's not to say there are no industry-specific web design needs to mind, however. Audiences differ significantly, so there are no universally applicable solutions beyond the fundamentals. In the case of non-profits specifically, the very essence of their organisation differs from for-profit as well.

This post will outline fundamental web design best practices and explore ones specific to non-profits. It will provide relevant examples and citations and hopefully inspire you to serve your cause best.

Universal best practices of web design

Initially, web design comes with some universal best practices regardless of industry. These primarily hinge on the essential functions of a website, its accessibility to all audiences, and its foundations and analytics.

Of course, covering all aspects of web design would be outside of this post's scope. Moreover, some universal best practices also require different approaches for non-profits, so they're best left for the next section.

Still, the following 5 are practices virtually no websites can or should do without. 

#1 A robust Content Management System (CMS)

The foundation of any website, your choice of CMS when designing a non-profit website, will largely determine its potential. It will inform web design choices, themes and plugins, security options, and more. 

There are many options, including Wix, Squarespace, and Drupal. However, the safer bet for many remains the CMS juggernaut that is WordPress.

Today, WordPress powers 43% of all websites. As of last year, almost 60% of non-profits used WordPress. There's a good reason for that; WordPress is powerful, flexible, and offers a rich ecosystem. If it doesn't become your final choice of CMS, these qualities are still highly desirable and worth ensuring.

#2 An eye on website data

A key reason why a robust CMS is paramount is that website data is an invaluable asset. No matter your field or industry, there are ample website metrics to track to gauge how audiences interact with your website – and determine what your web design needs to focus on.

Among many, stats to keep an eye on in this context include:

• Page loading speed
• Traffic acquisition
• Bounce rates
• Session duration
• Pages per visit

There's an array of options to keep an eye on such metrics, from Google Analytics to third-party solutions like heatmaps. However, having your analytics inform your web design is essential regardless of how you do so.

#3 Speed and responsiveness 

On the subject of page speed, prioritising it is unquestionably valuable. Designing a non-profit website may cater to a different audience, but it must still abide by this principle.

Best practices in this front range from web design to web development, and there's a plethora of them, including:

• Image and media compression and optimisations
• Culling heavy themes and plugins
• CSS and JavaScript minifications
• Streamlining HTML
• Using Content Delivery Networks (CDNs)

Regardless of how you do so, this principle will be fundamental to your website's success. Google finds that loading speeds over 3 seconds considerably increase bounce rates, which can tremendously harm your website's performance:

#4 Accessibility

Next, accessibility is just as crucial as quality. This doesn't refer to general accessibility but accessibility as defined by the W3C Web Accessibility Initiative (WAI). 

Ensuring your website has this quality is an ethical imperative, as it allows individuals with impairments to access it. It expands your potential audience base in the process, benefitting your organisation. Finally, while not law in itself, WAI does inform such laws as the Americans with Disabilities Act (ADA). 

Accessibility-minded best practices concern web design and SEO, including minding colour contrasts for better readability, adding alt. text to images for screen readers and Google, and enabling keyboard-only navigation, which enhances user-friendliness.

If designing a non-profit website, you may use the web accessibility evaluation tool WAVE. Doing so early in the process should help inform your efforts.

#5 Effective Calls to Action (CTAs)

Finally, all websites seek to guide the user toward specific actions. These can differ significantly, but the journey to them will always hinge on impeccable CTAs.

As your literal calls to action, your CTAs must have specific qualities to be effective. Namely:

• Visibility; from your CTA colour to the lack of nearby visual clutter, your CTA should always stand out.
• Readability; your CTA's font and colour should keep it readily readable.
• Clarity; your CTA's placement should make contextual sense, and its copy should be crystal clear on what the user should expect to happen next.

Call To Action design entails much more, including CTA volume per page and placement relevant to offer complexity. Still, every website must have its performance improved by subpar CTAs.

Why does non-profit web design differ from for-profit web design?

Having covered the fundamentals, non-profit web design does come with a distinctly different purpose than for-profit web design. 

The two share many functional qualities, such as user-friendliness, responsiveness, and effective CTAs – but they differ in purpose. This is a crucial distinction to make when designing a non-profit website.

For instance, consider UNICEF's homepage as of writing this post:

Now compare it to that of Adidas:

Design-wise, the two have many similarities; they feature main categories in the header, offer a search function for navigation, make their offerings immediately evident, and so on. However, they address entirely different audiences.

Ocean Wong's discussion with Shalini da Cunha, Executive Director at the Peel Halton Workforce Development Group, highlights this best:

“The main distinction between For-profit and Non-profit is that in For-profit organisations, you sell a product or service that impacts their bottom line, where Non-profit Marketing is really to get a message across. […] The main goal for for-profits is to make money, while Non-profit focuses more on issues, education, and empowering others with knowledge.”

In brief, for-profits must address their customers' pain points and present an enticing product or service. In contrast, non-profits need to communicate the significance of their cause to willing contributors. This stark difference falls on web design to address – beyond content and marketing strategies, copy, and other endeavours.

Best practices when designing a non-profit website

In addition to catering to a different audience, non-profits face the challenge of saturation. There are over 1.5 million non-profits in the US and over 170.000 charities in the UK. Therefore, non-profit web design needs to go above and beyond, setting the non-profit apart, framing its cause, and more.

#1 Start with an effective logo

First, as an excellent asset for branding, non-profits need a stellar charity logo design. An organisation's logo visually represents it and its brand and inspires positive – or negative – connotations at a glance.

Charity branding necessarily begins with a logo, communicating the organisation's goal. Both can, by all means, adjust over time as WWF did:

Still, the logo only changed aesthetically, not essentially. It added the organisation's tagline in 1986 and otherwise remained on-brand. It maintained its focus, reflecting the organisation's cause, and only updated its style and use of white space. 

It is these exact qualities a non-profit logo should have; visual clarity, brand relevance, and consistency over time. As our aforelinked article explores, there is room for creativity, but effectiveness is critical.

#2 Add trust signals and have a crystal-clear mission statement

On the subject of trust, cultivating trust is imperative for non-profits. It is for for-profits, but non-profits don't seek to sell their offerings by appealing to visitors' needs. They seek to elicit donations, which appeals to their empathy – arguably requiring even more trust-building.

When designing a non-profit website, it is highly advisable to mind all trust signals. Five-second tests are a great initial review lens; can visitors immediately understand what your organisation does? If not, they likely can't trust it – and your web design needs to address that swiftly.

For a great example of trust signals, consider UNICEF's homepage above. In this regard, it features:

• A concise, straightforward mission statement and cause
• “What we do” and “About us” pages
• Additional informational content in a “Research and reports” category, and testimonials in a “Stories” category  

Most organisations don't have UNICEF's brand power, but these web design practices can only benefit trust-building. That UNICEF uses them despite its brand power should be a testament to their value.

#3 Optimise for mobile devices

Beyond trusting the user experience, the principle of user-friendliness holds immense value as well. The more functional and easy-to-navigate a website is, the more likely it is to perform well and foster trust.

Toward this goal, mobile-friendliness is virtually imperative. For one, it caters to a large audience – as mobile traffic consistently surpasses desktop traffic, according to Statista:

This trend is also consistent with non-profit audience trends; according to Qgiv, 51% of non-profit website visitors are mobile. In turn, mobile-optimised non-profit websites yield 34% more donations than unoptimised ones.

When designing a non-profit website with mobile visitors in mind, you may specifically consider the following:

• Testing your website on all device types – and browsers
• Using sticky navigation for main website elements
• Limiting primary navigation link copy to a few words
• Using buttons instead of links where appropriate
• Optimising and resizing images for mobile website versions

If you're unsure of your design choices in this regard, use Google's mobile-friendly test tool to inform your efforts.

#4 Write concisely and embrace storytelling

With responsiveness in order, your content itself will need to convince your visitors. As Shalini outlined above, non-profit audiences seek knowledge – which your content must provide.

First, you will need to cover the fundamentals of writing a blog post. Examine your written content for such qualities as:

• Proper structure; H2s, H3s, etc., break up long blocks of text and allow scanning
• Content formatting; bullet lists, relevant visuals, and other media enhancing readability
• White space; allowing content, visuals, and CTAs to breathe through white space for better comprehension

These aside, non-profits must leverage storytelling to best cater to their audiences. Toward this end, write with such questions in mind as:

• Who is the character of this story?
• Does this content expressly tie back into your organisation's actions?
• Do informative visuals offer additional insights into the subject?
• Do additional, person-first visuals allow readers to empathise and drive them to action?
• How can the reader help, and do they know how to?

For inspiration on this vast topic, Venngage offers a collection of non-profit storytelling examples you may find of use. 

#5 Keep your CTAs focused and offer options

Finally, once your content successfully entices your visitors, it falls to your CTAs to call them to action. Here, too, designing a non-profit website requires a step beyond general CTA best practices.

For a notable example of effective non-profit CTAs, consider Greenpeace:

Greenpeace's homepage aptly outlines the CTA above qualities, including:

• Optimal placement; all CTAs are above or near the fold
• Readability and simplicity; all CTAs pop out and feature clear, simple copy 
• Relevance to the cause; all CTAs are relevant to the organisation's actions and intended outcomes

The one best practice they reject is CTA volume, as the page features four. However, this is not a shortcoming but a viable approach for non-profits. 

Where a for-profit might focus on one conversion-minded CTA per product or offering, non-profits typically have more desirable goals. Namely, with Greenpeace's approach in mind:

• Eliciting one-time donations, whether for a more specific cause or the organisation's broader cause
• Eliciting recurring donations from invested donors
• Encouraging newsletter sign-ups to promote the organisation's activities 

Of course, exact CTAs and volumes will depend on the non-profit in question, but Greenpeace's approach can be a blueprint. Non-profits primarily don't suffer from choice fatigue the way eCommerce for-profits might, precisely because all actions serve the cause.

Conclusion

To summarise, web design does come with universally applicable best practices. Virtually all websites ultimately share practical goals and functions and thus value user-friendliness, responsiveness, and similar qualities that resonate with modern audiences.

Designing a non-profit website differs notably from designing a for-profit one, however. The two cater to distinctly different audiences, which design choices must account for. Consumers value product quality and customer support, and donors value brand sustainability, information on issues, and commitment to a cause.

This stark difference is what non-profit web design must account for by fostering trust, leveraging storytelling, and promoting causes. Hopefully, this post helped inspire you on how to do so effectively.