Smart Swap (App)
The Problem: Tedious Process
Home cooks get frustrated when a recipe's ingredients doesn't align with their available pantry items, budget, or dietary restrictions. It takes time to manually search for suitable, context-appropriate substitutions and then having to mentally or physically rewrite the entire recipe.
The Goal: Personalized, Perfect Recipes
The app's goal is to empower home cooks by making any recipe instantly adaptable and accessible. It aims to eliminate barriers like specific dietary needs, ingredient availability, or cost by generating a perfectly customized, functional, and delicious version of the dish with a few simple taps.
Meet Smart Swap, the intelligent app that brings total flexibility to your cooking. Using advanced AI, it quickly pinpoints and incorporates ideal ingredient swaps to build a truly personalized recipe. It's the perfect solution for anyone managing special diets, dealing with a missing ingredient, aiming to reduce food waste by avoiding one-time purchases, or adjusting a dish to their personal taste.
Mobile App
(AI Recipe Substitutions)
Lead UX/UI (Case Study)
Market & User Research, Wire Framing, Prototyping,
High Fidelity Designs
Paper & Pen, Figma, Photoshop, Gemini Nano Banana, Google Docs
Empathize
Define
Ideate
Prototype
Test
Understanding the Market
The market is showing a strong acceleration in the demand for AI-driven personalization in the food-tech space, making this the ideal time to launch a truly intelligent recipe modification tool. Existing apps either tell users what to cook with what they have (SuperCook) or give them a list of possible swaps they have to execute manually (Yummly). They fail at the high-friction point of guaranteeing the successful outcome of a complex recipe after a substitution. Unique Selling Proposition (USP): The AI-powered "Smart Swap" feature, which automatically recalculates quantities, adjusts cooking times, and rewrites the entire set of instructions (e.g., telling the user to "reduce milk by 1/4 cup" when swapping sugar for honey).
Making the Swap Easy
Going into the research, I assumed the primary challenge was simply knowing what substitute to use. However, the research in form of user interviews revealed that the greater pain point was the confidence and effort required to adapt the entire recipe (e.g., measuring new ratios, adjusting cooking steps, and ensuring flavor compatibility) after finding a suitable swap. This shifted the focus from simply suggesting a list of alternatives to creating the Smart Swap feature, which automatically rewrites the complete, customized recipe to guarantee success.
I conducted my initial user research using a qualitative approach to gain a deep understanding of the challenges home cooks face when modifying recipes.
​
-
Method: I ran moderated in-person interviews to capture nuanced feedback.
-
Sample Size: I spoke with 5 participants in total.
-
Demographics: The group consisted of 3 women and 2 men.
-
Recruitment: I recruited these participants through a convenience sample of family and friends.
​
This method allowed me to gather rich, detailed stories about the emotional and logistical struggles associated with finding substitutes and adapting recipes, which became the foundation for the Smart Swap concept.
Pain Points
Finding a Subsitute
Users struggle to find a substitute that fits their needs but also preserves the flavor profile and functional chemistry of the dish
Determine Quantity/Ratio
Difficulty to accurately adjust measurements for ingredient swaps to maintain dishe’s texture and consistency
Rewrite Entire Recipe
Users find it annoying how time consuming it is to rewrite the whole recipe
Lack of Confidence
Uncertainty about whether a swap will ruin the final dish so users don’t even try
Real User Examples to Understand the Pain Points
The creation of the Ben Miller and Sarah Lee personas was driven by the core pain points identified in user research. Ben Miller was developed to embody the "budget and food waste" challenge; as a full-time barista on a tight income, his scenario highlights the frustration of finding a recipe calling for a single, expensive ingredient, which he doesn't want to buy for one-time use only. In contrast, the persona of Sarah Lee was created to represent the complexity of multiple dietary restrictions at once. Her scenario focuses on needing to make simultaneous, complex swaps within a single recipe to accommodate a diverse group of friends.
Sarah's Dinner Party
Sarah wants to make a lasagna for a group of six. The recipe calls for ground beef, ricotta cheese, and tomato sauce (a nightshade). She needs the app to simultaneously swap the beef for lentils, the ricotta for a cashew-based filling, and the tomato sauce for a pumpkin or sweet potato-based sauce, all while ensuring the bake time and liquid levels for the final dish are correct.
Trying a new Recipe
Ben is tired after his barista shift and needs to use up vegetables on a tight budget. He finds a Thai soup recipe calling for kaffir lime leaves, which he doesn't own and doesn't want to buy for a single use. He fears that a simple swap like regular lime zest will ruin the dish's unique fresh aroma, making the recipe a gamble after his long workday as he could end up with sour soup.
User Journey (Ben Miller)
The Ben Miller user journey highlights the common struggle of the budget-conscious cook who is forced to abandon appealing recipes due to a single expensive or missing ingredient. The process begins hopefully with recipe discovery but quickly turns annoying when a barrier like kaffir lime leaves is identified. The journey then becomes overwhelming and anxious as Ben must manually leave the app to search for substitutions, estimate complex ratios, and mentally rewrite the entire recipe, ultimately leading to him feeling defeated and settling for a simpler meal. The core pain point is not the substitution itself, but the high cognitive load and risk required to adapt the entire recipe successfully.
Translating into Features
The research findings were quickly turned into features to solve the major problem: people don't trust ingredient swaps and hate the manual work. Since users hated copying and pasting, I made Instant URL Import and Recipe Search a priority. To eliminate their fear that the swap would ruin the dish, the core feature became the Functional AI Rewrite, which skips the guesswork and just hands them a guaranteed, corrected recipe with new steps. Lastly, to help people choose the right substitute, quick, one-sentence Contextual Rationales explaining why a particular swap works best for their specific needs (e.g., budget or allergy) were added.
Recipe Search / URL Import
Easy way to find recipes for customization
AI Recipe Rewrite
Give the user an updated recipe with steps
Substitution Context Explanation
Built trust by explaining the why for each subsitute
Design & Prototype
Establishing the Userflow
To establish the necessary structure and logic for the Smart Swap application, the first step involved creating a clear sitemap. This process immediately clarified the essential pages required to address user needs, such as the central Home and Dashboard areas, and crucial containers for Saved Content and User Profile & Settings.
Based on this map, I defined two primary user flows to validate the app's core functionality: the Ingredient Search flow (for quick, simple lookups) and the Customize Recipe flow, which is the more complex, multi-step process that incorporates searching for a recipe, picking substitutes, and finally triggering the Update Recipe feature. Mapping these flows ensured every necessary screen was included to fully support both Ben Miller's need for a quick swap and Sarah Lee's need for a complex recipe rewrite.
First Structural Designs
I started the design process with paper sketches because it allowed me to get ideas out and iterate on different layouts quickly. This was where I focused purely on the structure and flow - what elements needed to be on the screen and how users would move between them.
Once I had a solid, low-fidelity foundation, I moved into Figma to translate those drawings into digital, low-fidelity wireframes (mockups). This let me maintain the focus on structure while benefiting from the speed, alignment, and collaborative features of the digital tool, preparing the work for the next step of visual refinement.
What Testing the Early Prototypes Told me
When I tested the early prototypes, users immediately pointed out a big missing piece, which confirmed Sarah Lee's pain point: the app couldn't handle more than one change at a time.
This feedback was crucial. It started the upgrade for Smart Swap from just a basic substitution tool to a powerful engine that can manage the full complexity of making multiple dietary changes within a single recipe. The change was quickly implemented in the wireframe prototype.
​
Early testing also showed that users wanted to access the information as quickly as possible, so they could start either purchasing the necessary ingredients or start cooking right away. It proved that the flow had to be straight to the point and easy, without unnecessary hold-ups.
Swap Multiple Ingredients
Allow the user to replace several ingredients in one step
Keep Flow Quick & Simple
Users use the app while they are already cooking, hungry or out shopping so they want to see quick results
Add Information about Subsitutes
Users need more information to make a decision on their prefered subsitute
Finding the Visual Language for Smart Swap
The overall visual design of Smart Swap is founded on trust, clarity, and ease of use, directly opposing the user's fear of complexity and failure. The visual hierarchy is intentionally simple, prioritizing readability and scanability over trendiness. I used generous whitespace to separate complex information (like the ingredient substitution details) and avoid the visually overwhelming interfaces of many existing recipe apps.
I chose the vibrant orange to strategically highlight key interactive elements and the AI's important feedback, immediately drawing the user's eye to the most critical actions. The approachable and highly legible Nunito Sans font was selected to ensure that complex information, like the revised ingredient ratios and cooking instructions, is always easy to read. To support this friendly, engaging look, the unique illustrations for the loading screens, onboarding process, and the core Smart Swap feature were generated using Gemini Nano Banana.
Color
The primary color, #FF7800 (a bright, energetic orange), was chosen to reflect the app's brand personality: excitement, confidence, and warmth. This bold, vibrant color helps the interactive elements, like the crucial "Smart Swap" button, stand out clearly, instilling the necessary user confidence needed to overcome their fear of recipe failure. It is used strategically to guide the user's eye toward key actions and critical AI-driven information, ensuring that every user, from the budget-conscious Ben Miller to the multi-tasking Maya Patel, can confidently navigate the process of transforming a recipe.
Typography
For typography, Nunito Sans was selected for its high readability and friendly, rounded aesthetic. This font is accessible and welcoming, ensuring that complex information - like ingredient ratios and revised cooking steps- is presented in a clear, non-intimidating way, aligning with the goal of reducing the user's cognitive load.
Testing the High Fidelity Prototype
Once the wireframes had been tested and understood I finalized the high-fidelity design in Figma, using the chosen colors and font.
I used the vibrant orange (#FF7800) to highlight all the key actions, like the 'Smart Swap' button and the 'Update Recipe' button. This ensures users immediately know where to click and builds trust in the AI's complex calculations.
The clear, friendly font, Nunito Sans, was used everywhere to make sure that the new, complex instructions - especially the substituted ingredient list and corrected steps - were easy to read and didn't overwhelm the user. The final design is visually simple but strategically uses color to guide the user and create confidence in the final, rewritten recipe.
Neccessary Iterations
Several iterations were made according to user testing feedback to achieve the final prototype seen above.
I integrated the demand for social proof by updating the recipe search to prominently display ratings.
To solve the multi-swap pain point and to make the process of getting to an updated recipe quicker, the interface was changed. Users can simply check off all ingredients needing replacement on one screen, the recipe overview, replacing manual searching.
Finally, to build trust in the AI's complex calculations, every substitute option now features an information icon ( i ) that triggers a popup, providing a clear contextual rationale for how the swap works and how the recipe will be adjusted.
Which Recipe to Pick
Users don't know which of the shown recipe options they should pick since there's no metric to tell which one is good
Choosing Ingredients too Complicated
Typing each ingredient by hand is laborious and users are afraid they might forget about some as they can't see an ingredient list for the recipe
Insecurity about Substitute Options
Users are not sure which substitute to pick or how the substitution would work in the specific recipe before seeing the final updated recipe
Adding a Rating System for Trust
Users didn't trust committing to a recipe without social proof (fear of failure). They said making a choice was hard because there was no guidance or system in place to compare recipes.
​
To fix this problem, recipe search results were updated to show prominent ratings by other users to allow for better informed choices when picking a recipe base.
Making it Easier to Choose Ingredients
Users wasted time manually searching for multiple ingredients to replace or forgot adding ingredients to the search because they didn't see a full ingredient list for the recipe from the start.
​
To fix this problem, the whole recipe is shown and the ingredient list became interactive, allowing users to check off all items needing replacement on one screen (Multi-Swap) with a clear overview.
Substitutes Explained
Users didn't understand why a substitute was recommended or how it would affect the cooking process creating a lack of confidence. Some users don't want a change in consistency, for example, or wanted to know how much of the substitute they would need for the recipe before choosing to update the whole recipe.
​
To fix this problem, each substitute option gained an information icon that opens a popup with a clear contextual rationale and adjustment details.
Final Thoughts
The most valuable lesson learned was that trust and functional accuracy trump simple convenience when dealing with recipe customization. Users are not just looking for a list of swaps; they need a system that removes the risk and cognitive burden of kitchen chemistry, which validated the necessity of the Functional AI Rewrite feature.
Moving forward, the most compelling future improvement would be implementing Smart Inventory Sync, allowing users to connect the app to their grocery store's purchase history or a manual pantry list. This would allow the app to proactively identify recipes needing swaps based on ingredients they already own, making the process of minimizing food waste and sticking to a budget completely seamless and anticipatory.
