How to make a great Charity website

 

In this article I’m going to talk about how to create a great charity website for your users (I’m going to focus on user engagement). I’ll start with goals and knowing your audience ( supporters and service users ) and then talk in more depth about what large charities, that spend alot of time on digital are doing. I’ll discuss important areas such as page header and footer and the homepage. Finally I’ll talk about other things you can do on your website to engage your users. This article is aimed at charities that want to get more out of their web presence, but many of the concepts apply to any website.

Writing this article I’ve realised I’ve only touched the surface of charity website design and ongoing digital strategy. With that in mind I’m going to write a series of articles on a range of subjects in the area.

example of a great charity website with engaging image

The goal of your charity – Start with the Why ?

The goal might be for your charity to help more people, to achieve this maybe you need more people to volunteer and more money to buy equipment, hire and so on.

How can your Website and Digital Strategy, help achieve your goal/s

  • Communicate what your charity does
  • Signup volunteers
  • Enable Donations (of money)
  • Enable the Donation of things your charity can use or sell also
  • Facilitate Fund raising (e.g. Publicise and signup fund raisers to events)
  • Sell things via an ecommerce shop on your site

This is what you want to achieve, however to achieve these you need your users to play a big part. In this article I’m not going to discuss too much about donate forms, volunteer signup forms that kind of thing. I’m going to write another article soon to discuss those points in more depth, this article will focus on user engagement.

 

Who are your users and what are their goals ?  

When making any website or system it’s important to research who will use it. But broadly speaking for many charity websites we know who your main users are (and they fall into 2 categories or roles):

  • Supporters such as Donors, Volunteers and Fundraisers
  • Service users and their family and friends 

If you have the time and budget you can further research your users and who they are, where they are, what they do and so on. The more you know about your audience the better you can refine the ways to reach out to them, with what they want/need. There are many ways to do this, user personas can be a good tool, and are used alot in UX (User Experience) Design, here’s an article on user personas if you’d like to know more: https://www.hotjar.com/blog/user-personas

google suggestions for search on prostate cancerPutting users at the heart of the experience, and thinking about them first is the core of UX Design (User Experience). Companies like Apple have lead the way with this in the design of their products, websites, shops – everything. Make the user the priority and they will come back – often, provided you have an offering they are interested in and identify with. If you’d like an introduction to UX check out Piccia Neri’s excellent talk at Wordcamp London 2019 ( from 1hr 10mins onwards ) or her free course for UX.

 

The Goals of your Supporters ( including Donors, Fundraisers, Volunteers )

They want to know about your charity and the good work your doing. They want to Engage with your charity and feel a connection. charity volunteers

Often supporters will already have a connection with what your charity deals with. For example someone looking at Macmillans website a user might have had someone close battle cancer.

So don’t just try and force a donate button in their face 20 times on one page, give them compelling engaging content, tell your story , tell about stories of services users and how you’ve helped them.

Provide engaging content and guide them to volunteer, fundraise and donate – when they are ready. Because they want to, once they trust you and know what a great job your charity is doing. And furthermore when they feel connected and engaged by your charity they will come back and help you again and again.

 

The Goals of your Service Users

For service users it may be to find out more about the actual topic, for example if your charity is Cancer focused, the service user might have cancer or a person close to them might have Cancer and they may want to find out about the disease, the treatments, the symptoms and so on.

It’s good to have this content on your website for your service ( and it’s good to help users find your website as this same content will rank you highly in the search engines over time provided you have a content strategy and keep up with it ).

Now we know your goals and the goals of the users, we can move onto discussing what are the features of a website that will help achieve them. In this next section I’ll look at some of the things large charities do on their websites.

The big charities spend alot of time on websites and digital, because the world has moved online and they’ve embraced this Digital Transformation. So a good place to start to see some of the patterns that the big charities use is by looking at their websites ( pattern means a predefined way of doing something  ).

We’ll look at:

  • Homepage
  • Header , Footer ( and also branding and consistency )
  • Sections and content to engage users

Homepage

example of hero section of homepage

Your homepage is the most important page on your website because:

  • It’s where your users are most likely to land
  • Your users will often revert to while browsing your site

So it’s important to grab the users attention and quickly engage them with what they need , be that what your charity does or information about a condition such as cancer.

Let’s continue looking at Macmillans website, the first thing you see is a big  image/video ( known as the Hero section in the trade ! i.e. to web developers ). With the message ‘Whatever cancer throws your way, we’re right there with you‘. this communicates what charity does very effectively and engages the website user.

You’ll see this pattern repeated on many websites and especially charity websites. Because its a place to grab your users attention and engage them. Macmillan have used a video to communicate alot of information quickly, hospital admissions and visits, diagnosis, fund raising, support …

Looking at another example this time https://www.nordoff-robbins.org.uk/  they have opted to use a Hero image instead of a video. What could be more evocative than changing a child’s life through music therapy.

hero image

Let’s continue looking at Macmillans homepage as we scroll down it.

The page is setup in series of rows, this allows the page to be easily ‘scannable’ for the user. A user can quickly scroll up and down and pick out what they what (notice how the rows don’t overload users with information and there is plenty of ‘white space’ ).

Just below the hero video/image you’ll see a section that allows users to take their direction / journey to the things that are most relevant to them based on the type of user.

  • Service user ( information and support for/on cancer )
  • Supporter   ( get involved, eg fundraise etc )

How macmillan uses UX to signpost users

Then on the next row there’s how to get in touch with a grey background on the ’tile’ they’ve used. You’ll often see this background colour change on the different rows as its another aid to enable the easy scanning of the page for the user.

Notice how as you scroll down and navigate around the Donate call to actions (CTAs), are there but relatively subtle ( compared to some charity websites ). The aim of the site is to engage the users and give them important and useful information. Not to force a donate button on them 20 times in one page. Engage not pester.

Header

Many of the big charities follow this pattern for the header, as an example here’s the header from the Red Cross website

  • Logo left clear
  • Uncluttered menu
  • Search
  • Donate button (right, uses highlight colour to draw attention to)

Looking at the header below, we see the logo left, donate and search to the right. The main menu is clear and uncluttered with the most important links. This header is repeated across the site for consistency, the colours and fonts, font sizes etc are also repeated right across the site. This is good design and branding, which is repeated right across all Red Cross communications with the public both online and offline in print.

If your charity doesn’t have a Brand guidelines document, it’s well worth investing (or doing it yourself) in this to help you communicate with consistency to your audience.

header and navigation from the Red Cross website

Navigation

Use simple navigation, don’t overload the user ( multi-layered if needed ),  most website searches (e.g. WordPress ) are pretty good and can be further configured with search plugins if needed.

Here’s another example this time from Macmillans website, a tad more cluttered as they use a double top menu ( to add extra information such as login link).

 

macmillan header example

Footer

The footer is the bottom of the page, it a common to put this in a different colour to the body of your page ( keep in mind your brand/style guide to style this in a way consistent with your brand).

These are the things it’s common to see in the footer ( and often the first place your users will look for them,  if they haven’t found them already)

  • Contact details
  • Social links
  • Sitemap
  • Jobs

It’s also a good place to put things that are important such as company / charity number, details and logos of regulators and so on (these help to build trust).charity web page footer example

 

 

Ways to engage your users

Allowing your users to tell their story or the story of a loved one. A feature on many sites is

  • Volunteer stories
  • Memorials  ( memories of people that have passed away )

Another added benefit of this is your crowdsourcing content, you audience are creating engaging content for you ( and it will also benefit your SEO ). Here’s an example from Star and Garter website.

example memorial section on a charity website

 

Preparing this article I found myself reading about Peter below, seemed like a great guy fondly remembered by his family. Just example of engaging content thats user focused.

 

 

Here’s a screenshot of Oxfam’s website of an Emergency worker telling  their story, it’s interesting and engaging and shows some of the kind of work that Oxfam does that will appeal to their supporters.

 

 

Content for Service users, family and friends

Content for service users, this is focused on the area your charity operates in. For example in the case Macmillan this is details of signs, symptoms, treatments of cancer.

Draw up a content strategy – you don’t need to do it all at once, make a plan for adding content every week or month or so ( but do it consistently, which will benefit your SEO – Search Engine Optimisation as well as creating important content for the service user ).

content strategy for charities

Donation forms that engage

I won’t go into donation forms in detail in this article, but visualising how a donation might help people. Can help donors see how their money might be invested by your charity. Here’s an example from the British Red Cross.

donate form showing how a donation might help service users

 

 

 

Fundraising – Get your supporters involved

Here’s section from the Macmillan website that allows supporters to find something they could get involved in and ‘Be part of the team’.

fundraising on your charity website

 

Charity Digital Strategy

A word on overall digital strategy, its best to be consistent across all channels with your designs, having a brand guidelines document will help. When your developing content for your site ( ideally using an ongoing content strategy ), promote this on other digital channels like social ( twitter etc ) and your email newsletter. You might be creating great content, but without telling people about it your relying purely on SEO.

When you’re running a fundraising campaigns ( possibly on your website or another platform such as JustGiving, another use these other channels to promote it).

 

The End

As you can see all of this takes thought planning and preparation, at the start we talked about what you’re trying to achieve (your goals) and those of your users.

Once you know this you can start to think about strategy and then onto building ( user journeys , sitemaps, wireframes, design and so on ).

In follow up article I’m going to talk more about the things you want your users todo once they are engaged things like Calls to Action such as , volunteer signup forms, donate forms and so on.

With anything like this, it’s an ongoing process (an evolution) – the big charities have digital teams ( it’s not fire and forget ). Its ongoing learning what works, revising, reworking, rebuilding. Also in a follow up article I’ll talk abit about how to see from tools like Google analytics whats engaging and working well. But here’s a google piece on measuring engagement until then htt ps://boagworld.com/marketing/measure-engagement/ .

 

References

I looked at a lot charity websites while writing this, and read a lot of great articles. I’ll mention a few here if you’re interested in further reading:

https://www.charityandbiscuits.com/blog/analysing-best-charity-websites-2018-look-top-100-uk-charity-sites/

https://madlinblog.wordpress.com/2019/03/12/charity-web-at-30/

https://www.granite5.com/insights/creating-a-successful-charity-website/

2 thoughts on “How to make a great Charity website”

Comments are closed.