Redesign of a Virtual Food Drive platform
Client TechBridge Inc.
My role I was the sole designer, leading research, design and developer hand-off from start to finish.
Overview of the platform UI.
The client
TechBridge is a tech company from Atlanta, Georgia in the United States that brings digital transformation to social impact projects and nonprofits. Some of these organizations are food banks, which work to gather donations for the food-insecure population.
Virtual Food Drive 1.0
Seeing an opportunity to facilitate the daily work of food banks and reach more donors, TechBridge developed Virtual Food Drive (VFD), an online game in which the player needs to add food products to a shopping cart and make a donation of the equivalent amount.
The name is a direct reference to food drives, events promoted by food banks to gather donations.
Screenshots of the original game.
The opportunity
Flash, the technology in which VFD was developed, had its end announced for 2020. There was then an opportunity to completely revamp the product, updating it to the current state of design and development.
Project goals
To offer a better experience to food banks when setting up a food drive and engaging donors to donate in a recurring way.
Low-res screen shots of the original admin platform.
Research methods
Desk research
A deep dive into the world of food banks, analyzing how they work, where the donations come from and where they go, and how they raise resources, both in-person and online.Benchmarking
To get to know existing solutions in the market.Stakeholder interviews
Interviews were carried out with food bank employees that are VFD users to find out their main tasks, pains and expected gains with online donation of funds.The idea was to also interview the team which developed VFD and donors, but it wasn't possible. However, I had access to donor feedback through food banks.
Online questionnaire
To reach a wider range of users in a more accessible way.Key interview questions
On the donation process
- What is your impression of the game?- What do you think ab out the payment experience?
- What do you think could be better?
- Do you prefer donating through the game or directly, choosing the amount? Why?
On the administration process
- What is your impression of the administrative panel?- What do you think about the features and how could they be improved?
- Which new features would you like to see added?
Information architecture for donors (top) and food banks (bottom).
Main findings
Unpleasant experience with the game
Donors made many complaints about the game. According to them, the speed at which the character moves is too fast to add items to the card. Also, they mentioned the lack of diversity in the character design, the repetitive music, and the annoying sound effects. They also spoke about the donation process, which is bureaucratic and won't show a confirmation message at the end.Subpar usability
Especially in the administrative panel, food bank employees mentioned how hard it was to find the necessary information, confusion in the moment of performing a task, and many technical problems, which make the use impossible without support.Outdated interface
The platform has a Web 2.0 look, typical of the time it was created, the early 2000s. It's evident how different it looks from current websites, which causes a lot of dissonance, on top of the fact that it isn't responsive to smaller devices.Based on that information, we came up with two strategies to tackle this challenge:
01
Raise donor awareness through stories of families and individuals who have benefited from donations in the past;02
Come up with a reward system based on achievements that encourage users to donate in a recurring way.Then, after a phase of feature ideation, we structured the new information architecture for both types of users: food bank employees and donors. After that, we got started on the UI design.
Donor login - Desktop and Mobile.
Donors
Food bank profile
After signing up, food banks will have their own public profile inside VFD. It's where the food bank contact information, missions, and also a direct donation link can be found.Food bank profile for Donors.
Mission
Game missions are a way for donors to get to know the food bank. They can read the food bank story, find the individual donation amount requested, and what is the theme of the game.Mission view for Donors.
Game
During the game, the donors must fit and balance as many food products as possible in their shopping cart. The better they do, the higher their score. After the game, they donate through the desired payment method and, if they're logged in, get to know how many points were earned, if they have leveled up or if they have won any badges.Game screen with donation and success pop-ups.
Homepage
After donating for the first time, the users are invited to create an account. That way they can keep track fo their donation history, points and other game acheivements. They have access to a dashboad with various information encouraging them to keep donating to receive many digital rewards.Donor homepage.
Food banks
Homepage
The food bank homepage shows in real time every donation and which missions are most popular at the moment. That way, the food banks have an overview of the performance of a mission quickly and objectively.Food bank homepage.
Manage missions
This page works as a mission control panel. It's possible to edit, deactivate and share missions. Also, users can search, filter, and sort the way they want to find the information needed.Mission management page.
Create missions
For each step filled up, it's possible to see on the right hand side how the mission will be viewed by the donors. That way, the food banks have total control to ensure the success of the mission.As the food bank employee fills up the information on the left side, it appears on the right size as the donor would view it.
Donation history
Here the food banks have a deeper view of their missions' performance and their reach. Through charts, it's possible to understand, in a set time period, the success or failure of a mission, which channels are attracting more donors, and other indicators. That way, they have every information available to optimize their work.Donation statistics page.
Outcome
The new platform has been implemented and is currently in use by the United States’ biggest food banks, such as Feeding America, The Greater Boston Food Bank and Matthew’s Crossing Food Bank.
Credits
Project manager: Rafael Oliveira
Also contributed: Leonardo Ruhland, Giancarllo Rojas e Vítor Malcher
Illustrations: Addon Vision Infotech (game) and pikisuperstar / Freepik.