Médecins sans fontières

Chris Davies-Anipole
7 min readMar 13, 2020

--

A Donation revolution

Summary

MSF are a team of doctors that provide medical aid wherever it is needed the most around the world. They stay independent, neutral and impartial. they have all of their funding from individuals, around the world that want to support their good causes.

MSF is designed in a way that allows them to respond quickly to disasters, and try to help the people in greatest need. MSF also speak out, raise awareness and create debate about crises happening around the world.

Human connections are at the heart of what MSF does, and collectively they help millions of people every single year.

As donations are relied upon so heavily, MSF felt that some improvement could be made to enhance the experience of making a donation to MSF. As we have a close relationship with MSF UK and have assisted them on multiple areas of their charity, we saw this as a great way to assist their fantastic work and see if we can help to encourage donors to give generously and easily.

MSF do fantastic work, in aid, in areas of crisis, their response is incredible, and their doctors work hard around the clock to help those in need. Generally whenever there is need for additional support, MSF sees spikes in their donors, especially those who make one off donations. When the donor arrives at the site, they are usually reacting quickly and want a very easy and smooth process to give what they want without too many obstacles.

MSF have compelling imagery which they also like to showcase, this helps to connect the donor to the causes they are assisting with. There is room for improvement on the flow of their form, to make it easier, and quicker to get the vital information needed from the donor.

This is generally also a good opportunity for MSF to also show some messaging around the reasons why their help if turned into a regular donation can enable MSF to work more effectively.

Our role:

To prototype, test, and develop a new process, from the moment when the user clicks on the donate button — right up until when they successfully submit their information and make a donation.

Key deliverables: a number of deliverables were required for this process.

  • Research and insight and findings concerning competitors, user types and their behaviours
  • Information architecture
  • Make design and usability recommendations for improvement
  • Product sketches
  • digital wireframes (low)
  • High fidelity mockups
  • Clickable prototype of the designs
  • Final presentation to the client

Results: the new design of the donation funnel provides users with the ability to:

Very quickly and easily see compelling imagery connected to the fantastic work that MSF does

Remove ambiguity around navigation

Easily gain insight into what amounts of money provide for MSF to help the user to decide how much to donate

Provide a dynamic environment in order to keep the pages fresh and current

Make improvements to the payment methods available, including GooglePay and ApplePay.

Use the latest technology via PayPal to ensure the user fills out minimal information to speed up donation process

Incorporate the latest address finder functionality to help to eliminate errors

Improve visibility of the trust and security badges to ensure the user that the site is safe and secure

Improve visibility of opting into gift-aid if the donor meets the eligibility criteria

Improve the flow (more linear) of the form which coincides with the natural movements of the eye

Allow the steps in the form to be clickable, to make it easier for the user to go back a step if necessary, without losing information

Increase visibility of the social media connections

Introduction and design of a sticky header to not only remind the user of how much they are donating during the registration, but also give them the option to modify the amount they want to donate at any time, should they wish to do so with minimal interruption.

Add the option to donate on behalf of a company, group, school or organisation.

Give users the option at every step of the form to change their single donation to a regular and more stable donation.

Design process

What is the landscape out there?

We looked at other charities that have similar causes and looked at what they are doing, some of the places we looked at were: Unicef, MSF Australia, MSF Canada, & Battersea dogs home.

Together in a feature prioritisation session, we discussed elements of the current site which we like and is doing well. and other sites which we liked, and best practice which we could ensure we include in the redesign to keep in line with technology advancements.

examples of sites where we discussed elements and their benefits on the new design

We also looked at the rest of the journey for the form and elements what we also wanted to include

more inspiration from other funnels
example of how we incorporated a design into our own redesign

User types and behaviours.

We have already some insight into who the typical donor is for MSF and based on this, we were able to bare them in mind at all times, in order to ensure that we were keeping them at the centre of any design decisions we made.

Supporters: educated, intelligent and adventurous. Confident adults who love to travel and to experience life as well as reading about it. They are also highly web literate.

Charity appeals often leave them cold; mainstream charity branded PR and fundraising can be received with hostility. Those who sign up to MSF do so partly because they see it as an informed choice. and partly because they see the opportunity to make a difference. They see MSF as distinct, almost superior to other similar charities and admire MSF’s front-line, professional, uncompromising, and direct approach.

MSF users believe it is important to feature real people and show the impact of the work MSF and their doctors do.

Design studio

Following feature prioritisation, we conducted a design studio with MSF representatives to co-create with us, and see what possible solutions we could explore.

Design studios are a great way to bring together ideas, and explore possible solutions together that fulfil the needs for the business as well as the needs of the users.

We individually after discussing components that are very necessary to include in the funnel, other elements, which would be nice to have (feature prioritisation). We also explored other funnels and discussed elements of those and how they work. We looked at interactions, impact messaging, imagery/photography.

After spending some time putting ideas together, and presenting/sharing them back to the group, we collectively took the elements that we like from all of the designs and created a design together. Everybody had the opportunity to input on the elements, and the format of the new form.

Example sketches that came out from the design studio that we used to further develop wireframes

This really valuable session as it allowed us to bring our clients’ ideas directly into the design whilst simultaneously ensuring that our clients were onboard with the direction that we were moving in with UX considerations. This gave them more ownership on the process and allowed any unforeseen issues to be resolved immediately.

We also discussed some further possibilities to consider and thoughts about micro interactions and where we could include those into the user journey to help increase engagement.

We concluded the session with two routes and possible solutions, to allow greater flexibility, and not limit ourselves. We wanted to proceed with a higher fidelity once upping the fidelity to see what it looks like before finalising the final route we would proceed with.

how the design developed

Visual Design

MSF already has a strong and recognisable brand book with guidelines, however, we wanted to introduce a fresh look and feel whilst keeping within the remits of the brand they already have.

Taking this into consideration, we produced a higher fidelity of the two versions, through discussion a chosen route was prioritised and some tweaks to the flow to include all necessary options and take out anything not necessary.

The focus around this high fidelity design was:

Strong visual indications of all CTA’s

Clear and simple language to allow the user to make decisions which are unambiguous

Introduce strong and compelling imagery to the process to remind the donor of the impact they are making by proceeding with the donation

Clearly indicate to the user how many steps there are in the form and where they are in the process

Responsive designs

Once we were happy with the desktop designs, these were also adapted and tested for both tablet and mobile views to ensure that all key elements are reflected on the smaller screen with just as much impact.

iPad (responsive) version of the design

--

--

Chris Davies-Anipole

Product Designer @ The LEGO Group. Architectural photographer, Travel Fanatic