MSF_logo.png

Doctors Without Borders

(Médecins Sans Frontières)

Medical Aid Where

It's Needed Most

Role

UX Design

UI/Visual Design

Web Design

Tools

Adobe XD

Adobe Illustrator

Médecins Sans Frontières/Doctors Without Borders (MSF) is a non-profit organization that provides mental, physical, and medical care to people all over the world who are affected by wars and natural disaster, giving victims the help they need and a means to tell their story.

 

Our goal was to re-design MSF’s UK desktop and mobile website with consideration of best practices in user experience and responsive design.

MSF_macbook.png

Creating A Seamless Design System

With prior UX research and documentation in mind, we started with creating a design system consisting of UI elements and modular components that could easily be implemented throughout the website. We took into account MSF’s online presence as a whole as well as the main target audiences of this organization.

DWB_Slide1.2020-02-21 15_02_27.gif
MSF Library - Buttons@2x.png
MSF Library - In-Line Donation@2x.png
MSF Library - Type@2x.png

As we continued to work on the design system, we also started working on re-designing the individual pages themselves. Our team collaborated with MSF UK’s content team to organize the overall user flow and provide the best user journey possible.

V5 -final.png

NOTE: Pages may be scrollable

Creating The Desktop Pages

To understand the vision and visual expectation of the MSF team, we first provided a few different options for one individual page, and moved forward from there.

 

Overall we worked on 10+ pages for the site and their corresponding pages i.e. the user journey throughout each page.

Homepage-AFTER@2x.png
Donate-AFTER@2x.png

Creating The Mobile Pages

Once the desktop pages were approved, our team moved on to creating the mobile versions. We focused first on designing for iPhone 6/7/8 sizes and moved on to iPhone X sizes all while keeping in constant communication with MSF’s development team to allow for any questions and or updates on both ends. 

MSF-Social_1920x1080_3_transparent.png
iPhone X-XS – 1@2x.png
Screen Shot 2019-10-10 at 1.23.20 PM.png
Screen Shot 2019-10-10 at 1.22.14 PM.png
Screen Shot 2019-10-10 at 1.19.12 PM.png

With a fully updated website, the hope is to provide an improved user experience and overall online presence for MSF UK. We want to help ensure their compelling stories and courageous acts reach people and empower them to support MSF in their life-changing work.