Budget Bites
My Role
UI Design Lead, Prototype Designer, User Researcher
Tools
Figma, Adobe Illustrator
Timeframe
Fall 2024 (3 months)
Team
Me, Mary-Grace Nassralla, Hong Phuoc Ho, Neha Choughule
Summary
As part of the Fundamentals of UX Course during my first year of postgrad, my team undertook a three-month project to address key challenges faced by University of Toronto students, with a focus on the theme of "healthy food." We conducted research, developed solutions, iterated on our ideas, and prepared a project pitch to present to industry professionals at the end of the semester.
What did I do?
For this project, I led the prototyping and visual/UI design efforts focused on improving students' access to healthy food around campus.
My responsibilities included conducting user interviews with my partner Maria and helped with synthesizing research insights with the rest of the team, and led with designing high-fidelity interactive prototypes. In addition, I helped in developing a information architecture for the project, evaluated its interfaces, and brainstormed innovative solutions for a more seamless and intuitive design.
The problem
How might we help university students find affordable, convenient, and nutritious meals to support their health and savings?
01 Research
Understanding the landscape
As students, the rising cost of food has made maintaining a balanced diet increasingly challenging. Juggling a busy school day while commuting through downtown Toronto adds to the struggle, often making it difficult to prioritize healthy eating.
Before diving into the project, my team and I needed to conduct preliminary background research with these questions in mind:
What do the lifestyle and daily food choice of a college student look like in detail?
What are their food buying habits? What do they often consider when it comes to buying food for themselves?
What are their perceptions of existing food technology solutions (i.e.: food delivery services)?
“You go downtown. There just isn’t really… Frankly, there isn’t much of a cheap good food option… Like healthy food options.”
“..the delivery fees get expensive. I usually only really use them [food delivery services] when they have either promos or like deals where the price kind of evens out.“
“We’ll look at a meal and maybe it’ll have like a 40% discount or like 10% discount, because that’s usually when I consider buying something. And then by the end of it, I’ll have selected everything that I want and like minimize price as much possible. And then I get to actually like making the purchase, and then the delivery fees, the taxes, the tip the restaurant, the tip to the driver, everything just adds up, and suddenly it’s more expensive.”
“My mornings – before I enter my commute is so early. I wake up at 6 already. So I just told myself. You know it was not worth the waking up 30 min early at 5:30 [to cook]”
“I almost never [bring food from home] because I do not like carrying stuff in my bag“
To summarize, the majority of our interviews showed that…
Buying food on-the-go is convenient for their busy schedules while meal packing for school is not preferred -> soggy, no microwaves, no time for meal prep
(5/8 participants)
Budgeting for food expenses is essential and healthy eating can really hurt their budget
(6/8 participants)
Food delivery and meal prep services are expensive and inefficient
(4/8 participants)
The user persona
Based on our interviews, we developed a user persona with these main frustrations and values:
Undergraduate and graduate students with busy schedules, heavier workloads, long commutes, and newfound social life
Budgeting and price evaluation for food expenses
Interested in healthier eating habits but don’t know where to start with their current conditions (limited budget, no time or space to prepare healthy meals, lacking knowledge)
Are not satisfied with the food delivery solutions that modern technology and companies offer
Main User Persona
Competitve analysis
I helped in creating the competive analysis diagram for Budget Bites. The diagram can help visually organize insights on apps such as Uber Eats, Mealime, and Hello Fresh. These apps were found to be similar to the direction we wanted to do with giving a list of nearby hidden options and deals for students.
Competive Analysis Diagram
Meal-planning and delivery apps have several gaps that create opportunities for improvement. Many lack customization, making it hard for users to tailor meals or plan based on their kitchen setup. Beginners struggle with meal prep due to unclear guidance, and pricing per meal is often not transparent. Few apps cater to dietary needs like gluten-free or allergen-friendly options, and some make cancellations difficult. Users also find meal variety limited and repetitive. On the delivery side, late arrivals, incorrect orders, rising fees, and inconsistent food quality reduce trust. A solution that offers more customization, clear pricing, diverse meal options, and reliable delivery could stand out in the market.
02 defining
Exploring different ideas from our team members…
During our studio sessions, I co-led the ideation phase and guided my group to generate a variety of rapid ideas within a few minutes. I facilitated discussions to converge on the strongest concepts and used the dot voting method to collectively identify the most feasible options aligned with our research. Following this, we created a pyramid framework to further refine and prioritize the main features of our solution. Finally, we created an ideation priority grid to touch on the students' pain points that align with the user profile.
Brainstorming and rapid ideation
In our exploration, we considered various concepts, including a junk-food generator and a coupon collection app. Ultimately, from our dot voting, we wanted to create a repository of "hidden gem" vendors, complete with a locator and detailed nutritional information for each meal.
Brainstorming pyramid for app for possible features
Priority Grid that helps us refine and focus our product direction.
03 designing + iterating
Creating the initial user-flows and UX storyboards
As part of our collaborative design process, each team member was assigned to create distinct user flows based on the happy path we designed for Russel in the journey map. Each of us focused on a specific section, guided by the features outlined in our pyramid. My responsibility was to design the user flow for accessing the nutrition page, mapping out the step-by-step journey from the app’s home screen or navigation menu to ensure an intuitive and efficient experience. Once individual user flows were completed, we regrouped to refine and integrate them, ensuring consistency and cohesion across all sections of the app.
"To-Be" Journey Map we aim to achieve with our solution
Locating Meal Flow
Find Nutrition Flow
Addding Meal to Budget Flow
The Prototypes
After finalizing our ideations, we produced a mid-fidelity prototype for usability testing and presented it for experts in the field. I led the creation of our testable prototype and wireframes, finalizing it and connecting them on Figma. We created a happy path for a user starting on the homepage, looking for food, selecting and adding it their budget.
I drew inspiration from banking and budgeting apps, as well as map-based platforms and incorporated their strengths into the app’s design and functionality. Multiple team discussions took place during this phase and I ensured the team was aligned on key priorities for the app, establishing a clear information hierarchy to enhance usability.
Initial Wireframes
usability testing and revisions
The goal of our test was to evaluate whether users could successfully find a meal and add it to their budget and if they understood the purpose of the app at first glance.
Through six usability tests conducted with both peers and experts, we identified areas of difficulties and made targeted revisions to refine our high-fidelity prototype.
Below are some of the key issues we encountered and addressed:
Before
A main problem we had when running our usability test is that our homepage focuses too much on budgeting; thus, overshadowing the app’s other goal to help students navigate to budget-friendly restaurants and diners nearby.
after
To address this, we added “discover food” sections in the homepage. This includes their favorites and within budget recommendations. We also included a search bar with toggles such us within budget, nearby and deals.
Before
Another issue identified was the lack of clarity in the labeling and icons. Some users were unsure of the meaning behind certain icons in the navigation bar, the purpose of the search bar, and the function of the “log food” feature.
after
We added labels under each navigation icon to improve clarity and updated the search bar icon to better reflect its function. Additionally, we renamed “log food” to “add expense” to make its purpose clearer to users.
Before
Users struggled to exit the screen because there was no clear or visible indicator to guide them. For this prototype, they would have to tap anywhere on the screen to proceed.
after
We improved this by adding multiple options to exit. The first is through the “x” icon or by tapping anywhere outside the box to cancel. In addition, an undo button just in case the user changes their mind.
Main Screens
Logo Ideation
Style Tile
Final Mood Board and Vision Words
04 delivery
what sets budget bites apart
Prototype
05 reflection
the experience
It was an absolute pleasure to collaborate with this team. I truly appreciated how we exchanged a wide range of ideas and how deeply passionate we all were about the project, even within the tight timeframe. This experience emphasized the importance of time management, as I had never before worked on such a large project with such strict deadlines. Each team meeting felt like a real business operation, with structured agendas, clear objectives, and focused discussions. I felt a strong sense of responsibility, and one key takeaway from this experience is that effective communication is essential for success in teamwork. As the lead designer, receiving feedback from my teammates was incredibly valuable and opened my mind to fresh perspectives
I am not used to such high-pressure situations and this project enabled me to be more flexible and adaptable in different circumstances. Overall, the experience was invaluable in developing both my professional skills and my ability to collaborate effectively under pressure.