An app for MealCare's volunteer to report and keep track of food collection data.
A UX Designer with a background in Engineering.
What is MealCare?
is a non-profit founded by 2 McGill students with the aim of reducing food waste. By collecting leftovers from university cafeterias, on-campus restaurants, grocery stores and delivering them to shelters, Mealcare volunteers have redistributed > 28000 meals to date. The Project
In order to better manage their food waste data as they expand, our team at Hack4Impact McGill's chapter was given the mission to build a mobile app for volunteers to report data from their food waste pickup.
Feb - July 2020
In collaboration with:
1 Product Manager and 8 Developers
MealCare volunteers find it frustrating to use pen & paper + Google sheets
food collection data
. Keeping track of food trays
is also challenging.
Allow rapid and accurate data reporting on the go. Design a mechanism for error-proof trays tracking. Allow access to previous entries.
1. Refactor the information architecture for easy access of data
2. Design a form that allows rapid and accurate data reporting
3. Create a notification system that shows outstanding trays to be returned
The PM and me had a quick kick off meeting with the founder of MealCare where he explained in more detail what they’re looking for and how they’re operating now. He also connected me to a few volunteers from different chapters so I could do a more in-depth user research.
From the 3 x 30-mins interviews I had with the volunteers, I was able to identify their pain points and get an idea of what they're looking for in the app. The insights are outlined in the 'Problem' section.
Their current food collection process
Volunteers visit various donors in the city on a weekly basis to collect leftovers (sometimes in trays or disposable containers like cardboard boxes) and return trays (if any). Then, they’d drop the food off at shelter(s) and collect any trays to be returned from the previous run.
They are currently using pen & paper on the go, and a Google Sheet for keeping track of all the entries in the current school year. This method, although quite cost efficient, has the following problem:
- Inefficient - volunteers have to enter their data twice (once at the donor and once at home for Google Sheets)
- Not mobile friendly - Google Sheets is difficult to access on the go and new entries are not updated instantly for every volunteer to view
- Inconsistent formatting across chapters - This made it difficult to keep an accurate record of meals saved by MealCare across Canada
And for chapters that partner with university cafeterias:
- Difficulty keeping track of trays - trays from last week's delivery need to be returned to the right donors
Sketching out ideas
I first sketched out different ideas and 'wrote out loud' issues as they came into my mind.
Quick sketches exploring different ideas
Making Decisions on Main Features
Determining the Information Architecture
I explored 3 ways of organizing the information and decided to go with the 1st option:
Donor → Date → Food item
Donor → Food item → Date (food collection is dependent on date)
Date → Donor → Food item (trays is dependent on donor, more clicks needed to view outstanding trays of each donor)
Marking Trays as Returned
Having a bulk return option + sorting trays according to their sizes is the best option.
High Fid Mockup and Prototyping
Once decisions were made for major features, I started designing the high fidelity mockup on Figma. Since the branding was predetermined by their website already, it's not difficult to come up with the UI.
I continued iterating on the design but the high level flow remained the same as determined in the previous stage.
Key features of the design
Outstanding Trays 'Notification'
Outstanding Trays 'Notification'
Volunteers can quickly identify the number of outstanding trays needed to be returned to each donor, which date of collection those trays belong to, the number of trays collected for each food item and their respective sizes.
Bulk Return Trays
Bulk Return Trays
To mark the trays as returned, volunteers simply need to double check the sizes and their corresponding quantity in the pop up that appears after clicking on 'Bulk Return Trays' under last week's entry. The quantity is pre-filled to the total amount, but it can be altered in the case of leaving certain trays behind at shelters .
Food Suggestion Dropdown
Food Name Suggestion
In order to prevent duplicated entries in the database, the 'menu' feature is designed as a Food Name Suggestion dropdown that allows the volunteer to report reoccurring food donation easily.
I tested with 2 user (the founder and 1 volunteer) once the prototype is ready. Although the general feedback was good, there were small details that could be improved, namely:
Having a 'menu' option (first prototype doesn't have the menu option described above)
Adding a field to keep track of date of preparation
After another iteration, I tested with the founder and 1 other volunteer again. They are both satisfied with the design, so I then handed it off to the developers.
Final Thoughts and Reflections
This is my first time designing an entire app from scratch. Trying to get everything right for the first version (and doing all of it alone) was definitely challenging, but it has given me a great opportunity to work on something of a bigger scope.
Not diverging enough
Although I explored a few options for a few major features, I did not do so for others such as the food entry form and the menu option. The latter led to a problem - without considering other options, I took the menu idea presented by the founder during the first testing but it turned out to be infeasible for the devs. When I was redesigning it, I realized a much simpler approach can be taken (i.e. suggestion drop down). We would have saved so much time if I didn't jump into a solution.
Now I’ve learned to ‘force-quit’ my thoughts and challenge myself to generate as much ideas as I could early on in the design process. Crazy 8s has been particularly useful in this matter.
Wishing for more iterations
This is a one-time project, but part of me can’t help but wish that we could follow up and continue to iterate on the app. We weren’t able to test as extensively as we have planned, so I'm sure there will be issues yet to be discovered.
Although the pandemic should not become an excuse, it has undoubtedly impacted our work. We weren't able to follow through with our plans to shadow volunteers for an in-depth user research, and at the end, test the app with them on site as well. But of course, I'm very thankful that everyone's healthy and safe, and that modern technology has enabled us to continue with this project.