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
This project was part of INF1602H — Fundamentals of User Experience, a madatory course for students in the Master of Information UXD concentration. As part of this class, we were tasked with solving everyday problems faced by students, with our group’s specific theme being “healthy food“.
The problem
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.
*How might we help university students find affordable, convenient, and nutritious meals to support their health and savings?
01 Research
Understanding the landscape
Before diving into the project, we had questions such as:
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)?
Through our initial exploratory research, in our study, we found that university students…
Internationals struggle with navigating unfamiliar options in a new country
Food prep services are convenient but are often expensive and lack transparency in providing nutritional information.
Not many students would understand do not actually understand what "healthy food" means
To further understand these individuals, we conducted one-on-one semi-structive interviews with 8 university students in the Greater Toronto Area and this what they had to say…
“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
From our findings, we were able to create a user persona that can help us understand our target audience further. Our interviews show that students value:
Undergraduate and graduate students with busy schedules, heavier workloads, long commutes, and newfound social life
Care about 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.