
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.

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.




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.

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.


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.








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








#DBBDFE
100
#C290FE
200
#9B3EFE
300
400
#8A00FC
400
NZXT VOLT


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
Buttons
Anatomy
Variants
Sizes
Colors & Emphasis
Shapes
States
Alignment
Button Group
Button Label