Vimal Patel20/04/21

10 min read

20 Best Practice Tips for Charity Web Design

Dashes

With technology moving at an ever-increasing pace, typically most charity websites require a major overhaul, or complete redesign, every four to six years. But what best practices should you consider when starting to plan your next site?

1. Design for your primary users

A great starting point when it comes to charity web design is to take time to consider your site’s primary users and identify their future needs.

Charity website designed for multiple users

Designing a charity website is often particularly challenging, as you will usually have a wider diversity of users than most – each with their own needs. For example, many charities’ sites serve:

  • Beneficiaries
  • Volunteers
  • One-off donors
  • Regular donors
  • Staff
  • Trustees 
  • Plus other stakeholders

    The site should be sufficiently balanced to serve all of the above. Therefore, a useful exercise is to document website personas, giving you and others involved in the project a clear idea of who the website is for and what each of these personas needs from their experience.

    Depending on the time and resources you have available, you may also wish to go one further and undertake research with typical users, perhaps in the form of surveys, research groups or one-to-one interviews. However, be conscious that you will often be obtaining opinions from a very small proportion of your site’s total user base and therefore always balance qualitative feedback with historical data from your website (more on that below).

    Adopting a user-centric approach from the start will pay dividends in the long term and will certainly help to inform many aspects of the site’s design and functionality.

    2. Define your website’s objectives

    Charity website with defined objectives

    Once you’ve considered the diversity of stakeholders, it’s important to define what success looks like. For beneficiaries, the objective might simply be to ensure that relevant information is easy for them to find. Other objectives will be more measurable – for example, increasing the number of onsite donations and the average value of these.

    Wherever possible try to document your current site’s performance and then set key performance indicators (KPIs) for the new site. Having clearly defined objectives from the onset will help to ensure that your charity and your website design agency is focussed on creating a site which will meet the desired outcomes.

    3. Learn from your existing site…and from others

    Top UK charity websites

    There are tools at your disposal which can give you a great deal of insight into how users are interacting with your current site. For example, Google Analytics and Google Search Console can provide you with a wealth of information around how users find and interact with your website. This data can help you set the aforementioned KPIs, identify areas that need improvement, as well as highlighting high-performing aspects which should be preserved in the new site.

    As well as being introspective, study examples of as many other websites as possible, to find elements that you’d like to recreate. In particular, review some of the most popular UK charities’ websites for ideas and inspiration. They are more likely to have used a specialist agency and followed best practice, which you can then emulate on your new site.

    4. Pre-plan and manage expectations

    Website with happy beneficiaries

    Quite simply, don’t rush the planning process. There’s always the temptation to get moving quickly with images and copy but careful and considered planning is fundamental. It also minimises the risk of additional cost being incurred further down the line – reworking elements towards the end of a project can often cost time, money, or both.

    During the early planning phase, be realistic with yourself and your stakeholders about timescales and budgets. Digital projects invariably take longer than is initially expected and building in generous timescales alleviates unnecessary pressure.

    5. Website structure is integral to successful design

    Website structure

    A carefully planned structure is fundamental to any successful website build and should be part of the early planning phase. This is particularly the case for third sector organisations, where there is often a greater diversity of users to be considered.

    A practical way to begin planning a structure is to use a tool such as Microsoft Excel, to create a hierarchy chart which can map out where each of the key pages sit. As a general rule of thumb, no page should be more than three clicks away from the homepage, to ensure both users and search engines can easily find the content. Amongst other benefits, your chart will help you to ensure you’re sticking to this principle.

    6. Navigation enhances the user experience

    Navigation is intrinsically linked to site structure and therefore the two should be considered hand-in-hand. Put simply, navigation enables your users to find what they’re looking for quickly and easily. If they can, then search engines such as Google will also look favourably upon your site.

    Top menu site navigation

    With most websites, the majority of visitors arrive on pages other than the homepage, which makes navigation even more important. Some aspects to consider include:

    • Menu positioning – On a vast majority of websites the menu is situated horizontally, at the top of the page. As most visitors are used to this positioning, it’s advisable to also take this orthodox approach. More details on why this is generally better than a ‘hamburger menu’ can be found in this article.
    • Menu items – Be sparing with the number of menu items you have in this top navigation section. It’s generally recommended not to exceed seven, as this can become overwhelming for visitors and can also cause challenges with design and layout.
    • Menu dropdowns – There will usually be pages which are subordinates of the top navigation items and these should be easy to access. Dropdown menus facilitate this and so are highly recommended.
    • Logo / ‘Home’ link – This is usually positioned in the top left corner and it’s best to follow suit.
    • Breadcrumbs – These help to give both users and search engines an idea of where a page sits within the site’s hierarchy, as well as enabling quick access to ‘parent pages’.
    • Cross-content promotion – Signposting users to explore other relevant sections of the site, using graphical blocks or text links, stimulates ‘user flow’ and engagement.
    • Search feature – Whilst many users are happy to navigate using the aforementioned methods, a free text search function is often also beneficial.

    7. Colours and branding

    Naturally, your new website should comply with your brand guidelines. However, from a visual perspective it’s better to restrict the site’s colour palette to a maximum of three to four prominent colours. Accordingly, try to be sparing with the number of colours you choose to deploy from your guidelines.

    Far from looking dull, a reduced pallet will help photographs and other images to stand out on the page.

    8. Simplicity and consistency

    Simplicity and consistency

    Simplicity in charity website design is often underrated. An uncluttered, almost minimalist approach allows page elements to breathe and the compelling visuals to stand out even more.

    It’s equally important to think about visual hierarchy, so that visitors naturally gravitate towards what you consider to be the most important elements.

    Consistency is also key. Various parts of a website serve different purposes and therefore the layout of pages will vary. However, for an optimum user experience, try to minimise the number of different templates used. Designed carefully, these templates should help maintain a consistent look and feel across the site.

    9. Pictures really do tell a thousand words

    …and so we’ll keep it brief here. Suffice to say, great photography can work wonders for your new site. If you don’t feel your internal library has a sufficient number of high quality images it’s worth considering supplementing your own photos with stock images.

    Man carefully holding landmine

    It’s also worth bearing in mind that showing people in your imagery – and in particular faces – can have a very positive effect in terms of user experience.

    This Guardian article offers some great tips and ideas on how to use imagery to set a tonality for your site and appeal to your prospective supporters.

    10. The importance of the homepage

    Third sector website homepage

    All pages are equal, but some are more equal than others. The homepage usually requires particular thought and attention as it’s such a highly visited page. For some, it’s the first page they arrive on and, for many others, it’s the second page they view after landing elsewhere on the site.

    When designing the homepage, ensure that your organisation’s clear, compelling value proposition is stated early on – ideally within the top banner and above the fold (i.e. your users see it without the need to scroll down).

    The homepage should also link to some of the key sections in your site – helping users and search engines like Google to quickly find your primary content.

    11. Build credibility and trust

    It can be easy to forget that many users of your website may not be familiar with your organisation and the great work that you do. For example, some visitors could be a potential donor who has a friend or relative effected by the issues your charity supports, or perhaps a trust is learning more about you after a recent funding application you’ve made. Irrespective of the circumstances, it’s important to build credibility and trust with every visitor.

    The homepage and ‘About us’ page are two prime opportunities to demonstrate your outputs and give a clear, compelling reason why your charity merits support.

    Your design can help build trust by incorporating elements such as:

    • Key statistics, such as the number of people helped
    • Recognisable imagery, such as photos of celebrity supporters or logos of prominent corporate sponsors
    • Membership of fundraising associations
    • Testimonials from beneficiaries

    12. Adhere to accessibility and readability best practice

    Accessibility options on charity web design

    While many elements are down to choice, there are some fundamental aspects of charity website design which should always be adhered to, particularly with regards to accessibility guidelines.

    For the best user experience, it’s also important to keep the reader fully engaged. Try to use plain English, plus keep sentences and paragraphs relatively short. Also, break up blocks of copy by interspersing images, call-to-actions, examples of your work, or quotes.

    13. Visitor interactions

    Ensuring visitors can reach out to you in the most convenient and appropriate way is another aspect of charity web design best practice. Interaction takes many forms, including:

    • Contact form – Generally speaking this is the most standard form of contact via websites. As well as being GDPR compliant, the design of this form should be carefully considered, as it can heavily influence submission rates.
    • Live chat – This function is becoming increasingly popular but it’s important to firstly consider whether, operationally, it can be supported by the organisation (as users generally expect a quick response during office hours). From a layout perspective, the area that the box will occupy - often bottom left or right of the screen - needs to be factored in to the site’s overall design.
    • Community forums – Stakeholders such as beneficiaries can interact with others, sharing encouragement, experiences and knowledge. These forums often require a combination of human or automated moderation and this should be specified in the design brief.
    • Gated portals / member areas – These can sometimes almost become a ‘site within a site’.

    14. CTAs and conversion rates

      Donation call to action button on website

      You’ll often want users to take some form of action whilst visiting the site, including:

      • Contacting your support services
      • Making a one-off donation or committing to regular giving
      • Registering for an event
      • Signing up for your newsletter

      It’s therefore important to think carefully about call-to-actions (CTAs). These typically take the form of buttons, which may lead to a transactional page, or alternatively a form where the user provides more details.

      Try to ensure CTA buttons remain as consistent as possible, site-wide, in terms of their visual appearance and the wording they use. These should also be relatively prominent, perhaps being placed consistently in the site’s header and footer, as well as elsewhere.

      Conversion rate optimisation is an ongoing task for any website and it’s an important consideration from the onset of your new site’s design process, especially as plenty of other organisations are competing for mindshare and donations.

      15. Transactional elements and integrations

      Many third sector websites incorporate transactional elements such as shops, event booking systems and, of course, the ability to donate online, either through a generic or bespoke donation platform.

      Before you commit to a particular agency or platform for your website build, fully research the merits and costs of introducing newer transactional tools versus migrating your existing systems. As part of this process, consider how you might improve aspects such as the donation experience, by reading this study on donation usability.

      Charity website shop

      CRM integrations – with the likes of Salesforce, Microsoft Dynamics and Raiser’s Edge – are also commonplace and again it’s best to undertake due diligence in the early phase of design. 

      16. The need for speed

      As already acknowledged, user experience is paramount when it comes to great charity web design and part of this is ensuring pages load quickly. If they don’t, users become frustrated and leave.

      Some quick tips:

      • Try to use animated elements sparingly and compress images before uploading them, as otherwise they can unnecessarily slow your site down.
      • Benchmark your current site’s performance using a tool such as Google PageSpeed Insights and then set a clear objective of trying to improve upon this with the new version of the site.
      Fast loading website

      17. Ensure you’re mobile friendly

      Mobiles now account for half of all website traffic worldwide. Accordingly, users and search engines now expect the mobile experience of your site to be on par with the desktop experience. It’s therefore vital to carefully consider mobile from the onset.

      During the design phase, avoid making desktop elements too complicated, if there’s a suspicion that they won’t migrate well to a mobile or tablet device.

      18. The footer shouldn’t be an afterthought

      Footer of MAG International charity website

      As discussed in articles such as this one, the footer (i.e. the strip at the bottom of most sites) plays a more important role than you might otherwise think. Yes, it contains some of the dry stuff, such as your registered charity number and links to the legalities, but users will often interact with elements within it, such as social icons or navigation links.

      19. Design using a website platform that’s right for you

      There are a variety of platforms that your website can be built on – from various builders at the cheaper end of the scale, to more premium options, such as WordPress and Django. Choosing the right one for your organisation will certainly have a bearing on how successfully the site functions for your needs. Therefore, it’s best to be familiar with all of the options available to you.

      Django versus Wordpress websites

      It’s also worth evaluating in advance the flexibility of the content management system (CMS) that will be available to you after your website launches. The more versatility the better here, as this will enable you to add to your site and make design tweaks independently, without incurring additional developer costs.

      20. Ensure design aligns with SEO

      And so, to the final best practice point – and we’ve saved an important one until last. SEO (Search Engine Optimisation) is an expansive topic but, suffice to say, a well-designed site should always incorporate the fundamental elements that contribute to SEO success.

      It’s generally the case that what’s good for user experience (often referred to as ‘UX’) is also good for SEO. However, that doesn’t necessarily mean that a good website experience at face value incorporates all of the elements required for success in Google and the other search engines. Therefore, it’s highly recommended that the fundamentals of SEO are used as a checklist from the onset.

      Brain Tumour Charity website design

      Looking for someone to chat to about your new website?

      As you can see, there are a variety of aspects to consider when designing any new website and this is especially true in the third sector.

      We are one of the UK’s leading digital agencies for charities, not-for-profits and ethical organisations and so if you’re planning to redesign your website please contact us today, as we’d love to chat to you.