They came to the table with two sites: the main MFT Charity site, but also a standalone Royal Manchester Children’s Hospital Charity (RMHC) site. They’d already recognised that focusing on attracting donations for individual hospitals was compromising their ability to leverage the full power of their brand. Having an effective acquisition portal and donor development/retention tool for a larger audience was something that they were eager to attain, so they needed a solution that helped them to step up to the challenge. They also needed the new website to retain the playful and bright feel of the RMCH website, as the majority of their donors came via RMCH. This would mean blending the playfulness of RMCH – seen in its green bear mascot – with the more corporate feel of MFTC.

Armed with the insights that the MFTC team gave us, we put together persona documents that drilled down to define their key audience, and the actions that they wanted each site-user to perform. A thorough SEO audit was carried out as well, as we needed to identify the best way to combine their two existing domains into one. Because we were in awe of the amazing work that the MFT charity provides, we were also more than happy to carry out part of their content migrations (from their old WordPress site and their Drupal site) free of charge as part of our department support time.   To make sure that we agreed on design plans that adhered to strict AA guidelines, we began with our usual AA accessibility contrast tests, and then carried out a full range of other accessibility tests too. As part of our processes, we ultimately decided to use tools like Wave and EqualWeb to combat accessibility errors. These allowed us to fix every error during the build stage. We also went one step further by installing a plugin called AccessiBe. We tried out various other plugins, but this was the one that leveraged advanced artificial intelligence to automatically make the resulting site more accessible to people with disabilities. It added a small widget to the site that could be used to select a profile for a specific disability (e.g. visually impaired, ADHD, seizure-prone, etc), enabling site controls that altered text sizing, contrast and more.   We chose SUDS – our proprietary CMS that’s based on WordPress technology – as the best solution for the task at hand as we knew that it would offer a lot of flexibility and future-proof value to MFTC. Using WordPress also made it easier to bake accessibility into the site design, ensuring that users encountered no barriers when accessing the information and using the features on the new website. We were particularly keen to make sure that users with sight issues had a great experience when using the new site, as so many of them offer unwavering support to Manchester Royal Eye Hospital (part of MFTC’s 10 hospital family!).

It’s worth noting that this was the first site we used GSAP on – an industry standard solution for high-performance animations. First, Lottie files were used to create a uniquely-branded loading animation, but then GSAP added movement to the site that revealed content as a user scrolled on a page. The MFTC team didn’t expect us to do this, but we really wanted to pull out all of the stops for them, and they were delighted with the result! We also utilised an Image Background Focus Position plugin to ensure that images were always centred on their key focal points (usually people’s faces) no matter what device was being used to view them.   Another priority of ours was to thoughtfully design the call-to-action messages. We wanted to promote the variety of reasons that potential donors might have for giving (e.g donating in memory, being a part of the MFTC lottery, and more) and cover each reason within our messaging. The balance between performance and design meant that a real collaboration between our design and development teams was needed, and they worked together brilliantly to ensure the best of both worlds.

Our SUDS framework allows MFTC users to create bespoke-looking pages themselves by customising the layout with the blocks that we build for them, making it easy to add the content in a format that they like. They can also choose which blocks they want to use on each page and in what order. On top of that, they can freely edit the colour of the background and text, the direction of the background slant, and more on each of their blocks.