A fun interactive donation box for CHI Competition 2018 ( runner-up, Top 2% design), visualizing monetary donation in order to encourage community engagement in food charity.

CHI 2018 Student Design Competition

3 Months (Oct. 2017-Dec.2017)

Ruoxun Chen
Aditya More
Marshall Robbins

Video Making

What I learned?

Set a mediocre quality standard first and get perfect gradually.

Sometimes, I am a little bit too detail-focused. If an idea is not good enough, I might kill it at the beginning. However, there is not always desired ideas. A good way to improve teamwork efficiency is to set a mediocre quality standard first, try to get it as fast as possible and then improve it, instead of being perfect at the beginning.

Reach out to stakeholders and mentors proactively.

When dealing with the ambiguity, seeking help from seniors is extremely important. Keep touch with them and ask good questions.

Time management

1) Give teammates the trust to make some decisions on their own. 2) Do not track back only if I have a clearly better idea. 3)Start deliverables early. This helps to record small decisions and rationales along the way.

Trust the team. Try idea out instead of endless discussion.

It's so easy to discuss a lot while doing little. One moment that hit me so much was when we got stuck in an endless argument about whether one idea was attractive or not, our mentor jumped in:"Why don't you guys just build the prototype and test it?"

The Problem

As many as 1 in 7 Americans with food insecurity rely on food donated to charities. How can we help them?

The topic of CHI 2018 student competition is “engaging community”. During our research, we found that as many as 1 in 7 Americans with food insecurity rely on donated food and over 100 million pounds of food is donated to food charities every year. Therefore, we focused our design on helping people who suffer from food insecurity by engaging the public community in food banks. But how?

The Solution


Our donation box, Small Donation – Big Impact, encourages cash donations to food banks by helping people visualize their monetary contributions through a fun interaction.

First, we encourage donors with a series of videos and facts. Among these, we compare the quantity of food an individual can purchase to that of a specific charity. Second, when donors make a contribution, they see the precise quantity of food weighed on the screen in a fun interaction. By doing this, donors can maximize the effect of their contributions. Charities encourage more donations for their cause. Grocery stores get to facilitate community engagement in their stores, leaving a positive view of their business.

Research Insight

Food drives are a common way to donate to charities. However, we found that food donations are not as impactful as monetary donations.

In our interviews with the local food bank Mother Hubbard’s Cupboard (MHC), we gained insights which we confirmed through secondary research. Individuals can only donate about 1-2 meals per dollar spent. However, food banks like MHC and Feeding America can purchase between 4 and 20 meals with that same dollar.

Individuals can only donate 1-2 meals per dollar spent.
Food banks like MHC and Feeding Americacan purchase between 4 and 20 meals with that same dollar


How can we make potential donors aware that their cash donations are much more effective in order to have the greatest impact? 

Educational and fun interactions

According to AV Pandey et al., visualization has a key role in affecting people's attitude and behavior. If people could visualize the quantity of food donated, they will be more likely to donate cash instead of food. To design what this would look like, we started with inspiration from other successful donation projects.

(SocialSwipe: an example of an interaction that educates donors)

Grocery store which is available to all.

A physical device in a public space would best encourage a variety of people to interact. Because everyone has to eat, nearly everyone goes to a grocery store on a semi-regular basis.  If we put the design at the end of check out registers, those who wish to donate are likely to have their cash and cards already in hand.

(Interview with a grocery store manager)


Our design idea was to let the money entered into the box turn immediately into food that falls down the screen. We hope the design could benefit all the stakeholders involved.

Conceptual Test

We learned that visualizing the food was impactful, but the intention of the design was not entirely clear before donations were inserted.

We created a simple cardboard prototype to test if people were impacted by the quantity of food donated per dollar contribution. We put it in a cafe shop. When testing, we described to users a hypothetical situation: “You are in a grocery store after checking out, and this device catches your eye. You walk up to it and have a dollar and a quarter in hand”. When users put money in the slots, we immediately poured food through the box into a bowl. All 4 users recognized it was a donation box. Unfortunately, none were entirely clear as to exactly what would happen when used, so they were not that motivated to try it out.

INSIGHTS: We decided to have something that better explains what is happening initially, and encourages users to try it out by donating.


We designed the screen to show food falling on a scale to explains what is happening initially, and encourages users to try it out by donating.

To achieve these goals, we created dozens of iterations as a group. Ideas ranged from physical to digital, and simple to complex. We ended up settling on having food fall on a scale, as it is a clear indicator of measuring quantity. We decided to create a digital design because it would require less external maintenance. In addition, it would be more flexible for the varieties of interactions that might happen.

Ready to eat food

We also considered images of food falling onto plates of ready to eat meals. However, It was misleading since that’s not what is actually donated. 

Vending machine

Donors could pick out the food they are donating. This wasn’t practical, as it was creating a false sense of choice for the contributor.

Physical bags

Bags fill with either real or plastic food as people donated. Filling bags would not be visually appealing, and you can’t see the actual food inside

Falling food on scale

We decided to create a digital design having food fall on a scale as it is a clear indicator of measuring quantity and requires less external maintenance. 

Contextual Test


Users felt measuring food quantity by weight was misleading. 

To test the success of the scale, we used our original cardboard prototype but added a scale inside the box (figure 4). We performed this test in a local grocery store, Lucky’s Market, which is actively engaged in charitable drives and expressed interest in our design. This test reconfirmed the success of the falling food. However, some users felt measuring food quantity by weight was misleading.

INSIGHT: We decided to measure the quantity of food by meals. In our research, we found that this is also the way most other charities measured their impact.

Final Design


We created a charity box that helps donors visualize their monetary contributions as food contributions. You’re seeing a fun interaction that shows you exactly how your money is making a difference.

Attracting Screen

This digital donation box is located in grocery stores so that it is accessible to everyone. A loop of the first 3 forms the “attract mode.” Each screen has video footage which educates donors and encourages contributions.

Donation Interaction

Once a person donates, they see a quantity of food equal to the amount they donated piling up on the scale. This will show a different type of food falling each time, to represent the variety of foods charities provide.



The test reaffirmed the idea that the visualization feedback is fun and motivating. To move forward, we still need a few steps.

We tested the final design with a high-fidelity prototype. 4 potential donors were given a one dollar bill and two quarters. They were told they could choose to keep them, use them for the design, or both as they see fit. 3 of 4 users donated all the money. To move from our high-fidelity prototype to a working product will require a few additional steps. We need to film a larger quantity of food falling in $.25 increments to accommodate large donations and quick consecutive donations. Some updated footage, animation, and slower transitions in the attract mode will add to its clarity. The biggest next steps are including functional cash/card acceptors, a video control application running on a single-board computer, and an economic display panel with a strong casing to hold donations.




UX/UI Design: An inline brand style system to accelerate MailChimp users' market content creation.



UX/UI Design: A redesign of Yelp collection for groups.



Product Design: An interactive donation box for CHI 2018



UX/UI Design: A pleasant menu experiences and quicker in-store services for campus cafe shop.



UX Design: A redesign of a template picker for online diagramming

Web Memo 

UX Design: A browser plugin for online courses



UX Research: An educational kids' game for IBM



Product Design: An intelligent product for home-made fruit wine

Web Memo 

UX Design: A browser plugin for online courses