Success Stories | A Critical Drupal Transformation For Doctors Without Borders

Optimizing UI, UX, Editorial Experience, and Performance for Doctors Without Borders’ Website

Doctors Without Borders or Médecins Sans Frontières (popularly known as MSF) cares for people affected by conflict, disease outbreaks, natural and human-made disasters, and exclusion from healthcare in more than 70 countries worldwide.

Given the incredible scale of the vital health care they provide, they also experience a high volume of website traffic.

With almost 2 million sessions per year, Doctors Without Borders US’s old Drupal 8 website wasn’t able to engage users. The user experience (frontend and editorial) wasn’t optimized either.

We began with a clear plan to redesign the website in incremental Sprints—and then, the unexpected. Thirteen Sprints in, the Russia-Ukraine conflict began. And that’s when Doctors Without Borders’ role would become instrumental in providing immediate medical aid to the victims of the war. We were prepared to help Doctors Without Borders provide their life-saving care when it was most needed.

As Axelerant and Blue State worked together to deliver an improved user experience, we helped Doctors Without Borders break a record. Mobile-optimized UX and information architecture, modular content blocks, and improved cross-navigation boosted visits and donations exponentially.

Doctors Without Borders website received over $40 million in the year 2022 through this platform to help Ukraine.

About the Customer

Doctors Without Borders, an international, independent medical humanitarian organization was established in 1971 in Paris by a group of 300 journalists and doctors. Today, they are a global movement of more than 63,000 people from more than 160 countries.

Their US office staff of 231 people supports the association’s services through staff recruitment, fundraising, communications, awareness campaigns, and advocacy.

The organization includes health professionals, logistic and administrative professionals who are bound by a common charter. This charter spells out the terms of assistance, neutrality, impartiality, risks and dangers of the mission, and the compensation by the association.

They’ve been instrumental in saving lives the world over during wars and conflicts, big and small.

12.6
Million Outpatient Consultations
1M
Patients Admitted
72
Countries

The Challenge

The Doctors Without Borders website plays a vital role in MSF's fundraising in the United States. But as we dug into the data, we found that more than 86% of these visitors had never been to the MSF website before.

There were four challenges that Doctors Without Borders needed to resolve:

Unclear Navigation and Visual Structure

The navigation of the website wasn’t intuitive. It repeated the same structure and content blocks on a majority of pages. There were too many details on the site navigation which failed to provide what the end user required.
Unresponsive and Unintuitive Design Elements

The website's frontend design was dated, and not crafted for access on all devices and interfaces. Also, every content type/template on the website had a generic design that failed to create an impact. Because of the unintuitive design, there was low engagement even when the visitor traffic was exceptional.
Limited Editorial Options

The same templates and content blocks for every page on the site made it impossible to publish information in an easy way. More flexibility was needed to create a variety of content to engage users.
Launch at a High-Transaction Time

This challenge came on at a later stage in the project. The new improved website needed to be launched right on the day the Russian incursion into Ukraine began.

The Solution

Going Agile
As opposed to a traditional waterfall methodology, we worked over a year through a series of sprints with the Doctors Without Borders team. This approach minimized the burden of Doctors Without Borders’ stakeholders. We tailored the plan around availability and unexpected conflicts to enable them to participate in the process.
Aiming at Brand Stickiness for Mobile Users First
At a scale such as 2 million sessions per year, even incremental design and platform improvements to optimize design funnels could make a big difference. So, that is what we did. Instead of touching every template, form, and piece of content, we prioritized specific modules, navigation changes, and high-yield experiences.

We delivered a mix of website strategy, UX and UI design, development, analytics, and maintenance. This is how we did it:

New, interactive content blocks which portray what the organization does
Redesigned templates that the editor can work flexibly with
Restructured site navigation (header and footer)
Responsive design for all mobile devices and tablets
Regular design reviews on the new look and user experience of the website
Complete SEO review and consequent SEO fixes

The Result

The customer believed that the new site experience is data-driven and dramatically improved for mobile and first-time traffic. The new website presents impactful information that is easy to consume.

This increased the number of users that proceeded to the donation form by a whopping 54%. The association was able to raise more than $40 million for Ukraine’s medical aid in the year 2022 alone.

Underpinning the success of the updated UX is the technical reliability of the code delivered by Axelerant. Typically the weeks following a major update can be spent rooting out performance issues that only reveal themselves under stress of the public release.

Not only did the site perform well on day one of the major releases in March, it did so under a massive influx of traffic following the Ukraine invasion.

In addition to the high volume of traffic, fundraising in the context of a geopolitical crisis can draw the attention of bad actors. Attempted hacks and DDOS attacks quickly found their way to MSF’s new site.

After launch, Blue State worked closely with MSF, as well as Pantheon and CDN providers on security approaches to keep the new website up and funding Doctors Without Borders' critical mission.

54% Increase in Traffic to Donation Form

The improvements in the website helped convert the massive inflow of visitors into donors. It increased internal traffic to the donation form by 54%.

Rising to Help Ukraine with $40M+

Launching the new website helped Doctors Without Borders set fundraising records during their response to Ukraine. They were able to raise more than $40 million online in the year 2022 alone to support the medical response in Ukraine.

This endeavor ensured Doctors Without Borders was able to rise to the support of Ukraine.

Critical Content with Real Impact

The modular features of the newly-revamped CMS allowed the customer to quickly create new organic content to describe their impact in Ukraine and the needs of their patients.

These flexible components helped Doctors Without Borders increase its content output helping to meet the content needs of audiences at a critical moment.

Customized Solutioning & Management
Well-Timed Launch
Continuous Support & Maintenance
Revamped Editorial Experience
Upgrade to Drupal 9

Customized Solutioning & Management

Together with Doctors Without Borders and our agency partner, Blue State, we decided to take an incremental design approach. Blue State focused on building consensus around strategy and creatives with the client and we kept track of the backlog.

To improve the frontend as well as the backend experience, teams from Doctors Without Borders, Blue State, and Axelerant collaborated extensively across time zones.

We also proactively proposed solutions to keep the development team working at full efficiency even when Doctors Without Borders was less available to participate.

This approach helped ensure that the UX and UI update was on schedule.

customized-solutioning-for-msf-axelerant

Well-Timed Launch

As we approached the launch, the Russia-Ukraine conflict began. This required rapid response from Doctors Without Borders.
Doctors Without Borders were confident that we could launch and boost the donation response to the crisis right away.

The reason was the trust in our continuous delivery process. It ensures that the gaps, if any, are bridged along the way before we’re ready to launch.

This is why Blue State, Axelerant, and Doctors Without Borders were sure of the stability of the build and the benefits that were to come if we launched the website.

And so, together, we made the call to move forward with the launch. The impact of this decision was huge.

Continuous Support & Maintenance

To achieve the desired results, we integrated the site with multiple databases which host various official UN Human Rights documents:

For taxonomy, hosting physical files
For retrieving the files from the UN's Official Document System (ODS)
For taxonomy and feeding content dynamically from other systems

There were some enhancements requested to the design which were slated for the second phase, for a timely release to raise funds for Ukraine.

We are planning to start the second phase which will be focused on remaining features, outstanding issues, CMS cleanup, and technical audit items.

continuous-support-maintenance-msf-axelerant

Revamped Editorial Experience

We introduced new components in the CMS to provide more options for editors to add interactive elements that engage end-users:

Transformed template and design for each content type to make it modern and intuitive
New responsive templates, even for non-standard resolutions, so that the site looks and functions well on any device
A host of new user-friendly pages like the “News & Stories” page and “Events Listing” page which had a rudimentary design in the old website
Removal of old fields for better clarity for editors.
A comprehensive guide for content editors to help train them to make the best use of the CMS

revamped-editorial-experience-msf-axelerant

Upgrade to Drupal 9

The next crucial milestone for Doctors Without Borders was a Drupal 9 upgrade. The platform had been created during the early days of Drupal 8. The repository went as far back as 2018. A lot has changed in five years, for e.g., deprecated contrib modules, compatibility of the custom code with PHP 8, deprecated third-party components (Solr Search API), and so on.

We started working on upgrading the website from D8 to the latest version of D9, along with the PHP 8 upgrade. We launched successfully in May 2023. This launch was expected and proved to be crucial in terms of security and overall project performance.

Creating a Deeper Impact Together

Having contributed to aid Ukraine during the crisis, there is more that Doctors Without Borders intends to achieve. We’re working on creating complex backend features that will allow Doctors Without Borders to make a deeper impact via their platform. Some of the most anticipated features they’re looking to launch are UX enhancement of the event listing page and a brand new story feature.

A Critical Drupal Transformation For Doctors Without Borders