24 May 2023
Websites
15 min read

Rating the digital fundraising experiences of the UK’s top 5 charities

Charli

Charli

Marketing Manager

Giving to charity is increasingly a digital-first experience. In-person fundraising and events will always have their place, but digital donations make up a growing share of income. During the pandemic, the number of online donations (perhaps unsurprisingly) grew by 115%. As newer generations are more socially conscious than their predecessors, it’s vital that charities consider how easy and enjoyable their digital experience is.

To get a bit more of a sense of the digital landscape of UK charities, we’ve conducted a brief audit of the UK’s top 5 charities (by popularity, according to YouGov) and their digital fundraising experiences, and given them a rating out of 5.

We’ve focused on key areas including; donation funnel optimisation, accessibility and usability.

 

1. Cancer Research

our verdict: ★★★☆☆

The donation funnel is fairly well optimised, and there is some good functionality around fundraising events, but the site in general could be a little more engaging visually.

What we liked

The donation call-to-action (CTA) is prioritised on the homepage with a widget in the header. The user is then guided through the donation process with a progress bar, and it doesn’t feel too cumbersome. They have also made monthly donations the default option, increasing the likelihood users will proceed with this – research shows that recurring donors give up to 42% more per year than those who make one-off donations.

Bonus: Cancer Research have some good functionality around fundraising events and fundraising ideas – you’re able to use a variety of criteria to search for an event, and there’s also an “inspire me” section, which showcases popular and upcoming events. This section helps to keep a user engaged and on the site.

Cancer Research fundraising events search and listing functionality

Cancer Research’s events section organises and displays fundraising events in an intuitive way to keep users engaged.

What could be improved

The website experience in general is slightly short on impactful imagery and engaging visual content. Considering the significant impact that cancer has on so many of us, we felt they were missing an opportunity to tell the story of what they do visually. On the donations side, they could include the option for the user to cover processing fees. Our research suggests that 60% of donors will be willing to do so. Another quick fix would be to look at the formatting of text, some written content formats incorrect and overlaps other text.

Key takeaways

  • Showing progress through the steps of your donations process is helpful for the user and makes the process seem more streamlined.
  • Making monthly donations the default option can help increase revenue.
  • Impactful and engaging visual elements such as imagery, video and icons can help to lift your messaging and drive home the importance of your cause and the work you do.

 

2. British Heart Foundation

Our verdict: ★★★☆☆

The content and imagery around the website is fairly strong, but some clunky CTA design and the slightly confused flow of the donation funnel could be improved to make it a seamless experience for the user.

What we liked

BHF does a decent job of using imagery and other visual elements to make the site more engaging and the messaging more impactful. The inclusion of a personal story with accompanying photo in the donation funnel will help to encourage more users to give. They also support a wide range of payment options, offering maximum flexibility for the user.

British Heart Foundation donation block

British Heart Foundation’s embeddable donation component includes a personal story, encouraging more people to donate.

What could be improved

Dropdown functionality within the header CTAs which firstly takes a little while to load, is difficult / fiddly to use. They would be better to present the options within these drop-downs within the donation funnel itself. Additionally, the fact that these two CTAs are the same colour makes it visually busy and confusing for the user. They would be best to invert or use a different colour for whichever CTA is a priority. Within the donation funnel, the flow and the progress between the steps is a little confusing and doesn’t quite work correctly.

Key takeaways

  • Including a personal story to accompany the donation funnel around how your charity’s work has directly impacted someone will drive more people to donate.
  • If you are presenting multiple CTAs in a prominent position on your website, you should use colour to highlight the one which is priority, to offer options while guiding users in the direction you really want them to take.
  • Fiddly or confusing functionality could put users off immediately. You should carefully test and continually improve interactive elements of your website to ensure users aren’t dropping off unnecessarily.
  • Offering as many payment options as is practical, including Google and Apple Pay, offers as much flexibility as possible for the user, but do be mindful not to bombard them with too much to think about.

 

3. St John Ambulance

Our verdict: ★★★☆☆

There are quite a few positive elements about the website experience but some broken functionality on the homepage and a couple of missed opportunities in the donation funnel leaves room for improvement for St John Ambulance.

What we liked

The donation process is presented in three neat steps that aren’t too long or overwhelming for the user. They communicate the impact of donations well, showing messaging and accompanying imagery describing how each default amount could help.

Selecting donation amount on the SJA website

St John Ambulance do an effective job of showing how different donation amounts could help their cause.

What could be improved

There are some UX elements in the donation funnel that don’t work particularly well and lead to a bit of a disjointed and frustrating experience for the user. Firstly, the address finder dropdown functionality displays a list of addresses without the house number – so you have to play a bit of guessing game, or else manually count, where your address appears in the list. Moving on to the “keep in touch” section where consent is obtained for marketing comms – this is presented quite confusingly, as you have to select “Yes” for email, phone and text, but “No” for post. The tick boxes all appear in the same list so it would be really easy to miss the post tickbox if you wanted to opt out. There are also some elements which appear to be CTAs in the header section which don’t go anywhere.

Communication preference checkboxes on the SJA website

The way SJA present communication preferences is a little bit confusing for the user.

Key takeaways

  • Ensure every element in your donation funnel works as well as it should – any clunky or broken functionality could cause users to drop out.
  • Make sure that obtaining consent or giving the user the option to opt out is very clearly presented with no room for confusion.

 

4. Macmillan Cancer Support

Our verdict: ★★★☆☆

Like other charities in the top 5, Macmillan have missed the opportunity to make their content more visually-lead for maximum impact, and there are improvements to be made in the donations funnel. Overall, it’s acceptable.

What we liked

The donation funnel is presented in three neat steps and the user can see their progress. Macmillan are also collecting user details and comms consent before the payment stage, so that they will be able to contact and retarget the user if they don’t complete the process.

Macmillan donation steps

Macmillan’s donation funnel shows three clear steps that guide the user through the process.

What could be improved

The “donate” landing page is quite text-heavy, and would benefit from being a bit more visually-lead. The powerful messaging is a little lost in the uninspiring design. From there, single and monthly donations are in two separate funnels – it’s a good idea to offer the user the opportunity to switch between the two options within one funnel. As you move through the donation funnel, the CTA text could be improved. It’s descriptive, but a user will naturally be looking for a button which says “Next” or “Continue”, so at first glance it’s a little unclear, particularly because it’s presented next to a “Back” button. While you want to provide the user with the functionality to go back, you really want to avoid making it that prominent. Additionally, over usage of their main brand colour green also hinders rather than helps the user as they are guided through the funnel – use of a contrasting or complementary colour would help to better highlight next steps and break up the process visually.

Macmillan donation landing page

Macmillan’s donation landing page is a little text heavy and not very visually striking to the user.

Key takeaways

  • Remember that even once a user is in the donation funnel, that doesn’t guarantee they’ll complete the process. Think about how they will move through the steps, making it as easy and clear as possible.
  • Think carefully about the balance between text and imagery or visual elements – particularly on pages when you’re pointing the user towards an important action. You don’t want the user to get lost in paragraphs of text.
  • Consider how to use colour on your website and in the donation funnel to guide users to the next desired action.

 

5. Marie Curie

Our verdict: ★★★★☆

We had a few picky points of improvement for Marie Curie which prevented us from giving them the big five. Overall, a good general and donation experience.

What we liked

Lots of visually engaging imagery makes the site appealing to look at and interact with, as well as telling the story of what they do. The eye-catching donation block is used throughout the site to provide multiple ways to guide users into the donation funnel, and they’ve combined some of the techniques we’ve described previously in this post – impactful imagery, providing detail about what a donation could help achieve, etc, to increase the likelihood of a donation. Marie Curie are also the only charity in the top 5 who are asking users if they want to cover processing fees.

Marie Curie cover processing fees tickbox

Marie Cure are asking users if they want to cover processing fees – a proven way to increase the impact of donations.

What could be improved

When you click “Donate” in the header, you are taken to a landing page where you have to click “Donate now” again to begin the process. This could be streamlined by taking you straight to the start of the donation process or to the donation block further down the page. As we’ve mentioned previously, it’s beneficial to collect user details and consent before payment, so you can retarget the user if they do not complete the process. Marie Curie are not collecting details until the payment stage, so lose the opportunity to do this. They are also not supporting Google or Apple Pay, limiting the flexibility for users.

Key takeaways

  • It’s beneficial to collect user details and consent before the payment stage, so you can contact them again even if they don’t complete the donation.
  • Having a flexible donation block which can be included within the page across the site gives you more opportunities to point users towards donating.

 

Accessibility

Ensuring a website or digital experience is accessible according to best practice and up-to-date guidelines is beneficial for any organisation – but it’s also a legal obligation for some non-profit organisations. Nevertheless, charities should aim to provide an accessible digital experience in order to ensure their digital products can be accessed by everyone.

Below we’ve compared the accessibility of the top 5’s websites based on two different frameworks: WAVE and Google Lighthouse.

Wave

Charity Errors Contrast Errors Alerts Features Structural Elements ARIA
Cancer Research 5 3 25 37 80 57
British Heart Foundation 59 16 46 32 118 1029
St John Ambulance 28 6 19 13 77 105
Macmillan 5 8 130 25 43 60
Marie Curie 3 6 8 91 46 243

 

  • Errors General errors detected such as a form field not having a label or a link containing no text.
  • Contrast errors – Number of instances where there is very low contrast between text and background colours, affecting legibility.
  • Alerts Non-critical errors that if addressed would generally improve experience – e.g. text which is a heading not having a corresponding heading tag.
  • Features The number of features on the website which have the correct accessible attributes.
  • Structural elements The number of elements that make up the core page.
  • ARIA Accessible Rich Internet Applications – a set of roles and attributes that define ways to make content and applications more accessible. This number indicates how many elements on the page have an associated ARIA tag.

 

Google Lighthouse

Google’s Lighthouse tool analyses the same elements as the WAVE tool but packages all of the findings together into one score out of 100 to give a slightly neater indication of a site’s performance against accessibility standards.

 

Charity Desktop Mobile
Cancer Research 100 100
British Heart Foundation 96 96
St John Ambulance 65 65
Macmillan 86 83
Macmillan 94 96

Accessibility summary

There are things to improve across the board for all of the sites, but the numbers would indicate that Cancer Research are the best performers, and St John Ambulance are trailing when it comes to accessibility. It’s no mean feat to stay up to date with accessibility standards whilst balancing content and look and feel, and you may not achieve a “perfect score”, but it’s good to aim for the 90s according to Google’s guidelines to provide a truly accessible experience.

 

Rounding up

Big or small, national or local, the digital CX is a vital channel for charities. Getting your digital giving experience right and maximising donations is an ongoing process that requires close monitoring and continual improvement.

Think there’s room for improvement in your charity’s website and donation experience? Get in touch and we can chat about how we might be able to help.

More insight: