Role:
Product Designer, Illustrator
Timeline:
Jan-April 2023 (with 4 UX Designers) & Nov - Oct 2024 (Solo)
Skills:
Product Design, User Research, Design System, Interaction Design, A/B Testing, Prototyping
Table of content: Click below to navigate to each section
82%
of UBC students living on campus report discarding groceries they couldn’t finish in time.
75%
of these students say the main reason is that food spoils before they get a chance to cook it.
Although many students feel guilty about this waste, they prioritize assignments and other responsibilities over the time and effort it takes to prepare meals. The key driver of food waste on campus is a lack of time and convenience.
Challenge
How might we make it easy for UBC students living on campus to take action on food waste?
Solution Overview
LastBite makes sharing near-expiring items easy and a little fun.
68% of students prefer giving away groceries over cooking or cleaning. No more wasted groceries. LastBite makes it effortless with local listings, gamified rewards, quick lessons, and reminders—turning reducing food waste into something fun and NOT another chore or mental burden.
Food Sharing & Pickup
Share Your Extra Groceries
Allows students to easily upload their soon-to-expire grocery items and have someone nearby pick them up.
It connects students by prioritizing location and proximity, from the same dorm to nearby dorms.
Rewards & Virtual Fridge Care
Decorate and Fill Your Virtual Fridge
Allows students to decorate their virtual fridge. Gamified experience offers a motivation and incentive to keep using the application.
Food Waste Prevention
Build Better Food Habits
Learn about common food waste behaviors, like rejecting items based on appearance, over-purchasing, improper storage, and confusion about expiration dates, through quick, 5-minute lessons.
User Research
Key Insight: Students want to save time & have no food waste knowledge.
In the initial phase, our team discovered that one in four grocery bags in BC ends up being thrown away, contributing to Canada's annual food waste of nearly 2.2 million tonnes (Gottfried et al., 2015). This highlighted the urgent need to address food waste, which led us to develop a grocery marketplace app as the final concept.
A year later, I took the lead on the project, conducting additional research on my own with 18 survey responses and interviews with 6 students. I learned that:
Guilt but Busy Schedules
Students prioritize assignments over less important tasks due to time constraints, often feeling they lack time even for quick TikTok recipes.
Forgotten Items in the Fridge
Students often lose track of what they have in their fridge, leading to wasted food. They have no time to monitor and manage the items in their inventory.
Throwing Away Uncertainty
Students employed a just-to-be-safe judgement where all food that “looks” spoiled are all going to be thrown away.
Inconvenient Programs
from UBC
While students are aware of food waste initiatives on campus such as a community fridge, they find them inconvenient due to distance and other barriers.
Ideation
The current user journey has a retention flaw, with listing and sharing food feeling like an extra mental burden.
In the first phase of the project, my team and I decided to create a “Grocery Sharing Application for UBC Students on Campus,” based on our ideation around students' willingness to share groceries with their neighbors. We developed low-fidelity wireframes to map out the flow.
However, after the second phase of research, I identified gaps in the current app journey that needed to be addressed.
Pain Point of the current user flow of the app
It feels like a chore: With the emphasis on time constraints, why would students use the app if picking up items feels like an extra mental chore, even if it’s nearby?
Food-sharing may reinforced overbuying habits: Students may employed "I can just give it away" mentality. The main goal is to reduce food waste overall, which requires students to understand the reasons behind their food waste in the first place.
What are some features that can help with these pain points?
I brainstorm different features using the prioritization grid and later categorize the features into these three categories.
Must Have
Gamified feature (Fridge)
Create listing & Request pick up
Quick lesson about food waste reduction
Map View
View listings sorted by distance
expiry dates, and categories
Nice-to-Have
AI-text suggestions for titles while creating a listing
Push notifications for nearby or urgent listings
Group sharing or bulk listing options for student clubs or roommates
To Avoid
Overly complex onboarding
Overloading with gamification
Paywalls for essential features, making the app less accessible for students
Overloading the app with unrelated features (e.g., recipe sharing or forums)
How these features can help solve the pain points
Make it rewarding: Students earn reward coins for item pick up or listing, which can be spent on real coupons or virtual fridge items in the reward store. This motivates them to engage and personalize their virtual fridge.
Encourage repeat engagement: Notifications and challenges prompt students to check their fridge, list groceries, and stay engaged.
Promote sustainable habits: Quick lessons on topics like expiry dates and identifying spoiled food help eliminate habits that cause food waste.
Old User Journey
Download and list a near-expire product
Complete one or two grocery pickup
Lose interest after resolving their immediate need to giveaway their initial groceries
Never form food waste reduction habits & Stop using the app altogether
Improved User Journey
Download and list a near-expire product
Complete one or two grocery pickup
Earn rewards
Use rewards to unlock fridge decorations, virtual grocery, or real food coupons
Feel fun & engaging
Get daily reminders to check their fridge
Access short lessons on food waste
Form food waste reduction habits
User Flow
Showcasing core functionalities for a strong prototype.
This user flow captures the intended journey for my prototype, highlighting interactions across key features like onboarding, creating/picking up item, lessons, and the reward store. It ensures all major functionalities are showcased!
Wireframes
3 wireframe iterations to achieve a minimal yet functional design.
Throughout this project, I worked on multiple rounds of wireframes across two phases. The first phase was a collaborative effort with my teammates, where we brainstormed ideas and created the initial sketches and wireframes.
In the second phase, I took the lead and worked solo, incorporating new research findings that required me to make some big changes, cutting features that weren’t as useful and adding new ones to better meet user needs.
Wireframe Development: Home Page
Sketch
Version 1
Version 2
Version 3
Why the final version?
✅ Clear CTA for the app's main feature, "Create Listing."
✅ Bottom navigation updated to align more closely with the app's gamification purpose.
✅ Notifications are now displayed directly on the home screen instead of in a separate menu, making them easier to notice.
Visual Direction & Design System
A balance between functional and playful, designed for scalability and consistency.
The app’s design focuses on being fun and engaging, with gamification at its core. I prioritized playful visuals while keeping the layout minimal and easy to navigate.
To add a personal touch, I created custom illustrations in Figma. I also developed a design system using tokens and variants to ensure consistency and simplify the design process.
Outcome: 14 Components with multiple variants covering all cases!
Iteration #1
Transforming list view lessons into engaging swipeable cards
I started the lesson page with a typical list view format. However, after a comment from a user during usability testing (Wow, seems like they're a LOT I need to learn). I realized there is room for improvement on this page. I ended up creating 2 versions of the screens and conduct an A/B testing with 6 users.
List View -> Card Swiping View
List View:
Offers a linear learning perspective which maybe useful if users required prior knowledge before jumping to another lesson. However, this is not the case for a food waste lessons where the lessons can be learned in no particular order.
Overwhelmed the users with “so much I need to learn”
Card Swipe View:
Offers an exploratory learning style where they can learn whatever they want when they want to
Gamification + Visual Appeal
Key Results
83% of users (5/6) described the card swipe experience as “fun” or “inviting.”
Iteration #2
Highlighting urgency, button accessibility, and lister details
For this screen, after conducting think-aloud usability testing, I noted that 3 out of 6 participants had minor difficulty finding the "Request pick-up" button and mentioned that the details appeared as a large block of text, making it difficult to scan. I made the changes to the screen and tested it again for feedback.
Old Screen:
Urgency labels like "Expiring tomorrow" weren’t visually emphasized.
"Request pick-up" button is hidden at the end of the page. (Not super accessible).
Lister detail does not look "Trustable"/ "Looks fake"
Improved Version:
"Expiring tomorrow" is now highlighted in orange for visibility + communicating urgency.
A sticky "Request pick-up" button ensures easy access at all times.
Add reviews feature to the flow + lister details.
Key Results
Feedback highlighted that the updated design reduced confusion and made key actions more intuitive.
Iteration #3
Card component to highlight urgency for expiring groceries
Noticing room for improvement in highlighting the urgency of expiring groceries, I created two versions of the card and asked participants to complete the same test flow for requesting a grocery pick-up.
Key Results
40% reduction time. Participants were able to complete the task faster with the updated design, taking 3 seconds compared to 5 seconds on the original version.
⚠️ I learned that relying solely on color to communicate information is not good accessibility practice! I've addressed this in my future design work by differentiating elements through text size, borders, and other visual cues.
Final Prototype
LastBite: Reduce food waste for life
Reflection
What I've learned
Iterating with Purpose
The project had two phases. In the first phase, my team and I focused on designing a grocery-sharing app which is we had developed a wireframes for as a final result. Later, I took over with the team’s approval to dive deeper into research, identify pain points, and improve user retention.
Returning to the project made me realized the importance of product thinking. I made sure each decision, from feature additions to visual direction, was backed by solid reasoning and user insights.
I need to start questioning the current solution we had: How can we improve it? Will students actually use it? What is the barrier that makes student not wanting to use it even though we did our research beforehand?
Visual & Design System
The app's gamification required an engaging visual identity. This allowed me to showcase my UI skills, explore illustrations, and create scalable components using design tokens.
It was also really fun working on a design system of my own. I get to explore different use cases and edge cases while balancing creativity with consistency and functionality!
