Greater DC Diaper Bank

Redesign of website and art direction.

Project summary

This project was initiated through Catchafire.org, a platform that connects skilled professionals with nonprofit organizations needing support. Through this collaboration, I partnered with the Greater DC Diaper Bank to enhance their digital presence and optimize user engagement.
The primary objective was to assess the existing website and deliver strategic recommendations aimed at improving both functionality and aesthetics. This included reorganizing user flows to create a more intuitive navigation experience and applying the organization's updated branding to deliver a refreshed, cohesive visual identity. The result was a redesigned website that better reflects the Greater DC Diaper Bank's mission while meeting its diverse audience's needs.

Information

CLIENT
Catchfire - Greater DC Diaper Bank
Role
Lead UX/UI, Visual Designer
YEAR
2020

Original website

Process

Prioritized the redesign of the Greater DC Diaper Bank website. The first step was to develop a clear understanding of the primary user groups visiting the site. Through research and data analysis, I identified three key audiences: donors, volunteers, and parents or caregivers seeking support from the diaper bank.
Using website analytics, I examined user behavior patterns and the most frequently visited pages to gain insight into their needs and navigation habits. This informed the reorganization of site content to create a more intuitive and accessible user experience.
With a refined Information Architecture (IA) in place, I focused on structuring content through clear taxonomy, logical hierarchies, streamlined navigation, and an improved site map. This foundation guided the development of wireframes and ultimately informed the final visual design, ensuring a user-centered approach throughout the redesign process.
Information Architecture
Low-FiDELITY WIREFRAMES
HiGH-FIDELITY WIREFRAME
A/B TEST
FINAL WEBSITE REDESIGN

Design 

Information Architecture (IA)

Low-fidelity wireframes

High-fidelity wireframes

The Greater DC Diaper Bank UI Kit

A collection of reusable design components was developed to create consistent and efficient user interfaces. This design system streamlined the overall process by providing pre-defined elements that ensured visual and functional consistency across the site. It also enhanced efficiency during development and simplified future maintenance and updates, allowing for scalable, iterative improvements over time.

A/B Testing

Proposed a redesigned payment experience after identifying user confusion with the previous flow. This initiative effectively demonstrated to stakeholders the necessary updates and improvements for the site's primary fundraising feature.

RESULTS

The project successfully met the client's expectations, particularly through the detailed analysis of user personas and their journey across the website. These insights provided clarity and direction for improving the overall user experience. Additionally, the client was pleased with how the digital presence aligned seamlessly with existing print collateral, reinforcing a clear and consistent brand identity across all touchpoints.

The client chose to incorporate several elements from the final design into their new website, reflecting the project's positive impact and alignment with their goals. This engagement was a valuable professional experience, allowing me to apply both my theoretical knowledge and practical skills in experience design. It was rewarding to see my contributions directly influence the site's direction and user experience.


Desktop Design

Mobile Design