FoodMe
FoodMe is a mobile food ordering app that lets students order ahead and skip lines at campus food services so they can save time and get back to whatever it is they need to ace next.
Team: Abigael Pamintuan, Kogulan Sivaneshan, Janet Lai, Sagal Osman
My Role: UX Researcher, prototype designer (individual low-fidelity, part of medium-fidelity, high fidelity), script writer, and storyteller
Skills: Guerrilla usability testing, user interviews, ethnography, questionnaire and survey design, collecting and analyzing secondary research, competitive analysis, user personas, empathy maps, sketching, storyboarding, wireframing, prototyping
Tools: Figma
Check out our promotional video then read on to dive into the case study.
Context
In partnership with the University of Toronto’s (UofT) Innovation Hub which seeks to improve campus experience for students, FoodMe was designed to address one of the Hub’s five domains of innovation, “Access for Every Student”, to increase access to food services.
Students often only have an hour or two between classes, studying, and extracurriculars to find a snack or meal. Time is precious and the journey to find food on campus often involves knowing what’s nearby, managing costs, looking for value, and meeting dietary needs such as having vegetarian, halal, and kosher options. However, there is no centralized system that manages all these factors. The challenge we faced was:
How can we improve the food experience for UofT students?
As a team of 4, we set out to answer this question and delved into the design process.
Empathize & Discover > Define > Ideate > Prototype > Evaluate
Empathize & Discover
Secondary Research: Exploring student needs for campus food services
In academic articles, we found two significant factors impacting student satisfaction with their food experience: food quality and price value. Finding appropriate food on campus presents challenges too. Sometimes universities don’t offer a centralized and comprehensive source of information for their food services and we found this to be true at UofT. UofT’s information is scattered across their food services website and their Map (which has online and app versions), and useful information like discounts students can receive if they use their TBucks (funds loaded onto a student card) at select locations was not well promoted.
Primary Research: Understanding UofT students’ food experiences
We collectively did 10 semi-structured interviews (3 of which I conducted) and collected 56 responses from an online survey. Our participants were undergraduate and graduate UofT students from a diverse range of academic backgrounds including the natural sciences, film studies, and computer science. I used coding and thematic analysis to sort through the responses and found 5 major themes that impact how students access food services: time, proximity, dietary needs, cost, and quality of food.
A few quotes from our interviews:
“I look for food in the same building or in closer proximity to where I have my next class.”
All 10 participants noted proximity to where they frequently spend
their time as an important factor in choosing food services.
“All the food is expensive… even the junk food costs a lot.”
9 out of 10 said cost was an influencing factor in their food purchases.
“It would be nice to have more halal options.”
All 10 had negative comments regarding the quality and availability of
food options on campus.
Artifacts
With the above research, we crafted a persona and empathy map. We ideated independently then converged our ideas to draft and polish each one. This helped us empathize with representative users’ current journeys, experiences, and pain points.
Meet Bilal the Business Student. Some key points about him:
International student, which also means his tuition fees are higher (At UofT, in 2018-19, approximately 1 in 4 full-time students, 18,958, were international students)
Commutes to school (most UofT students commute)
Purchases 3-4 meals a week on campus
Can only have halal, vegetarian, and vegan food
Meet Bilal the Business Student, our user persona!
Define
To start defining our solution, we created an as-is scenario to see what Bilal’s current journey looks like without a digital solution. Then we were able to identify 6 need statements.
Bilal needs a way to:
Skip lines and get food quickly so that he doesn’t need to rush in between classes
Know about nearby food options so that he can save time and not have to search the campus
See where all halal food options exist so that he can stick to his dietary needs
Discover new food places so that he isn’t stuck eating the same food all the time
Find food that fits within his budget so that he can afford to pay rent and other expenses
Find quality food options so that he can have a healthier and more balanced diet
Ideate
24 Big ideas sorted into 5 categories
Based on these needs, we came up with 24 different ideas and divided them into 5 main categories:
Delivery methods
Navigational methods
Deal finders
Filters
Time savers
We then voted on our ideas – each of us had 4 votes for impact and 4 for feasibility. The ideas that received votes were plotted onto a prioritization grid which helped us narrow our ideas into our top 4 based on high impact and easy feasibility. Each of our top 4 ideas also neatly mapped onto different idea categories and our overarching themes such as time, proximity, cost, and dietary needs, consistent with our primary and secondary research analysis. These themes were areas of opportunity that guided our next steps.
Using a prioritization grid helped us identify 4 main ideas that are both impactful and feasible
We started imagining what Bilal’s to-be scenario would be like using a digital solution that integrated our top 4 ideas. This aligned our focus towards a common set of goals required to meet users’ needs.
Prototype
Storyboarding phase - we each designed a storyboard then converged our ideas to shape our paper prototype
Next, we got storyboarding and built a paper prototype of a mobile app by individually ideating our own versions then converging our ideas into a single paper prototype. FoodMe was born.
Key features include:
Mobile ordering so students can skip lines and save time
UTORid login, UofT’s account system for accessing school services (e.g. email, learning management system, student cards, etc.) for seamless, easy adoption
TBucks integration, allows students to pay using their student card
Filter options that include cost, distance, and dietary needs
Directions and a map view using Google’s API to guide students to their meals
For our lean evaluation and research, we each recruited an undergraduate participant and conducted guerrilla usability testing by each recruiting an undergraduate participant with a preliminary close-ended questionnaire. Sitting beside each participant at tables in quiet environments, we asked them to complete 5 tasks using our paper prototype. Participants were instructed to use the think-aloud protocol so we could understand their thought process. During the usability test, we encouraged them to voice their opinions and asked them open-ended, non-leading questions to assess their understanding and clarify questions. Participants appreciated the greater range of options our app provided compared to similar apps and liked the app’s overall ease of use. Some feedback we received on our low-fidelity prototype:
“I like it. It’s easy to use, and in some ways, friendlier than other apps.”
“The filters menu has more options than Ritual’s (a Toronto-based food ordering app).”
From our research, I identified 6 main areas of improvement: login-page, home page labels, categorization of filters, sorting ability with filters, restaurant page features, and the ordering and checkout experience. We iterated on these as we created our medium-fidelity prototype.
Iterating between Low- and Medium-Fidelity Prototypes:
Here’s what we gave Bilal to try out:
Evaluate
To see how our medium fidelity prototypes held up in the field, we conducted guerrilla usability testing with 3 participants using a similar protocol to our low-fidelity evaluation.
All 3 users:
Liked the overall UI (e.g. the iconography and clarity of the labels)
Said that the app feels familiar and consistent with other food ordering apps they’ve used in the past
Said that their experience of ordering and paying for food was easy and streamlined
Found the app was informative and intuitive without being cluttered
Most importantly, we received feedback on how to further improve our prototype for the user. Sorting through the data, I identified 4 main areas of improvement and guiding questions for our next steps:
Filters; How can we increase users’ ability?
Content details; How can we incorporate user requests for more information?
User flow and process; How can we streamline the process?
Privacy; How can we protect user privacy?
Next Steps
I was able to break this down into 5 main parts:
Iterate based on major findings
Develop a high-fidelity prototype
Conduct task-based usability tests with statistical measures and iteration
a. Completion time, number of assists, etc.
Heuristic Evaluation
Iterate
Lessons Learned
As UX designers and researchers, we are our users’ advocates. Our products need to be evidence-based and founded on research and user feedback to design and improve on current experiences.
We must always test our assumptions and ideas. We, as designers and researchers, are not the users.
Telling a good story is key to building empathy among users, audiences, and the product.