Daily Bread Food Bank

Daily Bread Food Bank

Symbolic Giving (eCommerce) Store Design

Symbolic Giving (eCommerce) Store Design

Client

Daily Bread Food Bank

Services

UI & UX Design UX Research Project Management Code

Industries

Nonprofit

Timeline

4 months

Meet the Project

The Daily Bread Food Bank Symbolic Giving (Gifts that Give) eCommerce site gives the user more insight into where their donation goes: Buy a Hot Meal for a Neighbour, Buy Lunch for a Class, etc.

Dashboard Sidebar Close Up
Dashboard Sidebar Close Up
Dashboard Sidebar Close Up

Project Summary

Daily Bread Food Bank wanted to create an eCommerce store where users could purchase gifts and learn more about where their donation goes. Through the symbolic store, users can narrow their search through the "product" categories: Children, Most Needed, Most Popular, Seniors, and Under $50. Then once the product is selected the user will be asked if they wish to send an eCard along with their purchase. There are a multitude of eCard selections (Happy Birthday, Get Well Soon, Happy Mother's/Father's Day, etc. These eCards can be emailed to anyone they choose. Once the eCard sending process is complete the user will make their purchase for their donation to be complete and for their eCard to be sent. ​As the project manager, it was my responsibility to oversee the early-stage discussions surrounding the goal/purpose and determine a timetable for launch. We then quickly went into the design stage and worked with Daily Bread Food Bank to finalize the copy to be used on the website. After the Mobile and Desktop design and copy were approved we moved into development where I worked alongside the developer to get ready for launch. It was my responsibility to design, and configure the site including setting up the eCommerce site in Luminate Online, creating the PageBuilder pages, configuring the customizable pages and the specific client asks, populating the website images, and adding the copy using HTML. ​After the eCommerce site launched I continued to provide support when anything needed to be fixed/updated. I then ran a training session with the Daily Bread Food Bank team outlining how to edit the eCommerce site in the backend on Luminate Online. The training session included a video recording and training document for the Daily Bread Food Bank team to refer back to when the contract had concluded.

Problem Statement

How might we build a trustworthy relationship between donors and nonprofits?

Solution

Pain Point: Users feel untrustworthy of where their donation goes and who it helps. Solution: A symbolic store (eCommerce website) that provides donors with information about their gift, where their money is going, and who it is helping.

Information Architecture

Full Dashboard
Full Dashboard
Full Dashboard

User Flow

eCard

eCard Selection Page

Extracted currency modules
Extracted currency modules
Extracted currency modules

The ability to send an eCard acts as a material benefit when donating. Users can send the eCard of their choice to any email they choose and personalize it to their taste. The bottom of the eCard promotes which gift was purchased on the receiver behalf and acts as a marketing tactic to bring the receiver to the site. An additional eCard page was created in case the user missed their chance to send one and can either view their thank you email for the link or contact the Daily Bread Food Bank support team.

Product Page

Full Dashboard with Sidebar
Full Dashboard with Sidebar
Full Dashboard with Sidebar

User Testing

​After development was complete, a Punch List and shared with the client for testing purposes. Testing included internal testing at hjc and two rounds of testing with the Daily Bread Food Bank team. As the project manager, I was in charge of solving any issues that arose during testing. Main takeaways: • Copy updates • Image updates • Hiding certain landing page sections for future use

Punch List

Final Designs