Community Food Share

Online Donation Form

App Prototype

Users will only experience a series of four pages when donating. Users can use three different payment types and pay either monthly or as a one-time donation. There are six happy paths available.

I participated in the Giving Back Project 2022 and created a new donation form

The Boulder/Longmont UX Research Meetup engages in annual rounds of “Giving Back” Projects. Our members will work collaboratively with at least one local nonprofit organization or Colorado business known for giving back to the community. Our group provides free user experience recommendations on this partner’s main website based on a preliminary round of research using standard industry methodologies.

The goal for our group is to leverage the collective talents of our members to “give back” to local companies or organizations that benefit from our expertise. Our partners are under no obligation to implement the recommendations from our findings when moving their organization forward. We hope they see our efforts as providing a window into the pulse of their target audiences.

We engaged with Community Food Share (CFS) in this project from February through April 2022. Community Food Share is a local food bank in Louisville, Colorado that has been fighting hunger in Boulder and Broomfield Counties for decades.

The Opportunity

We identified three areas that CFS wanted help, the donation form, accessibility to more audiences, and navigation on their site.

Initially, we planned to take on one of these projects, the donation form. Another one of the organizations our group offered to assist wasn’t ready to work with us, the volunteers from that group merged with ours. Suddenly, we could take on all three projects!

I was drawn to the donation form project. I wanted to practice my user interface design skills. I took a mini-course to learn about best practices in form designs. As our group is UX research-based, many people were not as interested in designing the user interfaces. Not me, I was excited to do the UI design work! As I began that portion of building the prototype in Figma, other team members started the research.

Community Food Share original website
Community Food Share distributes enough food for 25,000 meals every day
Our goal is to distribute 10.5 million pounds of food every year, but we focus on quality, not just quantity
At least 75% of our distribution will be fresh produce or high-protein items like dairy, meat, and peanut butter
65% Partner Agency Distribution
Most of our food is distributed through a network of more than 40 local non-profit organizations
25% Direct Distribution
We also provide food directly to families, seniors, and other individuals in need through our onsite and mobile pantries

On December 30, 2021, the Community Food Share service area was devastated by the Marshall Wildfire that destroyed over 1,000 homes.

The need for clients to receive food increased, people who never needed food before now had no kitchens, lost everything, and many were traumatized
The donations were rolling in and many generously wanted to help those who were affected by the devastating wildfire
CFS was struggling to keep up with the online donations

CFS Original Donation Form

Interview with the stakeholder reveals donations form challenges:
“Improving the online donor experience is one of our top concerns”
“It may take longer than they would like to donate”
“The donation form is not optimized for mobile”
“It only offers two payment options (credit card or ACH) making it tedious to donate online”
“Our form doesn’t follow best practices for donation forms”

Donation Form Design Decisions

The existing donation form is a single long page which is not the best optimization for a mobile design. Mobile users have to keep scrolling. I wanted to make a series of short pages where the user would do only one action per page, this works best with a progress bar. I built this one to show the user that there are only 4 pages. This encourages users to complete the form since they know it isn’t much further to complete the task.

Progress bar showing user is on the 3rd of 4 pages.

The Hero Image

One early decision we faced was, whether to include a “hero image?” A hero image is an eye-catching, engaging image situated at the top of the page. After reviewing the competitive site analysis that one of our researchers developed, we decided that this was important to include. It will help draw the donor in and remind them that people will be assisted by their donations.
We landed upon this image of the girl eating corn. We think it induces delight when one can visualize the effect of donating, to see that children will have access to wholesome food, and seem to be enjoying themselves.
Since this image is of a child, it may remind us that healthy nutrition for children is fundamentally important for their future development.

Payment Options

Concerning payment options, we had a significant design choice to make. Primarily, what types of payment should be provided?

In the current version, there were options for bank withdrawal and credit card payments. However, the stakeholder was interested in seeing whether a mobile payment option, such as Venmo, might drive more donations. If users are predominantly experiencing the site from a mobile device, they may want to use a payment system that is built for the mobile experience.

We decided to include a Venmo option. We studied how other sites implemented Venmo and viewed some screen recordings of the process. In our prototype, we provide a button for Venmo, when this is clicked the donor will be redirected to the Venmo payment portal and then returned to the app to confirm the donation.

Impact of Donation Graphic

We also debated whether or not to include this graphic that is on their website. A graphic like this is not necessary to complete a donation but we saw similar graphics used by other sites featured in our competitive site analysis.
Since our best practices research indicated this type of language may increase donations, we decided to keep it. It provides a nudge to donors to consider the impact of their donation. We think this will help reinforce the spirit of giving as the donor goes through the process.

Donation Wireframes

Due to time constraints, I took this prototype to the mid-fidelity level. Meaning it is fully functional but has not been finalized with color and artwork. I do include the color-photo hero image of the girl eating corn and the end hunger artwork that came from their site with its color. Although these images aren’t typically included in a mid-fi design, I wanted the stakeholder to have some images to help visualize the final product.

This organization has someone who can develop the form from this design. Additionally, I have offered to donate additional time to complete this prototype.

The following wireframes show one common path through the donation process. This one will give you a general sense of what the user will experience when donating monthly with a credit card. Screens have been created for other paths including donating by check monthly, donating by check one time, donating by credit card one time with the donor covering the credit card fee, and donating by Venmo, both monthly and one time.

All screens have been checked for accessibility and meet the standards for accessible content as determined by Web Content Accessibility Guidelines and Section 508 compliance.