FoodMe
A mobile food ordering app that helps students find food, order ahead, & skip lines on campus.
Make food one less thing to worry about.
Team: Team of four UX designers
Role: UX researcher, prototype designer (low-fidelity, some of medium-fidelity, high-fidelity), script writer, storyteller
Skills: Guerrilla usability testing, user interviews, questionnaire and survey design, user personas, empathy maps, sketching, storyboarding, wireframing, prototyping
Tools: Figma
“The app is streamlined, intuitive, and informative without the clutter.”
“FoodMe has the TBucks discounts which allows me to save money.”
Introducing FoodMe
Check out how we hit all of our users’ pain points and needs in this 2-minute video with previews of our medium-fidelity prototype.
Context
In partnership with the University of Toronto’s (UofT) Innovation Hub which seeks to improve campus experience for students, FoodMe was designed to improve access to food services based on one of the Hub’s five domains of innovation:
Access for Every Student
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
meeting dietary needs such as having vegetarian, halal, and kosher options.
However, UofT has no centralized system that manages all these factors.
How can we improve the food experience for UofT students?
Empathize & Discover
Secondary Research
Two significant factors that impact student satisfaction with their food experience are:
food quality
price value
Finding appropriate food on campus presents challenges.
Like other universities without a centralized source of information for their food services, UofT’s information is scattered across their food services website and their online map, and useful information like discounts was not well promoted.
Primary Research
I conducted 3 semi-structured interviews (collectively we did 10) and received 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 qualitative data and found 5 major themes that impact how students access food services:
time
proximity
dietary needs
cost
quality of food
What students were saying:
“I look for food in the same building or in closer proximity to where I have my next class.”
— All 10 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.
Persona - Meet Bilal
With our research, we crafted a persona and empathy map by first ideating independently then converging our ideas to draft and polish each one. This helped us understand 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
Define
We created an as-is scenario to see what Bilal’s current journey looks like without a digital solution and identified 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
Based on the 6 needs, we came up with 24 unique ideas and divided them into 5 main categories before voting on our ideas.
Delivery methods
Navigational methods
Deal finders
Filters
Time savers
Prioritizing Ideas
Each of us had 8 voting stickers - 4 for impact and 4 for feasibility. The ideas that received votes were plotted onto a prioritization grid to get 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
dietary needs
We started imagining what Bilal’s to-be scenario would be like using a digital solution.
Prototype
I started with a storyboard and a paper prototype of a mobile app then converged with the others to create a single paper prototype.
Key features include:
Mobile ordering so students can skip lines and save time
UTORid login - integration with the UofT account system for seamless, easy adoption
TBucks integration for payment through students cards
Filter options: cost, distance, and dietary needs
Directions and a map view using Google’s API
For our lean evaluation and research, we each conducted guerrilla usability testing and recruited an undergraduate participant using a preliminary close-ended questionnaire.
My set-up:
Sitting at tables in quiet environments
1 paper prototype
5 tasks
Think-aloud protocol
Open-ended non-leading questions
Participants appreciated the greater range of options our app provided compared to similar apps like Ritual and liked the app’s overall ease of use.
“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 (app).”
From our research, I identified 6 main areas of improvement for the medium-fidelity prototype:
1| Login page
2/4 students wanted an option to skip login to use the app right away
We added a “Skip for now” option.
2| Home page labels
3/4 suggested rewording “Ratings” to “Reviews”
All 4 suggested changing walking distance to walking time as a more useful indicator
All 4 were unaware of TBucks discounts at select locations
We used “Reviews” and walking time and added TBucks discount labels.
3 | Categorization of filters
1/4 suggested including “Open Now” and “TBucks Accepted” as filters
All 4 were confused by whether selecting a higher number from “Walk Time” and “Price” filters was inclusive of lower values
We Created “General” filters and used the “less than” (<) symbol.
4 | Sorting search results
2/4 recommended having options to sort their search results by “nearby”, “popular”, etc.
We implemented the tabs feature from the home screen in the search results screen.
5 | Restaurant page features
2/4 suggested having symbols of dietary preferences on menu items for easy identification
3/4 wanted a way to “favourite” their restaurants
We added dietary preference labels on menu items and included a heart button next to restaurant names for users to save their favourites.
6 | Overall flow - Ordering and checkout
All 4 wanted to be able to continue browsing after adding to their order
2/4 couldn’t add special instructions to their meals
We changed the flow so that the user could keep browsing after adding to their order. A “Checkout” button appears at the bottom so the user can complete their order anytime.
During checkout, users now have the option of using the “Special Instructions” text field.
All together, here’s our medium-fidelity prototype:
Evaluate
Testing our medium-fidelity prototype
Guerrilla usability testing with 3 participants
All 3 students…
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
I identified 4 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
Iterate based on major findings
a. Find a way to customize food items e.g. asking for extra sauces/toppings
b. Make it possible to place consecutive orders from more than one restaurant
before picking up foodc. Increase the visibility of dietary preferences on menu items
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
High-Fidelity Mock-up
After the course was over, I wanted to see what I could come up with for a high-fidelity mock-up.
Besides adding colour and images,
Icons now appear on applicable menu items associated with specific dietary preference(s) (e.g. the ‘Fajita Vegetable Bowl’ is labelled as a vegan item).
On the last page of customizing a menu item, there is a text field for ‘Special Instructions’ if users have extra requests (e.g. ‘Extra chipotle mayo, please!’).
The checkout screen also has a text field for ‘Pick-Up Instructions’ in case users need something outside the scope of their food order like plates, napkins, or extra cutlery.
After placing an order and viewing directions to the restaurant, users can go back to the search page and order more food at other restaurants even though they haven’t yet picked up their previous orders. Although not shown, all active orders would be viewed by clicking on the profile icon in the bottom right corner of the app.
What else would I explore?
Incorporating available nutritional value information in the menu screens
Adding more detailed directions (e.g. including the floor number of a restaurant in a building)
Making the ‘Pick-Up Later’ feature more explicit - having the option for users to order now but pick up later in the day
Building on the order confirmation screen after an order is picked up
Addressing privacy issues - enabling the use of the app without the need for GPS tracking to be on (if the user doesn’t need to use directions) and understanding how the app would handle credit card information and other sensitive data
Lessons Learned
Guerilla testing isn’t scary - people are, more often than not, willing to help and it’s a simple and quick way to gather feedback and have insightful conversations.
Conducting good interviews takes practice. Having a list of pre-made questions and prompts helps prevent asking leading questions.
Telling a good story is key to building empathy across all audiences. We did this in our presentations by incorporating impactful quotes that supported the user journey.