BLUEPRINT PROJECT

Facilitating meal donations for 15,000+ kids

CONTEXT

What is Feeding Canadian Kids?

Feeding Canadian Kids (FCK) is the largest federally registered charity in Canada that has partnered with 200+ restaurants to feed 15,000+ kids in schools. However, everyday, the FCK team manually coordinates the school meal donations.

Role

Product Designer

Time

4 months

Team

2 Product Designers
1 Product Manager
4 Developers

THE PROBLEM

The FCK team doesn't have the time to coordinate hundreds of meal donations between meal donors and schools.

THE SOLUTION

A donation platform for meal donors to partner with schools

I worked with a team of developers & designers to build a MVP of the meal donation platform. The meal donation platform streamlines the donation process by allowing donors to sign up for donation dates needed by schools in their community.

Saved FCK team 3 hours/week

Shipped and used by 400+ schools

First, select a school in your community 🏫

Next, schedule dates to donate meals 🍽️ 📆

.....And fill in the donation details. You're done! 🥳

The Bumpy Beginning

Starting the project from the ground

A ROCKY START

We got the chance to interview every stakeholder, except meal donors.

This meant that we didn't understand meal donor's pain points and get the full picture of the problem in the beginning of the project. This shaped our initial product requirements of pushing donors to donate more.

Segment #1

"I need meal donors to donate recurringly and also long term. We need food for kids throughout a school year."

Erica

Care Kids School

Segment #2

???
‍
‍

Adam

Meal Donor

HYPOTHESIS

As schools needed year-round meals, I made the assumption that meal donors were highly motivated to donate long-term to multiple schools.

I categorized meal donations by weekly recurring and one-time donation requests for meal donors to fulfill. After signing up for requests, donors could then fill in their contact information, food details and track their donations

V1: Signing up for a meal request

While waiting for research, I explored how the different meal requests would be displayed in the dashboard.

I decided to blend both types of meal requests visually together because the FCK team was concerned about the favoritism of one-time donations.

VERSION 1

Dividing requests by commitments

  • Able to see more meal requests from schools at once in the gallery view
  • Dividing one-time and weekly requests goes against business goals of encouraging donors to donate more

CHOSEN

Blending all requests

  • Less choices presented make it easier for the user to sign up for a meal request
  • Easier to read through requests in a chronological top to bottom order

FINALLY!

Mid-way, I got the chance to interview a major meal donor—Steven, the owner of Jersey Mike's Subs in Waterloo.

I wanted to understand on basis do restaurants donate food, and what motivates them to work with FCK. Woah! To my surprise, I learned some shocking findings that would change the trajectory of the project.

NEARLY EVERYTHING WE KNEW WAS WRONG!

Meal Donors can no longer afford to donate long term.

01 | Inflation prevented meal donors from donating frequently
Financial stress impacted meal donor's willingness to donate, unable to guarantee donations.
02 | Meal donors want only donate to one school
Driving long distance to different school locations also takes an enormous amount of effort.
03 | Meal donors are not the most technologically savvy
Meal donors fall in the older end of the millennial generation.

Pivoting the Product

Using the new research and facts, I aligned the new product requirements for design & engineering teams.
Initial Goal
How might meal donors donate to as many meal requests as possible?
Revised Goal
How might meal donors contribute to their community whenever they can?

NEW PRODUCT SPECS

So team, what exactly are we building?

By now, we had only 2 weeks left for the project. I created user stories based on my interview with the meal donor and presented them to the team. Since donors disliked driving everywhere and donating to multiple schools, we moved away from allowing donors to choose meal requests to instead choosing one school to donate to.

BEFORE

AFTER

INFORMATION ARCHITECTURE

Woah, information overload!

Before jumping into design, I identified key information user need at each step of the user journey, matching the user's mental model. Next, I created an information hierarchy, so that I knew what to prioritize when designing.

NEW PRINCIPLES

We strategized a vision and principles to follow in designing the meal donation dashboard

Simplicity
Streamlining the donation process into easy steps.
"Feel Good"
The smallest contributions make the biggest impact on the kids.
Gratitude
Expressing gratitude donations without pressure.

DESIGNING THE DONATION PORTAL

How might meal donors choose a school in their community?

The main variables behind choosing a school are distance & the number of kids. I explored the "match-maker" concept of pairing a meal donors with a school that fit their preferences, and the concept of users finding a school in their community.

VERSION 1

Discovering Nearby Schools

  • Filter panel is not functional because users will rarely change different schools to partner with
  • Choosing a school difficult since they all have the same missions

CHOSEN

Matching Schools

  • Imagery incites storytelling to show who are the faces behind the donations
  • Most frictionless solution as donor does not have to choose between schools
However, after learning all schools shared the same mission, I went with "match-maker" because it was the most frictionless.

But, not all ideas are feasible for development!

My developers faced a road-block of programming a "perfect school match" for a meal donor.  I knew this had to be a solution from the design side because development would be delayed by 2 weeks.
When developers explain code to me

THE SOLUTION

So instead, we matched the 3 closest schools to a meal donor.

Distance is the biggest decision factor for choosing what school to donate to. As the developers could not guarantee a perfect school match, we provided school options for meal donors to choose from because of the different requirements (donation days available, number of kids to feed, etc).

UX TESTING

After we did a round of testing with 8 meal donors, we made changes.

FINDING #1

25% of users forget the dates they've signed up when filling in the donation details form. The dates determine the meal information they're donating.

To solve this, I integrated the selected donation dates directly into the form flow. This small but impactful change reduced confusion, helping donors stay on track and complete their sign-ups with confidence.

BEFORE

ITERATION

FINDING #2

Meal donors wish to see the impact they've made on kids inside the platform.

Before COVID-19, FCK team members would personally hop on a call to thank the meal donors. Now, that the entire donation process is automated, meal donors felt a lack of appreciation. This extra little "Thank You" message reminded meal donors that even the smallest contributions made a huge difference, fueling their motivation to donate during difficult times.

BEFORE

ITERATION

FINDING #3

Every screen felt inconsistent due to a lack of a proper design system.

FCK's current design system (3 different colors) didn't serve their need in providing delight to the meal donors for donating. So, the team and I whipped up some illustrations and revamped the design system to maintain consistency across the platform. Looking good!

ITERATION

The Power of Teamwork

Helping the engineering team get prepared for dev hand-off

Couldn't have done it without my team!

Thank you to everyone on the FCK Team & also the Blueprint community for supporting me throughout the process in shipping out my first non-profit project. I'm so proud of what we have created together!

REFLECTIONS

Dear Diary, what went well? And not so well?

01 | The importance of getting all stakeholder’s input early on
Seeing how the design of the meal donor dashboard progressed, design conversations should include all stakeholders, otherwise it can be extremely one sided. Luckily, we were able t
02 | Designing for non-technical folks
Since majority of meal donors were not technically and technologically inclined, I had to balance between old and modern design patterns in the meal donor dashboard. If I had more time, I would have done a final moderated UX testing session with a meal donor, where I ask users to complete a set of tasks.
Made with love and one chocolate strawberry
Linkedin
Instagram