DWB Component Library & Website

WEB | MOBILE WEB | COMPONENT LIBRARY

Doctor Without Borders Image

UI UX DESIGN
SYSTEMS DESIGN
VISUAL DESIGN

ENGINEERING SUPPORT

SEPT 2019 - NOV 2019
WEBSITE LAUNCH: NOV 2020

1 DESIGNER | 1 CREATIVE DIRECTOR | x EXTERNAL ENGINEERS | 2 EXTERNAL TEAM LEADS

Non-profit organization that provides mental, physical, and medical care to people all over the world providing the help they need and a means to tell their story

Goals

Redesign DWB's UK website with consideration of best practices in user experience and responsive design

The Very Beginning

With prior UX research and documentation in mind, the plan was to create a component library consisting of UI elements and modular components that could easily be implemented throughout DWB's UK website.

Component Library

We started by working with DWB's digital team to organize a list of component and product requirements and took into account DWB's global online presence as well as their main target audience.

With the complete list we designed from ground up starting with foundational elements to component organisms and everything in between. We made sure to prioritize responsive design as we created these components.

Component List
Map Box Component

Web Pages

As we continued to work on the component library, we simultaneously started redesign on individual web pages.

Our team collaborated with DWB's digital content team to organize the overall user flow and provide the best user journey possible.

IA Mapping

To fully understand the vision of the DWB team, we first provided a few different options for one individual page and moved forward from there. After a few AB tests and feedback from the DWB teams, we were able to design the main pages they needed as well as templates to be used for any repeating pages.

DWB Homepage
DWB Donations

Mobile Web Pages

As desktop pages were getting approved, our team moved on to designing in mobile sizes. We focused on designing at a minimum of iPhone 6/7/8 sizes.

Throughout the design process we kept in constant communication with DWB's development team to allow for any questions and updates from both ends. We provided specs, guidelines, and support on the components and pages we designed.

Screen Shot 2019-10-10 at 1.22.14 PM.png

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

Check out DWB UK

Learnings

Although this project had a fairly quick turnaround, the vision and direction was clear thanks to our partners at the DWB organization and we were happy with the end result. Through this project I learned a lot about designing for this industry and its target audience. I found the level of effort that gets put into this organization extremely eye-opening and it meant a lot to our team to contribute in any way we could.

Regarding the user experience, most of our focus was on a) creating awareness and b) easily accessible navigation to donations. Although those were important areas to focus on, there are a number of other ways everyday users can contribute and I would love to put a little more time onto some of that. A few examples would be the contact information, resources, and fundraising that are more accessible to your everyday user. 

More Work

YAHOO

DESIGN SYSTEM | INTERNAL PLATFORM

mb_yahoo_02.0.jpg

NZXT WEB

WEB | MOBILE WEB | DESIGN SYSTEM

Hero.jpg