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.

Microinteractions

 

Duration
Easing
Basic Animations
Animation Patterns

_________

Include:

Usage Guidelines
Tokens

Accessibility

 

WCAG Color Contrast Standards

Type and UI Element Sizing

Visual Communication

Captioning

Alternative representations of Sound

Clear Language

Avoid Flashing Animations and Auto-playing

Cognitive Walkthroughs

Linear Process

_________

Include:

Usage Guidelines
Tokens

Borders

 

Border Radius

Border Styles

Border Widths

_________

Include:

Usage Guidelines
Tokens

Spacing

Spacing Scale
Baseline Grid

_________

Include:

Usage Guidelines
Tokens

Pictograms

Pictogram Library
_________

Include:

Usage Guidelines
Tokens

Box Shadows

Outer Shadows
Inner Shadows
No Shadow
Hover, Focus, other states
Opacity

_________

Include:

Dark Mode
Light Mode
Usage Guidelines
Tokens

Logos

Main logo
Logo lockups (main + product)

Logo lockups (main + partner)

Product logo

Colors

Clearance

Alignment

Do’s and Don’ts

_________

Include:

Dark Mode
Light Mode
Usage Guidelines

Links

Link Variants

Sizes

Link States

Spacing

Alignment

Link Type
(function - default, back to top, skip, etc.)

Toggles

Toggle Sizes

Toggle States

Toggle Color

Label

Text Sizes (if applicable)

Structure and Spacing

Alignment (cards, forms, text etc.)

Cards (container)

Variants

Content Bleed

Spacing

Borders

Shadows

Positions / Alignment

Heights

Scaling

Modals

Link Variants 

Anatomy

Variants

Sizing

Heights

Positions / Alignment

Overflow

Loading

Spacing

Other components include:

Notifications

Toaster

Slider

Segmented controller

Search

Tooltip

Multi-selector

Toggle button

Number input

Menu button

atlas-grid-example2.png
atlas-standard-width.png
atlas-pinched-width.png

#DBBDFE

100

#C290FE

200

#9B3EFE

300

400

#8A00FC

400

NZXT VOLT

cam-monitoring-light.png

Color

Primary Palette

Secondary Palette

Accents

Greys

Alphas

Alerts

Partners

Accessibility

_________

Include:

Dark Mode

Light Mode

Usage Guidelines

Tokens

Type Styles

Typeface
Base Font
Font Weights
Type Scale
Tailwind Resources
Colors

_________

Include:

Tokens

Icons


Regular - 1.5pt at 16x
Light - 1.5pt at 16x
Solid - filled in or 2pt at 16x

_________

Include:

Usage Guidelines
Tokens

tailwind.config.js

module.exports = {          theme: {

        spacing: {

            '1': '8px',

            '2': '12px',

            '3': '16px',

            '4': '24px',

            '5': '32px',

            '6': '48px',

        }

    }

}

Spacing

Spacing Scale
Baseline Grid

_________

Include:

Usage Guidelines
Tokens

No Icon

Static

Hover

Active

Selected

Inactive

Icon Right

Icon Left

Test

Button Text
Button Text
Button Text

Buttons

Anatomy

Variants

Sizes

Colors & Emphasis

Shapes

States

Alignment

Button Group

Button Label

Check out the NZXT website & configurator

tl;dr

Shared Design System

01/03

Atlas Design System

02/03

Prometheus Design System

03/03