Revamping Malaria No More UK's Website: A User-Centric Approach

The first step was to inspect the website's code base, understand its current state and pinpoint areas of improvement. Since we weren't facing a start from scratch, we needed to take a deep dive into the current site, inspect the code and learn our limitations beforehand. It was vital to understand what could be done. It was important not to propose features that couldn't be achieved within the framework, timeline, and budget constraints.

Beyond the UI/UX changes looking to provide a fresh and appealing look and feel to the MNM-UK institutional website, we identified a series of improvements in the code base to enhance the site’s performance. We recommended updating their server infrastructure to modernise it and reduce server costs.

The website already had a lot of content and a valid structure, so we didn't want to start from scratch. Instead, we made changes on top of the existing Drupal 7 framework, which was challenging because of its limitations and the amount of custom code developed by a previous vendor. We had to learn and discover where and how the custom code worked and understand the extent to which we could go with the redesign.

1. Highlight the Donation section

   The MNM-UK website serves two primary purposes: to educate the public about the issue of malaria and to collect donations for the NGO. During the redesign process, special attention was paid to the donation page and the entire donation process.

   Since Malaria No More UK relies on an external service to collect donations, our team was limited to the iframes provided by that service. However, we improved some of the elements we could control. The most significant change was placing the donation options at the top of the page, making them easily accessible to users. Additionally, we added a background colour to this section to increase visibility and improve readability.

   Moreover, we included extra text and information to enhance the user's understanding of the donation process and the impact their contribution can make.

   
2. Enhancing Accessibility

   Our goal was to improve website accessibility while staying true to the brand identity. To achieve this, we incorporated modern design elements that would appeal to the target audience without deviating too much from their familiarity with the website/brand.

   

   We reviewed and expanded the brand's colour scheme to include more contrasting and complementary colours that would enhance the overall appearance. We also optimised the typography, colour usage, whitespace, and responsiveness performance across various devices. By doing so, we created variation, accentuated hierarchies, and maintained a consistent brand identity that would make the website more accessible and user-friendly for all.

   
3. Improving Overall Navigation

   As part of the redesign, we focused on improving the user experience by adding movement and visual consistency. We widened the website to create more space for content, which not only reduces clutter but also improves readability. These changes have made the website more accessible and user-friendly for everyone. We were able to elevate the website’s navigation and make it easier for users to find the information they want.

   

   We also introduced background colours to different website sections to make specific content stand out and enhance the overall visual appeal. We focused on drawing users' attention to particular content or calls to action, such as donation buttons or important messages about malaria.

   
4. Migration to a Cloud-base server

   The development started with migrating the website and other MNM-owned websites from a physical server to a cloud-based server. Our chosen provider was Platformsh, based on their reliable support services, robust security protocols and competitive pricing.

Our team of developers was able to mitigate them with their knowledge of modern CSS, Drupal templating and Javascript or by coming up with creative alternatives.

• Streamlining navigation and optimising page loading speed contributed to a 20% increase in average session duration, indicating improved engagement with the site's content.
• By incorporating modern design elements and expanding the brand's colour palette, the website achieved enhanced accessibility (97 score in Lighthouse) without compromising its visual appeal.
• Increased donation page visits by 50%.