Sector(s)

Visit the site

Visit the site

Organizations Involved

Médecins Sans Frontières (MSF)/ Doctors without Borders are an international, independent medical humanitarian organization. Founded by journalists in 1971, it is now a global team of over 65,000 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 

About the project

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

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

Drupal 9 UI/UX overview

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.

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 crowdfunded 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

With a super-fast, responsive site that has a newly integrated donations platform, MSF is set up to maximize its ability to crowdfund its future and keep the world informed about its research and work.

Why Drupal was chosen

With a super-fast, responsive website and an integrated donations platform, MSF is now equipped to maximize crowdfunding potential and share its vital work globally - powered by Vardot’s Drupal expertise.

Technical Specifications

Drupal version: