MSF (Medecins sans frontieres - Doctors without borders) are an international, independent, sanitary medical organization, providing help to people in urgent need, particularly after war riots, epidemic crisis, natural disasters or other extraordinary situations.

Having a continuous international presence and initiating multilateral sanitary action worldwide, MSF had rich yet very differentiated content. In order to display this content in an interesting and direct way, there was no other way than a completely new website.

We dedicated eight weeks for a comprehensive study of the information architecture. Having analyzed a suitable structure model for the content, we were able to start the wireframing stage. Wireframes helped us interconnect all kinds of content types and entities of the website. We took full advantage of Drupal 7 and its new features. The fact that all entities come with fields helped us to create all the interconnections through references.

The website’s design was mainly inspired by a poster that MSF were using at the time. Our goal was to create a human-centered image for the website so as for the visitor to feel close to the cause. The rich photographic material was of great importance in this direction.

Greys and blacks, as a base, were our choices to match the bright reds and yellows that contrasted harmonically with the clear white background. We used yellow for every type of content associated with a mission. Red was for urgent calls and actions.

The entire content from the previous website was stored in a Joomla environment and we had to validate all the data before importing them in Drupal 7. Before the actual migration process, we selected the necessary fields, wrote our own migration code, associated all the data with the corresponding properties of Drupal entities. In order to import all the data, we had to repeat the process a few times. As a first step, we cleared out all the HTML elements and only left the basic formatting elements such as p, strong, img etc. Then we linked the paths of photo content to the new file structure and the 301 redirects were created as well from the old URLs to the new ones. Lastly, the entire content was associated to the new terms and vocabularies.

Some of the strong points and advantages of the new website are the interactive map with all the missions and volunteers on mission displayed on, the library, containing all the printed material that MSF had ever published and the timeline with the milestones and highlights of MSF’s action.

On the interactive map, the visitor immediately gets the feeling of the international action of the organization. Technologically speaking, the map was edited with OpenLayers and exposed filters which are able to filter results depending on the mission or action. We chose to work with OpenLayers and exposed filters because of the aesthetic match that they offered to the rest of the design through their custom options. The main reason though, was their 2-clause BSD License, FreeBSD.

The large amount of publications, published in MSF’s effort to incentivise the publics was entirely integrated on the digital library after being categorized and tagged depending on the mission, the type, the language etc. We displayed every publication by using the javascript player of issuu.com, which offers a virtual browsing experience to the user.

There is no better way for storytelling than a timeline. Using jQuery and CSS, we found an interesting way to present the MSF milestones since 1971, using a clean UI.

Overall, the fact that the client was very clear about their requests and needs from the beginning was enormously helpful in our effort to focus more on the concept, the design and the development. Requirements being met, the whole project kept us busy for 5 months. We exclusively worked with SCRUM methods, delivering segments of the website every 10 days.

Why Drupal was chosen: 

Drupal was chosen because of its wide variety of contributed modules and community support

Organizations involved: 
Modules/Themes/Distributions
Key modules/theme/distribution used: 
Why these modules/theme/distribution were chosen: 

-