⇠ previous : carvana

next: unidays⇢

Feed Racer

Make donating food a team sport.

MY ROLE

Product Design, UX/UI Design, Interaction Design, Information Architecture, QA Testing

TEAMMATES

Cameron Friel - Developer and Matt Yakob - Product Owner

TOOLS

Sketch, Invision, Illustrator, Jira

Strategy, design and development created at Shockoe.

⇡

opportunity

Increase food donations to local food banks.
The challenge was to help connect food donors to food banks in the Richmond area. Our team met on-site with FeedMore, one of the major food banks in central Virginia. They taught us about their donation, collection, and storage processes. Our team learned that FeedMore is most successful at collecting food when engaging large groups.

outcome

It's a race to win, where everyone wins!
Feed Racer is a race-centered themed app that drives food donation participation in a both impactful and playful way. Feed Racer promotes gamification, repeat involvement, and participation versus typical food drives that people forget after donating once.

AUDIENCE

Feed Racer is for food banks and other philanthropic organizations that want to increase the participation of groups in their community in food collection.  Feed Racer allows organizations to recruit and motivate groups to participate, like girl scout and boy scout troops, students and teachers from each grade in a school, and employees in neighboring office buildings.

Onboarding

User Considerations
Most users are invited to join a team for a food drive before they have downloaded the app. It is crucial that the onboarding process welcomes and informs new users.

Designer vs. Developer
My team and I had to prioritize which features we could develop in the timeframe we had. I had to convince my team that the benefit of onboarding screens out weighed the time it would take to fully develop.
‍

Home

Main Features
To keep with the racing them, the home screen is called my garage. Users have quick access to the main actions they need.
1. Personalization
To add personalization, each player's home screen greets them and displays the days left in their on-going food drive.
‍
2. Create a Race
To create a new food drive competition, users must select "create a race." This leads them though a checklist of forms.
3. Captain Menu
When users create a race they gain access to the captain menu where they can adjust race information.
‍
4. Join a team
Team captains send a team code to players for them to join their team. Players must enter the code here to gain access to the Race Dashboard for that food drive.
‍
5. Settings

Donate

Enter a Donation
The player needs to complete the donation form to submit the donation to add points to their team.

Activate Participation
To add a level of humanization, the donation form prompts the player to take a picture with their donation.
1. Donation Form Empty State
2. Donation Form Filled State
Users need to take a picture with there donation, write a description and input the number of items in 4 categories before they submit.
3. Fuel Score
The donation receives a fuel score which adds to the team's cumulative donations.

Race Dashboard

Repeat Participation
The Race Dashboard is where players on each team can see how their team is doing compared to the other team. Seeing the total team score and the donation feed encourages repeat participation.

Aggregated Content
Information for the Race Creation form and Donation forms submit by each team are displayed here.
1. Food Drive Information
The name of the food drive is always visible and more information about the food drive is accessed by a dropdown.

2. Scoreboard
The car of the team that has the current highest donation total gets displayed in the front position.
3. Team Information
The player can click the dropdown to reveal more information about their team but only sees the name of the other team.
4. Countdown
Displays the number of days remaining for the food drive.

5. Donations Feed
Players can scroll through to view their donation, their teammates donations and the competing team's donations. The color on the right indicates what team that donation is from.

Sketches

Information Architecture

Design System

Moodboard

Iterations

Additional Screens

Reflections

1. My first time working within an agile team with a developer and product owner.
‍
2. I was excited to see a project go past the prototype phase through to the development phase, and see the application really work.  
‍
3. Working with a developer was challenging, but this experience helped me formulate better reasoning for my design decision, to optimize the user experience.

⇠ previous : carvana

jackie koon   |   ux designer    |   Résumé

next: unidays⇢