DWB Component Library & Website
WEB | MOBILE WEB | COMPONENT LIBRARY
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.
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.
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.
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.
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.
