Greater DC Diaper Bank

Redesign website for a nonprofit

Overview

Introducing the first volunteer collaboration with Catchfire, a non-profit community whose vision is to create a more empathetic, inclusive, and loving world. They facilitate connections between professionals who want to donate their time and talent through virtual volunteering with nonprofits who need our skills.

I enjoyed being matched with Greater DC Diaper Bank, a nonprofit in Washington, DC, who believes that giving a little changes a lot. Something as simple as fresh and clean bottoms can help babies and their families rise to the top. They provide adequate and reliable sources for basic baby needs and personal hygiene products throughout DC, Maryland, and Virginia.

For this project, I was tasked with redesigning the Greater DC Diaper Bank’s website while maintaining its colors.

Challenge

Bring solutions to refresh Greater DC Diaper Bank’s website design without changing its brand colors.

Client

Greater DC Diaper Bank

Role

UX/UI Designer

Contribution

Competitor Analysis
User Flow
Site Map
Mid-Fidelity Wireframes
UI Design
CMS

Tools Used

Pen & Paper
Balsamiq
Figma
Adobe Xd
Photoshop
Illustration
Adobe Acrobat
WordPress

GreaterDC_homepage image

Current Website

GreaterDC-givedollars old screenshoot

Current Website

Problem Statement

I am a user that wants to donate and I’m trying to learn more about Greater DC Diaper Bank. However, not being sure where to go first, I feel worried that I will not complete the task of donating money correctly.

I am a user that wants to volunteer and I’m trying to see how I can help Greater DC Diaper Bank. But, there are too many places to look; it makes me feel overwhelmed and confused about how to help.

I am a mom who needs diapers and hygiene products and <b”>I am trying to see how Greater DC Diaper Bank can help me. But there are too many places; it makes me feel overwhelmed and confused about what I should do.

Potential Solutions

As an informational nonprofit website, it has three different user targets – Donors, Volunteers, and People in need – each one needs independent navigation tools that are clear and directs them to their desired information.

The site needs to be responsive, so it can be viewed on any device. The optimization and accessibility are essential to allow the various customers ease of use.

Site Map

Site Mapping is the process of visually outlining a website’s structure, higher-level functionality, and navigation scheme. This overview and web analytics allowed me to review the pages and the information.

actual_sitemap
actual_color sitemap

Coloring the pages by target allowed me to reorganize the sitemap for each user. This exercise helped me created user flows to make each user have easier navigation and a better experience.

Final color site map

Wireframing

From the beginning, Greater DC Diaper Bank mentioned keeping the brand’s colors and working with the WordPress theme called “DIV.”  These two aspects made the redesign process a little easier, as I already had templates to work from. I was able to move directly to mid-fidelity wireframes in Balsamiq.

Givedollarwireframe
wireframe screen get involved
wireframe screenshoot ambassadors

Design Language

Since I was responsible for the web design and front-end, I took the print-based brand and converted it into a digital brand. The focus was to maintain consistency in the brand while taking into consideration web accessibility.

Prototyping

One of the biggest changes on the page was the donation form. To review the concept and get approval from the stakeholder and developer, I built a prototype of the donation form to showcase the user experience.

Final Design

The project is still in the process of being updated, and the developer is building the templates needed on WordPress. I was able to design a few pages to showcase the feel and look of the new website.

Proposal Website

Great DC Bank Diaper website
Great DC Bank Diaper website

Proposal Website

Great DC Bank Diaper website
Great DC Bank Diaper website