MSF Component Library & Website
WEB | MOBILE WEB | COMPONENT LIBRARY
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
↪ Led and designed the Component Library and UK website with consideration to web and mobile web best practices.
↪ Provided design options for A/B user testing validation and web page templates for future usage.
↪ Collaborated with MSF digital teams and internal Design partners to establish product requirements.
PROJECT GOAL
Redesigning MSF UK website and creating a unified Component Library with consideration of best practices in UX and responsive design.
TIMELINE
SEPT 2019 - NOV 2019 (NOV 2020 Launch)
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.
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.