Feeding America

Digital Interaction Design Project

In our interaction design class, we partnered with the nonprofit Feeding America to design novel digital interactions to inspire donations. My team focused on digital interactions in the grocery store setting and delivered a concept to promote financial donations in a grocery store app tied into the shopping experience.

Date: Jan 2020 - Mar 2020

Team: Chris Baggott, Kavya Bhavaraju, Brandon Washington

Skills Used and Developed:

UI/UX Design
Digital Prototyping (Figma)
User Flow Mapping
Storytelling

Challenge

Uncover novel opportunities for donations around a variety of consumer touchpoints while benchmarking existing approaches.

Create and test a novel donation concept that Feeding America could use with a variety of corporate partners.

Interviews & Initial Concepts

Our team decided to generate concepts across different contexts including grocery stores, restaurants, and online retail. Initial brainstorming sessions generated a large volume of ideas, which we narrowed down to six initial concepts. After discussing the strengths of our ideas, we agreed to focus on the grocery setting.

We conducted interviews with seven potential users in our target demographic of young professionals, gaining insight into their grocery shopping habits and also obtaining feedback on our six concepts. This feedback led to the evolution of our leading concept into a digital donation campaign tied into a grocery store app.

Key Research Takeaways

Many people in our target demographic of young professionals did not like being surprised by a donation "ask" at checkout. They reported feeling uncomfortable and disconnected from the impact of such a donation.

They much prefer a donation opportunity that is presented earlier, giving them time to consider, and it must be minimally disruptive to their task of shopping.

Feature Storyboards

To further explore this grocery app concept, the team created a general storyboard to illustrate the user interaction, while also drawing out brief "storyboards" for the main features of the concept. The concept was named "Fresh Fights Hunger" because users would donate a portion of their fresh food purchases to Feeding America, and the amount would be matched by the grocery store.

Some of the steps we mapped out were the opt-in process, customization of the donation amount, visualization of impact, and gamification elements.

In-store journey illustrated by my teammate Kavya B.

Digital Prototyping

Once the team had solidified the initial concepts and features for our "Fresh Fights Hunger" idea, we moved into creating digital prototypes to further bring the concept to life. I took the lead on using Figma to create the prototypes, using a real grocery store app as a reference.

I created dozens of screens with detailed transitions and interactions to simulate all steps of using our app concept. The prototype included opt-in, scanning and shopping, checkout, and impact tracking. We created dynamic previews of the app alongside a hand-drawn storyboard to feature in our final presentation to Feeding America.

Evolution of "Fresh Fights Hunger"

Based on our user testing and some feedback from our partners at Feeding America, we made several changes to our concept to better meet the needs of the users and the nonprofit. These changes included a modified "gamification" model with an in-store donation progress bar.

I also changed the layout of the donation confirmation screen to allow for more customization. Users told us they wanted to be able to customize the donation amount, so I allowed for four different percentage levels as well as a whole-dollar donation option. Since users have the store app open to scan at checkout to redeem store coupons, the donation confirmation lets users set their amount and see their donor impact. This made for a quick interaction that wouldn't hold up users in the checkout line.

A Closer Look

Some elements of the concept proved particularly tricky to design and prototype to a high standard. Below, I have outlined the process of improving some of the features that I discussed in the previous section. The changes that I made to these elements of the prototype led to an improved donation experience as informed by our test users.

Deliverables and Next Steps

Deliverables for this project included the following:

High-fidelity digital prototype showing key mobile screens and interactions
Slide deck summarizing our work along with a concept "story" to illustrate key features
Executive summary

Some important next steps include further investigation of an ideal corporate partner for Feeding America. Other important areas for future work are the cultivation of desirable data-sharing partnerships to mutually benefit Feeding America and grocery stores, as well as an exploration of effective in-store donation prompts.

My Key Learnings

Don't Be Afraid to Pivot: My team identified an initial concept that was promising and generated positive user feedback, however, it did not meet all the needs of the users and Feeding America. We pivoted to a more successful direction using partner feedback and input from our classmates. While it took some extra effort, the results were worth it.

Focus on the Story: The storyboard process was a critical element of the project. It helped us not only to communicate clearly with users during concept testing but also encouraged us to walk through the whole interaction and understand what we would be asking users to do.