A Drupal Based Donation and Information Platform for Humanitarian Causes

Optimizing Doctors Without Borders' (MSF) capacity to raise donations and keep the world informed about its ongoing research

MSF Case Study header image

Médecins Sans Frontières (MSF)/ Doctors Without Borders is an international, independent medical humanitarian organization. Founded by journalists in 1971, it is now a global team of over 65,000 members dedicated to delivering medical care where it is needed most. As well as supplying humanitarian medical work, MSF produces important research on vulnerable communities to assist with driving positive change in how specific diseases are treated.

 

Challenge and Solution

In terms of overall technology and solutions, these were less than optimal. The old MSF CMS was built on Drupal 7, so was nearing the end of its lifespan. In addition, the site was hosted on a non-Drupal compliant server which led to performance degradation over time.

The site itself had areas that needed improvement such as the inability of the editorial team to update content or create pages without needing developer help. The donation system was also separate, very specialized, and not easy to update. Finally, the UX/UI needed to be more responsive and more on-page SEO made possible.

Vardot was initially awarded a support and maintenance contract for the old site in 2018. After providing excellent service, we were given the go-ahead to do a full site audit. We found that MSF needed a responsive, multilingual site with an integrated donations platform to further its funding potential, marketing efforts, and knowledge sharing objectives. The audit outcomes led to this project which covered:

  • Hosting and content migration
  • UX/UI redesign
  • Integration of donations platform
  • Rebuild of a new site on Drupal 9 

61%

Increase in Unique Pageviews

12.36%

Increase in Time on Page

82.23%

Increase in Page Value

Key Functionality

  • A fully customized native Drupal donation system was integrated into the CMS, with multi-currency support to maximize the ease of potential donations.
  • State of the art editorial tools, Layout Builder for easy drag and drop page creation by any non-technical team member.
  • Content from the old site was mapped to the Information Architecture and migrated entirely with a simple RSS feed.
  • Upgrades to cloud hosting for top-level ISO security compliance and to Drupal 9 for CMS longevity.
Intuitive UX/UI preview for MSF Drupal 9 website

Intuitive UX/UI

The old MSF site needed a UX/UI revamp. The donations platform was not integrated and the site was not intuitive for admins or users. In addition, it was not optimized for mobile-first.

Vardot reworked the UX to remove technology silos and streamline the user experience for front and back-end users. In redoing the Information Architecture, the content structure was organized to be able to be dynamically populated into the site’s breadcrumb navigation. This also enhanced the site’s SEO capabilities by improving the relevance of indexing and increasing the likelihood of being matched to the correct searches. Key UX improvements included:

  • Clearly categorized and intuitive content structure
  • Enhanced indexing for Google bot crawls
  • Clear website visitor paths

The overall look and feel were updated to reflect a contemporary and efficient organization. In line with this concept, UI design implementation uniformity was ensured with an Atomic design approach. Base elements were initially defined. Consistency was then catered to up to content template levels. This ensured that the site would have a holistic look and feel, even if multiple team members were updating content simultaneously. Key design enhancements were:

  • Mobile-first UX design
  • Atomic approach for consistent look and feel

Custom Landing Pages

The MSF site was designed and built to feature multiple landing pages with dynamic content, so each audience type could be catered to uniquely. This creates improved user experiences from the get-go, as each segment will see content that is more relevant to them specifically. The impact on reduced bounce rates and long-term engagement for custom landing pages is well documented and worth catering for better user experience and optimized campaigns.

Advanced Search

Critical for great user experience is advanced and accurate search capabilities. The Vardot team implemented Solr, a super-fast enterprise search platform that provides advanced full-text search. This means that even phrases and misspelled searches would be correctly matched. 

Solr is built on open-source Apache Zookeeper, making it highly scalable and capable of handling high volumes of traffic. An additional feature is the ability to be customized by access levels. This allowed the MSF site to have a members-only directory search. Members can search for additional information such as non-public user profiles. 

Simple but effective editor capabilities mean that the MSF team can easily update the tool’s parameters themselves.

Integrated Donations Platform

Previously, the donations platform was a separate, custom code set up that was difficult to manage as it needed more niche technical skills to modify anything. The MSF had little control or oversight over the most important tool for their ongoing funding. 

Vardot decided to integrate the donations platform into the CMS to streamline the donation process and give the MSF team more autonomy. A custom, integrated donation platform was built with the Drupal commerce module as a base. This enabled the MSF team to create donation pages themselves and have an exportable database of their donors.

In addition, the donations could be funded in an expanded number of currencies, extending the number of potential payments.

User Centric Administration

The MSF team was supplied with a new customized administrator back end that could be managed with no technical expertise. By using Drupal’s Layout Builder with its easy-to-use drag and drop functionality, content administrators were empowered to design their own pages based on custom templates. Administrators can add or customize pages, manage search functionality and update donation details.

Translations

Easy and accurate translations are super important for multilingual site management. The MSF website is available in Arabic and English, so Vardot supplied the team with Layout Builder translation functionality. This tool allowed for easy, identical updates to content in either language without breaking any page templates. 

 

Hosting

The old site was hosted on a non Drupal compatible platform. This had led to slow load times and general performance degradation over time. Once Vardot was awarded the project, we decided to upgrade to OVHcloud hosting that would ensure improved performance, and high security compliance certificates such as ISO 27001, PCI-DSS, and HIPAA. Essential for a site handling financial transactions.

The Results

Vardot helped the Médecins Sans Frontières (MSF) organization to optimize its capacity to raise donations and keep the world informed about its research and activities by developing a superfast, responsive website with a new integrated donations platform.