ULTIMATE GUIDE TO WEBSITE DESIGN FOR CHARITIES

Ultimate Guide To Website Design For Charities

This guide is written by Dan Holt. Dan has been involved in digital marketing since 2009, since which time he and his agency, Boss Digital:

  • Have managed over 300 campaigns, including many in the charity market
  • Been featured in many of the world’s largest digital marketing blogs and magazines, including Moz, HubSpot and Search Engine Journal
  • Dan also runs a weekly podcast on BossToBoss.org, where he interviews the world’s leading sales and marketing experts, including many from the legal industry, on a variety of topics from content marketing to PPC.
Dan Holt
Dan Holt – Managing Director

As with any organisation, a charity’s website is their primary digital asset. The home of all their content and place through which their various audiences and stakeholders can engage.

Despite that, for every charity website that is carefully considered, beautifully designed and robustly developed, there are 10 that are rushed, poorly thought through or constructed in isolation from their broader brand and digital strategy.

This guide exists to ensure you are one of the exceptions!

Market Research

One of the most common mistakes that charities make with their website is that they approach it as an isolated project. This is the single greatest investment you can make in your brand’s digital presence, and it demands that you have a deep and thorough understanding of the market landscape.

We separate this into the following categories:

  • The charity itself – the first step is to ensure that we fully understand the organisation. Who are the people within it? What are their shared values and beliefs? What’s the long term vision of the charity and does it have any shorter term objectives? What are the main assets and strengths at the disposal of the organisation, but equally what are the potential points of vulnerability? And finally, from a marketing perspective we need to e clear on the resources available, both in terms of budget but also people and skills. After all, there’s no point setting ambitious targets or planning creative marketing strategies that are beyond the resources of the charity.
  • The audience – typically for most charities this will be split into a number of different stakeholder groups, and even within those there may be a variety of distinct personas. For example, if your charity is targeting people with heart disease, it’s likely that one of those groups will be those suffering from chronic obesity but you may also be targeting people with hereditary heart problems. Furthermore you may have a separate campaign for young people so that they can be better educated in diet and nutrition from an early age. Each of these personas are within just one stakeholder group – the end user, or consumer. We also have other stakeholder groups, such as the pharmaceutical brands with whom you need to build close relationships, and various experts who may engage with your brand in providing thought leadership material. Each of these groups will be driven by different motivators, fears and hopes. Each will have a different level of understanding about the subject. And each will be looking for a different outcome. It’s therefore essential that we fully map these paths out before planning the website UX so that we can ensure the navigation, page structure and messaging will support that ideal journey.
  • The competition – the most successful charities are those that behave like commercial organisations, and part of that involves keeping a close eye on your competition. This is particularly important when it comes to large scale website projects, as you need to understand what “good” looks like for your market. For example, imagine you need a donation section on your site, but you have different audiences or different options you wish to offer. If you’re in a busy space, it’s highly unlikely that you’re the first charity to face this challenge, so it would be madness not to learn from those who have come before you. Even if you can’t find an exact replica of what you’re trying to achieve, there will always be lessons to be learnt from your other charities even if they’re in slightly different markets, particularly the really big players. This competitor analysis will also help you build a picture of your market in terms of brand positioning. Look at the top 20 results for the major keywords in your market. Which charities are ranking and how are they positioning their proposition? It will help you to understand where the market is saturated and where there are gaps, ready for you to plug! It will also help at a more tactical level – how are these other charities generating traffic to their website? Are they investing heavily in new website content or SEO? Do they have a compelling data hook scattered throughout the site so they can turn their traffic into an engaged database?
  • The broader picture – in addition to the current trends of your audience and competition, we also need to cast our view a little further afield. For example, are there new regulations coming into effect that might change how charities like yours will need to operate? Are there government initiatives that might increase funding or exposure towards the relevant issues? Is a development in technology on the horizon that has the potential to disrupt the way that you’re able to solve the problems your charity exists to address? These are big questions and the implications for your website could be profound. A website should ideally endure for at least 4 to 5 years, so if you’re not considering all the moving parts then it’s likely whatever you create today will soon find itself out of date and no longer fit for purpose.

Once all the intel is gathered, we should now be in a position to plan the website, which falls under the following headings:

  • Website UX, for both desktop and mobile
  • The visual identity and design
  • Key sales messaging
  • SEO
  • Security

SEO For Charity Sites

Charities are at one major advantage online – that’s in terms of their SEO.

You see Google’s entire mission is to deliver the highest quality content from the most trusted brands, and if there’s one thing charities have by the bucket load, it’s trust.

In the real world, trust is of course an abstract, subjective concept, but within the realms of SEO it’s rather more concrete. You see Google, as with the other major search engines, uses very particular signals to establish the trustworthiness, or authority, of a brand. And at the top of that list of signals is the links that point into the domain. Most corporate organisations struggle to acquire links organically, and therefore have to invest in digital PR and other forms of aggressive link solicitation. But not charities. Charities naturally attract huge volumes of links from around the web, and often from government websites and other trusted sources.

All this means that when it comes to ranking for big trophy terms, thereby generating tonnes of targeted traffic, charity websites are at a BIG advantage.

However, that doesn’t mean we can afford to be complacent. On the contrary, we need to ensure that we are satisfying all the criteria that any commercial entity would be. After all, that’s invariably who we’re competing with!

We can break down the individual components of a great charity SEO campaign into the following:

  • Traditional on-page factors – these are the essentials that haven’t changed in 20 years. The title tags, the URLs, the headers and image alt tags. All of these are clear signals to Google that a page has a degree of relevance to the target keyword groups in question. These are relatively quick and easy things to get right and will determine the value you extract from everything that follows, so there is absolutely no excuse for failing to get them right!
  • Broad relevance – it’s one thing to satisfy the basics, but we must remember that for every keyword group we will be up against tens, if not hundreds of competitors each aggressively targeting the same words. Therefore, simply having them with the URLs, title tags and alt tags is unlikely to be sufficient. Instead we need to show a bit of empathy and try to see things from the point of view of our user – when they make a particular query, what is it that they’re hoping to encounter within the results? For example, if it’s a charity that helps people with a particularly rare form of cancer, then what is someone hoping to find when they make a query relating to that condition? Are they hoping to find details of the disease itself? Are they hoping to find expert guidance on treatment? Are they hoping to find inspirational stories from people just like them who have battled and beaten the condition? Are they hoping to find related resources packed with rich information that they can share with their families? The better able our web page is to answer these concerns, questions and expectations, the greater the likelihood we will rank for the terminology in question. It also broadens the range of search queries we can be found for – we refer to this in SEO as the “long tail”.
  • Technical SEO – the final component for a charity to consider is the technical health of the site. Much like a car that seems to be running fine but has a problem deep within the engine that’s slowly getting worse, technical SEO is not always easy to identify, and requires a robust and comprehensive audit to be conducted on all aspects of the site’s performance. From site speed to crawling issues and image compression to security vulnerabilities, there’s a long list of potential weaknesses that could undermine the brand in the eyes of Google.
  • Internal linking – we mentioned earlier the importance of gaining links from other domains and how charities can be at a huge advantage in this regard, but internal linking can be just as impactful. For example, if a charity has a particular page it wishes to rank more prominently, there’s no faster way of boosting its position within the search engines than by grabbing a bunch of links to it from other related pages. This is an easy win for any charity SEO campaign that’s so often overlooked.

User Experience

As with any UX, we need to begin by developing a deep understanding of each of the target personas:

  • Who are they?
  • What’s motivating them when they arrive on the website? Is it a certain desired outcome? Is it a particular product or service we can offer? Is it a knowledge gap they’re seeking to fill?
  • What’s the ideal outcome of their visit?
  • What key messages will likely resonate with them?
  • How well informed are they on the subject matter?

We also need to keep in mind certain universal principles of great UX:

  • Intuition over creativity – it doesn’t matter how unique you believe your proposition or vision, or how distinctive you believe your features and benefits, when people arrive on your charity’s website, you need to keep things predictable. That means standardising the navigation in accordance with their expectations (so home on the far left, then about, then onto products/services (or other ways you can help), then onto knowledge/insight, and finally onto the contact page).
  • Create a clear visual hierarchy – important messages and calls to action should be laminated to just 3 or 4 per page, otherwise the experience becomes overwhelming and confusing. The most important calls to action should be highlighted visually using striking iconography and contrasting colour combinations.
  • Conduct user testing – user testing doesn’t have to be complicated. At the extreme end of the spectrum there are agencies that specialise in sending a demo site test traffic from the target audience in order to ascertain how those users will engage with the content, messaging and UX. For website builds of 4 or 5 figures this can be difficult to justify, but in truth most of the big conclusions can be drawn at a much smaller scale. Even getting your employees and partners to test the journey will teach you most of the key lessons. Or create a nucleus of users that align with your priority persona and incentivise them somehow to follow the journey via an array of devices and browsers.
  • Prioritise accessibility – an often neglected aspect of the UX, even by charities whose job it is to improve the lives of the marginalised, is that of accessibility. How will those with visual impairment use the site, for example?
  • Less is more – this is actually rather a complicated one as there are some very real benefits from a search engine perspective of packing your key landing pages with masses of rich information (more on that later), but for the most part, we need to keep things clear and lean. For those pages where lots of detail is important, we just need to ensure that the priority messages are nice and visually high up the page (ideally above the fold) and that where possible we use tabulation to ensure the experience is not overwhelming.
  • Be careful with typography – there is a temptation with typography to prioritise style over substance, but we need to remember that words are there to be seen. So by all means use something that you believe captures your brand visually for your headers, but when it comes to body copy you should be thinking only about legibility. This typically means large, open counters and clear strokes. There are always debates about serif vs sans serif but in truth either can be fine. The other consideration is colour – black copy on white background is always the most legible, so again, by all means mix it up with your large header copy, but never with your small body copy.

UX for mobile

As you are no doubt aware, what represents a great user experience on a desktop is radically different to that which represents a great experience on mobile.

It is not so much about being “mobile first”, but simply about recognising that these are two different journeys and while there needs to be consistency in messaging, there needs to be clear separation in terms of navigation and structure.

The main principles that a charity must adhere to for world class user experience are as follows:

  1. The user must be able to navigate the site with just their thumb – this is a very particular but crucial way to think about the mobile experience – most users on mobile will be browsing with just one hand, which means they are holding the phone with 4 fingers and navigating with just their thumb. And their thumb will be restricted to the bottom half of the screen. This means that anything requiring multiple digits or clicking on the top half of the screen, is almost certainly a terrible experience.
  2. Keep buttons big – the accuracy of your big fat thumbs is nowhere near a match for the pixel sharp cursor on your desktop, so we need to give people a bit of wiggle room. In particular, buttons and other calls to action should be kept as large as possible so that people don’t accidentally click on the wrong options.
  3. Reduce steps – this is a sensible rule within all website design, but becomes even more important within a mobile context, for several reasons – people may not have great signal and they are likely to be multi-tasking, which combine to mean that the simplicity and duration of the experience becomes even more important. With each additional step we inject one more opportunity for things to go wrong.
  4. Telephone numbers should be linked – really simple but so important. If you have a telephone number on the site, one click should enable the user to dial it immediately.
  5. Hide clutter – while we want to minimise the messaging, that doesn’t mean we want to get rid of it entirely. After all, we need that content for driving traffic from the search engines, and should a mobile user wish to dig into a bit more detail, it’s important we’re able to give it to them. However, what we don’t want is for it to be all immediately visible. Instead we should make intelligent use of javascript to place secondary content behind tabs, buttons and dropdowns, so that it’s all on the same URL (important for both SEO and UX, as it means it appears almost immediately rather than a new URL having to load), but doesn’t overwhelm the initial user impression.
  6. Ensure a clear visual hierarchy – again, this is a fundamental principle that could be said of any web page, but its implications are greatly heightened within the context of mobile. It’s likely you’re going to have a range of important messages to communicate to your user, particularly when your audience is comprised of multiple personas. For this reason, if we’re going to allow for each of these user paths whilst maintaining clarity and simplicity, we need to ensure the top 1 or 2 messages for each persona are brought to the fore visually, ideally as close to the top of the page as possible, to minimise scrolling. If this feels too difficult, it’s a sign that your website is attempting to be too many things to too many people.

Brand Messaging For Your Charity Website

Simply conforming to best practice SEO and UX is far from sufficient in nailing your website build. After all, it’s reasonable to assume that the majority of your serious competitors will either have already or will eventually also do these things. So in order to establish and maintain a meaningful competitive edge, we have to go a step further and develop core brand messaging that’s able to cut through the noise and really land with your priority stakeholders.

This process of constructing a brand identity able to communicate the key pillars of your charity’s brand identity, fall under the following headings:

  • Your vision – when the charity was first established, it was done so to solve a particular problem. Something that was big enough to capture the imaginations of all those involved in the founding of the charity. In the day to day running of matters, it can be easy to lose sight of this large, overarching aim, but that’s ultimately what will inspire interest and action among your various target personas. For a diabetes charity it may be to make diabetes a thing of the past. For a technology based charity, it may be to bring the internet to disadvantaged communities. Crystallising this message is the first step towards constructing a world class brand for your organisation.
  • Your charity values – no matter how compelling your vision, if the culture within the charity isn’t right or you’re not recruiting the right type of people, you’re going to have an uphill struggle. Typically charity values will be between about 5 and 10 in number (any more and they become diluted and difficult to recall, thereby entirely defeating the objective). Just as important as the values themselves are the mechanisms for embedding the values, and of course one of those mechanisms is via your various digital assets, chiefly your website. Whether they are scattered throughout the key landing pages of the website, or contained to one dedicated page, it’s a great opportunity for communicating the culture of the charity to all parts of your audience.
  • Your tone of voice – when a charity is small it tends to have a consistent tone and personality, but as the organisation grows the language can become disjointed. The wording and tone used by one person on the charity’s Twitter page could be a mile away from that used on the website itself. This inconsistency is hugely problematic as most user journeys for charities involve a series of touchpoints across different times and channels. Therefore, defining your tone of voice in terms of words and phrases to use vs not use, or the manner in which you communicate (succinct vs verbose, friendly vs direct, etc) is so important if you’re to build a sense of familiarity throughout that journey.
  • Your value proposition – it’s easy as a charity to forget that you are, ultimately, there to request something from your audience. This is why the most successful charities tend to operate much like commercial operations. It’s therefore so important that we define the key emotional and rational drivers for each persona and build a value proposition around them, supported by a clear USP and source of credibility.

Security

Of course one of the most important aspects of your web build project is ensuring security. This is not only critical for the charity itself, but also provides reassurance to all who engage with the organisation.

The big security considerations fall under the following categories:

  • SSL certification – it could not be more important to have the site hosted securely, which means the site absolutely must be https.
  • Keep the CMS up to date – people often ask if open source CMS’s like Wordpress, Drupal or Joomla are secure. The answer is – it depends. If the sites are well built and the CMS is regularly updated then you won’t have a problem. If, however, you allow the various plug-ins to become out of date then you will soon have a whole host of vulnerabilities.
  • Backup your site – one of the greatest fears for any charity (or at least it should be!) is that someone messes with the CMS and brings the whole thing crashing down. These things happen – it’s a part of our digital existence nowadays – and assuming you have regular back-ups (at least once a day) then the damage caused is limited. However, if you don’t have a system in place for these back-ups then the implications can be catastrophic. Don’t take any chances.
  • Change your login URL – if you’re using Wordpress (and similar things occur with other popular Content Management Systems) then by default your login page will either be /wp-admin or /wp-login.php, so needless to say that these are exactly what a hacker will look for when trying to break into your site. By changing the login URL they will almost certainly lose interest and move onto a more vulnerable site.
  • Administration – no matter how much sophisticated software you buy or how many smart systems you set up, your greatest threat to the website’s security is human error. Whether it’s using “admin” for their password or leaving their laptop unattended whilst they’re logged in, these are invariably the leading sources of website vulnerability. There is no perfect solution to this, but thorough education of cyber essentials throughout the organisation is a crucial starting point.
version="