MSF Redesign

A new look for Médecins Sans Frontières


Médecins Sans Frontières (MSF) is the world’s leading independent organisation for medical humanitarian aid. There are 19 offices in multiple countries across the globe and more than 24000 MSF field staff are providing assistance those caught in various crisis around the world every day.

The previous MSF website was launched in early 2009 to a fixed width design tailored for desktop users. It wasn’t until 2014 that modifications were made, which enabled a fluid width and mobile friendly donation forms. Moving into 2015 MSF Australia decided it was the right time to shift gears and start rebuilding for launch in 2016.

The challenge of this project was to encompass design and development of the new website whilst working with their existing Drupal 7 CMS that was preconfigured with content types and taxonomies for content. Mobile first in terms of navigation design was the key vision in this Interface Design and Integration project.


Digital Garden worked very closely with the MSF Australia team to design and develop a very modern and professional looking website that is more accessible and user friendly than the previous MSF Australia website.

Development using the existing Drupal 7 CMS was mandated in the project due to a global initiative to move the majority of MSF websites to a common platform with the primary goal being to enable simpler content sharing. The existing MSF Drupal 7 codebase was made available to Digital Garden with preconfigured content types and taxonomies for content. This allowed Digital Garden to focus primarily on UX, design and frontend development with some adjustments to the backend to match the simplified information architecture.

In a nutshell the following is a simple set of macro tasks that were identified by MSF for Digital Garden to perform in this project:

  • Tweak information architecture to make it more accessible

  • Improve the current navigation to be more user friendly

  • Simplify the homepage to remove clutter and focus on the goals

  • Condense 1st level navigation in order to simplify the journey to the identified goals

  • Improve overall readability of content and increase call to action prominence


Constant communication and collaboration between Digital Garden and the MSF Australia team resulted in a well designed, truly modern, smooth flowing and mobile first website. Changes made to site’s information architecture meant that all content can now be easily accessed. In relation to the homepage navigation, the user’s journey has been condensed and simplified and as a result goals on the website are achieved more effortlessly than ever before.

View Prototype

Truly Modern & Mobile-First
Through constant communication and collaboration between Digital Garden and the MSF Australia team
Three mobile mockups of MSF website
MSF Styleguide driven approach
A Styleguide Driven Development Approach

By leveraging the power of Drupal modules like Paragraphs, Digital Garden has adopted a styleguide driven development approach, where we designed and implemented design components rather than pages.

This fully modular approach provided increased flexibility to the site managers allowing them to create tailored experiences on every page by leveraging components like image gallery, videos, pullout quotes, attachments and call-to-actions.

MSF Menu
Better Navigation Experience

By detaching the two main call to actions out of the navigation (donate, join our team) and implementing a visual hierarchy on the main navigation to add emphasis to the most important sections, we simplify the user’s journey and help them get to where they want to go.

We also implemented a navigational pattern that allows the user to have a brief overview of what each menu link is about just by hovering where they get presented with a short description, one of the major highlights in this improved navigation system.