Médecins Sans FrontièresMultiphase Project

Your digital thought partners.

CASE STUDY

LAUNCH PORTAL

Overview

Introduction

Discovery

Data Analysis

User Interface(UI) Design

Results

Phase 2

00.

01.

02.

03.

04.

05.

00.Introduction

Digital Garden were approached by Medecins Sans Frontieres to build a mobile first, responsive website, based on the existing MSF International Drupal 7 CMS platform.

The Medecins Sans Frontieres current site was in need of an overhaul with core issues surrounding confusing information architecture, the use of confusing industry jargon, irrelevant content, fixed width design and a homepage that was built to please internal stakeholder groups rather than the end user.

The main aim of the project was to create a responsive, user centered designs with a focus on stories to showcase on the ground experiences and make use of exceptional photography and video content. Phase 2 would be reviewing the neglected and clunky donations process.

Digital Garden worked with the MSF team closely to identify existing pain points, create a content driven stories approach to engage, relate to and inspire users through a component driven design process which was compliant with global brand guidelines. This was achieved through a series of Discovery workshops, intensive data analysis and gaining a true understanding of the brands vision, values and people.

Page 03

Page 04

01.Discovery

A series of research activities and interactive workshops where we can understand more about the overarching business goals, target audiences and competitor landscape.

Through this process Digital Garden were able to gain a thorough understanding of the project goals and objectives, understand user personas through Persona development activities, prioritise content most relevant to the key audiences across Australia and New Zealand and distinguish main and secondary goals. Key tasks uncovered during this process were to ensure accessible information architecture, improve navigation mechanics, produce a goal focused homepage, enhance content readability and call to action prominence all while driving users to become potential donors.

Page 05

02.Data Analysis

As the previous MSF website was built solely on assumptions it was important that we gained a clear understanding of what visitors want.

The key goal was to inspire MSF users to support MSF through Fundraising and Recruitment of engaged and motivated staff. Through extensive analysis of statistical data our team were able to uncover date guided decisions that became clear during this analysis phase.

Data showed that majority of users were searching for Recruitment information and stories for inspiration. Donations information was a close second, with another core group of users looking to learn more about who MSF is, what they stand for and wanting to find a source of High-relevance and High quality news & information. This formed the basis of our Stories first approach. While often full of impressive stats, stats and institutional updates has made MSF sound super-human and patients become numbers. First person stories provide a window into in-field realities in a way that everyone can relate to and inspire people to support. Of the people who read first person stories from our field workers on the international blog website and clicked through to msf.org.au, 71% went straight to our recruitment information

The first step: a high fidelity, interactive prototype that maps all the key interaction elements and pages based on the research and findings from the workshops. The new homepage aimed to be simpler and bolder, focusing mostly in getting users to donate, join the team, read stories and subscribe. The structure of the site allowed site managers to be able to prioritise emergency response aid and have full content management flexibility to adjust as and when unexpected events occur. This was a theme carried throughout the website including the Stories & News section of the MSF website, which includes articles of inspiring stories to the latest news from around the world and in Australia.

The decision to utilise component driven design was based on a widely known approach by Steven Hay “ We’re not designing pages, we’re designing systems of components”. We wanted to create a seamless implementation of the MSF brand from using a bottom up strategy with inspired Atomic Design principles that are Content independent and supported by Drupal core paragraphs feature.

Starting with the brand guidelines and building out from there with a focus on web safe and accessibility standards we then moved to implementing Master styles defining typesets, colour palettes, typography and grid systems. Definition of components were broken down into simple and complex components which then allowed us to create unique page layouts that intuitively produced consistent and on brand designs.

Page 06

03. User Interface (UI) Design

Initial discovery and data analysis phases allowed the Digital Garden team to produce A component driven design process based on a high fidelity prototype as source of truth.

05. Results

Based on some before and after usability tests as well as data collected from analytics we can gain some insights on the success of this project.

Usability Testing - Before

Only 61% of respondents to the usability test could successfully find the pages they were asked to. The rest failed or gave up.

Usability testing testing results - After

Some of the critical feedback that was uncovered in initial research included; navigation too difficult to user, scroll and hover states confusing, commenting options on articles, menu headings too small to read, felt lack of personality/human touch.

• 91% of participants were able to successfully find all of the pages they were asked to in the usability test. This is a significant improvement on the 61% result from the old website

• Stories From Our Patients & Staff receives more traffic than News From Our Projects on average, and visitors spend more time reading these articles on average than all other types of article

• Validated the hypothesis that first person stories are more engaging than operational news updates

The new website was found easier to navigate, without presenting too much information. Users felt it was thoughtfully designed and very clear and intuitive.

• Overall metrics results:• 36% increase in visitors• 52% increase in revenue• 41% increase in number of donations• 7,68% increase in average donation amount• 3,28% increase in donation conversion rate

Page 07

Page 08

06. Phase 2

MSF relies on donations to support Doctors without borders program and help those in need. The existing donation platform was an inflexible iframe form embedded onto the MSF website. This allowed for no customisation and created a clunky donation experience. MSF wanted to enhance the donation form in order to increase trust through better design and experience for its donors. The form also needed to achieve key backend processes and integrate with the chosen payment gateway provider, IP payments (Bambora).

The Digital Garden UX team produced an interactive prototype and implementation of component based design. The decision to use component-based design was due to an existing website and style guide and the nature of the forms which could be built in 1, 2 or 3 step versions. The new donation form was built to allow easy management and creation of donation forms, alleviate pressure on customer service teams and increase overall conversions allowing donors to process real time donations across multiple payment options.

The new donation forms provide an intuitive and seamless customer experience. The donation experience is informed with clear step labels, predictive google address API and field input. The new donation process focuses on removing any effort for potential donors and has resulted in great feedback from both internal team and existing donors.

Due to the great success of the main website redesign, MSF engaged Digital Garden to enhance the dated and inflexible donations platform.

Enhanced customer experience

Get in touch.

Your digital thought partners.