Menu
Help for Heroes (H4H) is a British charity which provides lifelong recovery support to service personnel who have been wounded or injured in the line of duty, and to their families. They have a lot of information about their various events and fundraising activities on their website, but also want to encourage their visitors to make a donation and sign up for their regular newsletter. They also provide support to veterans and families via the site, and signpost to other organisations such as The Samaritans and The NHS.
When deciding how to structure the new website for H4H, we needed to consider that each user group accessing the site would have a different reason for visiting, and be looking for a different piece of information to to complete a different action. We therefore needed to map out the various personas and user journeys during the Discovery and Planning stage of the project to ensure that each one was smooth and without impediment.
By focussing on these detailed and specific user journeys, we could ensure that the site contained no unnecessary content, that users couldn’t get lost or distracted, and that they could find what they wanted quickly and easily.
H4H have two main user groups which were divided into the ‘Give Support’ and ‘Get Support’ sections – these are effective as they’re clear imperatives that give users an immediate direction to take from the homepage of the site. There are then clear pathways to the goals for each of these groups from within their sub-section – either to donate or support a campaign, or to find and access support.
We were lucky enough to be able to support H4H with the creative direction for their coverage of the 2018 Winter Paralympic games, which was held in Pyeongchang, South Korea.
The designs took inspiration from the themes of pride and patriotism, with the stripes hinting at familiar sports brands and the colourway echoing the Union Jack flag. Finally, by putting the athlete front and centre, we were able to convey the skill, bravery and resilience of service personnel who have been wounded but are able to go on to compete at such a high level in their chosen sport.
As more and more people access websites on the go from their mobile phones, it’s vitally important to keep these users’ needs at the forefront when designing a new site. For H4H who have a high demographic of mobile visitors, this was doubly important – as the mobile view and interactions would be the most commonly used on the site, we had to make sure they’d make the right impression and funnel users effectively to their goals.
On mobile, there’s a balance to be struck between user experience and site speed, as sometimes large media files can cause issues for search rankings. We had to think carefully about which elements to include, which to simplify and which to remove at the various screen sizes to ensure that a high level of performance was still being achieved no matter what device was being used.
The new H4H website needed to showcase their recent corporate rebrand, which gave the site a much more clean and modern look than it’s predecessor. The colours in their palette are bold and inspirational, which gave us a good steer on how to lay out the designs and draw attention to the most important sections.
One of the ways the H4H encourage engagement with their work is through ‘Challenges’ – physical feats undertaken in support of the charity which happen globally. Prospective challengers need to be able to easily locate a challenge they’d like to get involved with, so this page needed to make that process as simple as possible.
To ensure that users could quickly find the challenge that inspired them to participate, we included visual category filters at the top of the page alongside date and region. We also provided the ability to sort events by newest first, as well as by start/end date, as some users like to complete a challenge in a particular month in order to honour a friend or relative.
Donations are a vital part of the funding model of any charity, and H4H is no exception to this as they rely on the generous donations from members of the public to continue to do their good work. The donate page, and specifically the donation form, was of vital importance to the new design, as it needed to be clean and efficient in order to not lose users during the donation process.
The form dynamically switches between one-off and monthly donations to keep things clear for users, and the large suggested donation boxes are effective at getting minimum donations increased as they provide information on what the donation could be spent on which makes the act of giving more real and tangible.
The progress bar along the top of the form provides a clear idea of the user’s progress through the form, and hopefully prevents form fatigue and dropout.
We add new projects to our portfolio as we finish them, so check back regularly to see what we’ve been working on.