ChefMate is an AI-powered recipe suggestion tool built to help users discover recipes tailored to the ingredients they have on hand. This project showcases our team's technical and design skills while testing our ability to collaborate effectively under a 6-week deadline.
ChefMate is a recipe platform that helps people make the most out of ingredients they already have. By uploading photos of their kitchen contents, users receive recipe suggestions tailored to their ingredients. ChefMate aims to simplify cooking and promote sustainability, resonating with Gen Z young professionals who value convenience, eco-friendliness, and efficiency in their busy lives.
I was fortunate to take part in a program that brought together PMs, developers, and designers to ship an MVP. As our first project together, we had to navigate new team dynamics, which called for more than just my UX skills. I stepped into multiple roles — a mediator, an advocate, and a problem-that-came-up-at-the-last-minute solver. As the sole designer on the team, I led the creative vision while balancing the need for progress over perfection. In the end, this project was about learning with and from each other, all in the name of shipping a product.
We kicked off our first meeting with the classic "Two Truths and a Lie" icebreaker, because what better way to start than by figuring out who’s the best liar? Then, we outlined our goals and brainstormed product ideas.
We decided to build a recipe suggestion tool that prioritizes optimizing ingredient usage over just providing recipes. The core feature would involve AI recognizing ingredients from user-uploaded photos to suggest relevant recipes sourced from the web. Our goal was ambitious: to showcase our technical and design skills via a physical product and our ability to collaborate under a deadline of 6 weeks.
01
FOSTER SUSTAINABLE COOKING
Enhance convenience in cooking by making it accessible & efficient, thereby encouraging the use of available ingredients and reducing waste.
02
ENSURE RELEVANCY & FUNCTIONALITY
Deliver accurately matched recipes based on users' ingredients to ensure the platform operates reliably to support meal preparation.
03
LEARN & IMPLEMENT AI TECHNOLOGY
As it was our first time working with AI, we needed to learn and integrate a solution that fit our skill levels and product's needs.
Initially, the team considered interviewing anyone, but I suggested honing in on a target user group for more intentional and relevant solutions, even if it meant appealing to a smaller audience.
Given our product’s focus on sustainability and convenience with new technology, we chose to target Gen Z young professionals. This demographic aligns well with our product because they are typically eco-conscious, tech-savvy, and less likely to face a steep learning curve, which helps user retention. They’re also highly active on social media, which provides an opportunity for organic marketing in the future.
With our user base in mind, I conducted surveys for quantitative data on cooking habits, preferences, and pain points, and interviews for qualitative insights into these areas.
User personas were created right after research to quickly align the team on users' characteristics and pain points. Although I usually analyze insights first, building our personas directly around user research allowed us to visualize our users early on and not get caught up in extensive analysis for an agile project.
While these personas differ in stages of young adulthood, financial situations, and cooking skills, I identified shared challenges to ideate design solutions applicable across various user types. Since these challenges are also interconnected, addressing one could positively impact others, amplifying the impact of our solutions:
RESOURCE ALIGNMENT
Challenge: Aligning available resources (i.e. time, money, skills, ingredients) with cooking activities
Need: Solutions that help them decide how to approach meal planning, grocery shopping, and cooking in light of their resources
MANAGING INGREDIENTS
Challenge: Maintaining ingredient inventory and using them efficiently
Need: Clear and up-to-date view of ingredients, along with suggestions for use
RECIPE DISCOVERABILITY
Challenge: Finding recipes that align with individual needs and preferences
Need: Streamlined recipe discoverability to simplify meal planning
After sharing my findings and pitching solutions, we agreed to spend our next sprint turning these into tangible designs. However, for the next two weeks, our developers struggled to find an AI that could reliably recognize ingredients in images, especially those with cluttered items and poor lighting. This setback delayed the design process as we now faced the possibility of having to change our project scope entirely. At this stage, our current AI options had critical limitations:
Hugging Faces
TensorFlow
With three weeks left, I proposed a workaround for TensorFlow: a "My Ingredients" side panel where users can view successfully recognized ingredients and manually input missed ones. This solution enhances ChefMate's functionality despite an imperfect AI, and broadens accessibility/use for those unable to upload images.
The team loved the idea, and we were able to move forward (although efforts to find a better model were still ongoing).
In just a week, I created the user flow, wireframes, and prototypes while keeping the team aligned through daily stand ups to touch on development feasibility. By the end, I had a comprehensive design handoff that included annotations, component libraries, and a style guide.
During development, I collaborated daily with our front-end developer, Mary, guiding her through the design as she built the front end. Our simultaneous work let us immediately tackle concerns and ensure designs were translated as intended.
Our meetings were productive and enjoyable, and a learning curve for both of us: Mary helped me better understand HTML and CSS while I shared insights on the why behind design decisions. Overall, our partnership fueled the product’s and our own growth by giving us a deeper understanding and appreciation for each other’s work.
Despite our collaboration, the first version of development came back looking a bit rough. It was clear that design had taken a back seat to more pressing technical challenges. Regardless, we had achieved huge milestones: the AI recognized ingredients (somewhere along the way, we found one that worked perfectly), users could manually add ingredients, and the side panel fully functioned.
ADDING INGREDIENTS WITH A PHOTO
ADDING INGREDIENTS MANUALLY
Yay, ingredient recognition! (Note: AI identified all ingredients on backend; frontend integration wasn't complete at time of testing hence some missing in the side bar)
The modal made single-entry input tedious and disruptive, with repeated pop-ups making users refocus and engage in extra interactions.
* Unresponsiveness caused layout discrepancies across these 2 videos
To address UI design gaps, I created action sheets for development priority and more wireframes with detailed specs to guide developers. Although it didn't fully resolve our implementation challenges, it streamlined their workflow.
Beyond this, I made iterations to the manual entry interaction. Seeing the first build demo solidified that the current ingredient input modal had to be rethought, especially now that multiple entry was no longer feasible for development.
BEFORE
AFTER
Modal was originally used for a focused and guided user experience. With multiple interaction methods (i.e. manual input, drag & drop, upload), I wanted to keep the process separate and organized to lessen risks of user error from missed steps or distractions.
While this would've worked for multiple entry, it was too repetitive for consecutive single entry.
Manual ingredient input is built into the side panel for smoother interaction; users hit 'enter' after typing or select from suggestions.
This also worked out considering we scrapped the drag-and-drop feature to focus solely on image uploads.
At the end of those 6 weeks, our team was selected as one of the top 3 to demo our product to our cohort. A lot of my designs were not transferred to development, but this was to be expected considering that design had to take a backseat towards the end of our project in order to get the core functionality of our product working.
With version 1.0 complete, we're excited to continue developing the product by adding recipe filtering/sorting options and account creation, enabling personalized features like recipe recommendations and saving. While these enhancements support our primary goals of sustainability and convenience, our product’s long-term success also depends on its abilities to generate revenue. Here are some ways to achieve that:
- Monetizing through recipe site partnerships
Our platform aggregates recipes from various sources, creating opportunities to partner with these external recipe sites and food bloggers. This would enhance our offerings while boosting partner visibility by driving traffic to their sites. Revenue is generated through premium placement fees for more exposure.
- Account creation to drive user engagement and revenue opportunities
Introducing account creation can transform our platform into a content-consuming hub, where users are given opportunities to engage, share, and post recipes.
Financial Incentives
Implementing a creator fund (similar to TikTok & Instagram) can encourage food bloggers and culinary enthusiasts to contribute high-quality cooking content.
Leveraging Influencers
Popular food influencers can bring their audiences to our platform, helping to maintain a steady stream of new users.
Overall, growth is fueled by a self-sustaining cycle of content creation and consumption. This improves the diversity and quality of our platform's offerings while helping attract, retain, and engage users.
I started this project feeling a bit anxious about whether I’d meet the team’s expectations, which partially stemmed from my own self-doubt as a designer. But being the sole one on the team forced me to grow into my role, fast. Here are three key lessons I took from this experience:
01
COMMUNICATE!!
Communication is the backbone of Agile, but it was our Achilles' heel. With a developer who disappeared for 90% of the project and gaps in knowledge, we struggled to communicate effectively, leading to assumptions and misaligned workflows.
02
MAKE COMPROMISES
As a designer, I aim for intentional, pixel-perfect designs. In a fast-paced and understaffed project, however, I had to let go of that perfectionism and focus on what was realistic within constraints. Flexibility was key to keeping the project moving.
03
BE CONFIDENT, BUT OPEN TO FEEDBACK
At first, I hesitated to share my thoughts, fearing they wouldn’t measure up. However, I learned that to make an impact, I had to advocate for my ideas and articulate them clearly. Building confidence was about finding my voice while balancing conviction with adaptability.
Next Project
