Not-for-profit organisations and charities are not always known for their outstanding UX, or indeed great design, when it comes to their websites.
This can be problematic, particularly when vying for monetary donations, but also when attempting to present information and advice in a clear, concise and useful way.
Organisations in the charity sector need to make it as easy as possible to donate or join a cause – ideally in a few clicks – if they are to be in with a chance of obtaining valuable contributions and signups. Long-winded payment forms, re-entering data and difficulty finding key information are just some of the things that will make supporters look elsewhere.
With this in mind, I’ve compiled a short list of seven stand-out not-for-profit websites which I think set the bar high from a UX perspective.
(If you’re interested in learning more about UX, check out our ‘Usability and UX in Successful Web Design‘ training course here.)
Childline
Childline provides 24/7 free, confidential advice to under 19s in the UK. Its official website contains a wealth of information using copy, imagery and interactive elements that are tailored to children, including games, quizzes, message boards and details about how to find support.
My favourite homepage feature is the interactive ‘How are you Feeling’ module below. A child can choose their mood from a series of colourful buttons, and the content will update depending on their selection. If they’re feeling good, the copy will direct them to various fun activities, games and the ‘good days message board’, and if they’re feeling bad, it will direct them to methods of support and information about why they might be feeling that way. This simple interactive task is the first step for users to determine what help they need if they are not comfortable or able to contact Childline directly on the phone.
For children who find it easier to digest information visually, there are a number of videos available on the Childline website which can be found on topic pages, or through the toolbox on the main navigation bar. They cover everything from bullying to eating disorders, as well as what to expect when you contact their helpline. Dividing complex and often sensitive themes into bitesize videos supports better accessibility and engagement for those visiting the site who may find lots of copy boring or difficult to process.
Battersea
London-based animal shelter Battersea dedicates its resources to rescuing and rehoming dogs and cats, in addition to offering advice on how to care for them once adopted.
The most noticeable feature of the Battersea website is its clean and minimalist layout, which places emphasis on the brightly coloured buttons at the top right and in the centre of the hero banner. As with organisations like the Samaritans, they appear to place equal importance on both donations and facilitating their charitable services. The photography is cleverly directed so that the animals draw the eye towards the focal copy and call-to-action.
Finding an animal was a very straightforward process thanks to the optional filters on the left hand side of the screen. I could refine my search by age, gender and breed, as well as their ability to live with other pets. The results updated accordingly, displaying a cute headshot of each animal alongside its name, age and shelter location.
Clicking on one of the results brings up another well-spaced, simple page with a few choice images of the animal, a comprehensible table summarising key information, and a short biography describing their temperament and traits.
The social sharing buttons are a nice touch, encouraging visitors to increase online exposure for both the organisation and the individual animal. Overall, the Battersea website provided pleasant browsing – similar to an engaging ecommerce experience, except with cats and dogs!
Parkinson’s UK
Parkinson’s UK aims to “drive better care, treatments and quality of life” for those suffering with Parkinson’s disease.
Its website homepage prompts the user to select one of three options to indicate their current situation (recently diagnosed, living with Parkinson’s or carer/family member), directing them to the most relevant topics, advice and resources for that individual. This is a great alternative to using the header menu, which is more useful for finding out about specific subjects if you have one in mind.
Each of these three options takes you to a tailored landing page, which are well designed and feature plenty of padding and white space to break up the number of topics covered.
It is pleasing to see informative copy without a seeing a wall of text. Instead the basics are covered, including a call-to-action within each section inviting the user to explore points of interest in greater detail. The mixture of videos, downloadable content and drop-down FAQs makes these landing pages varied and interesting without being overwhelming.
My favourite function on the site is ‘find support near you’, embedded on most major landing pages.
Typing in a city or postcode in the search bar prompts this handy interactive chart, where users can select from a multitude of activities related to their interests. You can choose from nine activity areas and then narrow down your search to more specific events if you’re looking for something in particular.
Once your chosen activities are selected, a map appears with a list of events in the nearby area, organised by category via icons. It’s then really easy to find out more information including dates, contact and payment details from here. Parkinson’s UK have ensured that people can find personalised support in their local area quickly, easily and accurately through the use of this effective tool.
Samaritans
Suicide prevention charity Samaritans puts ease of use at the forefront of its UX, with particular consideration for those seeking help, by using direct calls-to-action and succinct copy.
From the homepage, visitors can immediately acquire the Samaritans helpline number, which is placed noticeably in the centre, alongside a link to alternative contact methods. Having this information to hand when entering the site enables those in crisis to seek assistance in the shortest possible amount of time.
Clicking through, further contact details are displayed in a concise way, with little additional copy; allowing the user to make a clear decision (particularly if they are in distress) without being bombarded with information.
Scrolling down, if the user requires more information, a simple content box outlines the brief benefits and disadvantages of each contact method, enabling users to choose the best option and next steps according to their current situation.
When looking to make a donation, the large ‘donate’ button on the site header is very easy to spot. This opens to a spacious page with a straightforward form, from which a donor can select a monetary amount and donation frequency. There’s also a useful chart underneath the form which provides more information about the services the donation can support in various denominational increments.
CoppaFeel!
CoppaFeel is a UK-based breast cancer charity that aims to increase awareness amongst young people about the signs and causes of breast cancer, offering advice and guidance on how to check for those signs.
One of the stand-out features of their website is their use of optimistic humour when approaching such a sensitive and serious topic. This is conveyed through light-hearted photos of fundraising activities, and conversational copy, as well as play-on words such as ‘the brazette’ (their newsletter), and ‘boob-brellas’ which are available from their online store.
The organisation places particular importance on regular breast checking, offering a ‘text reminder’ service, which you can sign up for directly from the website homepage, where you can also donate.
The reminder application form was short, with only a few fields to fill in, and within moments I’d received a text from ‘Boob HQ’ confirming my sign up. Taking just a couple of seconds to sign up to receive convenient monthly reminders straight to my phone definitely seems worth it, especially if you’re prone to forgetfulness like me!
The advice pages feature clear instructions, all of which are sectioned into blocks with engaging, contemporary illustrations to demonstrate each point. In fact, these illustrations are featured in many places throughout CoppaFeel’s website and social channels, adding to the charity’s cheerful tone of voice. CoppaFeel even released a selection of limited edition t-shirts for International Women’s day including some of the best featured artwork.
HeForShe
Global organisation HeForShe invites “men and people of all genders to stand in solidarity with women to create a bold, visible and united force for gender equality”.
Their website has incredibly simple menus, with just three options and not a dropdown in sight. Instead, key information about the organisation and its aims is displayed mostly on the homepage, which visitors can explore at their own pace.
This content includes the latest campaign news, images of advocates (including plenty of celebrities) and social content such as a selection of recent tweets containing the #HeForShe hashtag. I particularly like the live counts of commitments, social media conversations and events, and the interactive map which ranks ‘commitment leaders’ by country.
Focusing predominantly on global social sharing and discussion allows supporters to spread awareness of the cause in a matter of seconds, with no financial commitment required if they are not yet ready to donate.
Indeed, there’s no donation button on the main navigation. In its place, and scattered multiple times throughout the site’s main pages, is the call-to-action ‘I COMMIT’. This offers a tangible way of backing the campaign by signing a virtual pledge, again without financial obligation. HeForShe has made it as easy as possible to sign, capturing minimal data from those who decide to commit (and opening opportunities to acquire donations later on). It’s as simple as entering your name and email address, or connecting to one of your social profiles, and therefore feels relatively unintrusive from a personal data point of view.
It took me a while to find out how to actively donate to the organisation, which was quite refreshing as I felt less pressured to do so than with most other not-for-profit websites. However, this may be a UX pain point for those with the sole intention to do so because it was tucked away inside the footer.
Born Free
Born Free is an international charity working with wild animals to ensure they are treated ethically and released from captivity.
The overall design of its website is striking and memorable, with bold fonts and beautiful high resolution photography. The colourful buttons at the top of the page (adopt, donate, shop, subscribe) stand out from the black and white background and persuade visitors to click and find out more about the organisation.
Below the stunning hero image is a series of spotlight issues. At the time of writing, these are stories about lion cubs being kept as exotic pets in urban France, and a campaign to make the UK ‘elephant free’ by releasing those kept in zoos across the nation into the wild. Informative videos are included in each of these sections, explaining the causes, consequences and remedies to the issues raised. These videos become full screen overlays when selected, meaning users do not lose their place on the homepage once they’ve finished watching.
A practical feature on the Born Free website is their newsletter sign up form which can be found on almost every page. This is great for capturing spur-of-the-moment signups from visitors without having to go through the hassle of actively searching for the form from an entirely different part of the site.
‘Where we work’ is one noteworthy section I’d like to mention here. Each country is listed neatly in alphabetical order (alongside their respective flags) and, when clicked on, provide succinct snippets of information about the animals the charity assists there, and why. There are certainly some regions on the list that I would never have expected to be on there, and the visual layout helps to emphasise the global work that the charity does.
