Responsive web design
SmartBeet
AI-powered meal-planning assistant designed to simplify mealtime for busy individuals and families.
Duration: Approx. 85hrs
Role: UX/UI Designer
Intro
Cooking and meal planning are not as simple as they seem…
Background:
Cooking and meal planning are essential parts of everyday life, but many people struggle to balance these tasks with their busy schedules, health goals, and budget constraints. Despite the abundance of resources like recipe books and online meal guides, individuals often face challenges that prevent them from establishing consistent, enjoyable, and sustainable cooking habits.
Key statistics highlight the widespread nature of these struggles:
60% of individuals report that deciding what to cook is their least favorite part of meal prep (Food Trends Survey, 2023).
Households waste up to $1,500 annually due to poor meal planning and unused groceries (USDA, 2024).
1 in 3 people say they lack confidence in their cooking skills, which limits their willingness to try new recipes (Nielsen, 2023).
Problem:
Busy schedules make it difficult to find time for meal prep, cooking, and cleanup, while the pressure of deciding what to cook can feel overwhelming. Poor planning often leads to unused ingredients, resulting in financial loss and guilt, and a lack of experience or knowledge can make cooking feel intimidating. Additionally, balancing meals to meet nutritional goals can be challenging without proper guidance. These obstacles reduce motivation, limit consistency, and hinder the ability to make cooking a joyful and sustainable habit.
How did I get to SmartBeet?
1
Research
2
Ideation
3
Design
Research
Benchmark
Breaking down the competition in meal planning
Interviews & Affinity Mapping
My competitive analysis of Paprika Recipe Manager, Mealime, and ChatGPT uncovered key insights into the meal planning market. Paprika offers strong organizational tools but lacks a built-in recipe database, requiring manual input. Mealime excels in simplicity and quick meal planning for busy individuals, though it has limited customization for specific dietary needs. ChatGPT provides flexible, personalized meal plans but lacks a structured interface for easy implementation. This analysis highlights the need for a solution that combines organization, ease of use, and personalization into a seamless meal-planning experience.
Decoding the everyday struggles of meal Planning and cooking
My research showed that many participants see cooking as a necessity due to time constraints, family responsibilities, or financial factors. They faced challenges with time management, food waste, and grocery shopping. While some strictly planned meals, others were more flexible or inconsistent. Most preferred quick, simple meals with minimal ingredients, and parents often struggled to make meals both nutritious and kid-friendly. Platforms like Pinterest and Instagram were common for inspiration, while many used basic tools like the Notes app for planning. The findings highlight the need for an efficient and flexible meal-planning solution that accommodates different cooking styles.
Insights from Interviews:
Most participants struggle to find time for meal planning and cooking due to work, family responsibilities, or a busy lifestyle. Quick and efficient meal solutions are essential.
Some participants have structured meal-planning routines, while others approach it more spontaneously. Those who plan meals in advance experience less stress.
Many participants cook at home to eat healthier and avoid excessive takeout. High-protein, balanced meals with fresh ingredients are common priorities.
Most participants prefer easy-to-make meals with minimal ingredients. Many use shortcuts like pre-cut veggies, frozen proteins, or batch cooking to save time.
Those cooking for families must balance different dietary needs and picky eaters, making meal planning more complex. Solo cooks have more flexibility but still face motivation challenges.
While some enjoy the cooking process, almost all participants dislike meal prep and cleanup, often citing them as the most frustrating parts of cooking.
Social media platforms like TikTok and Instagram are major sources of meal inspiration. Some participants also use online tools or AI assistants for recipe ideas.
User Personas
Two Perspectives on Meal Planning
Based on user research, two key personas emerged: Vanessa Ramirez, a busy young professional, and Emily Carter, a stay-at-home parent. Vanessa struggles with meal planning due to her unpredictable work schedule and seeks a flexible, time-efficient way to eat healthy. Emily, on the other hand, needs a structured meal-planning system to provide nutritious meals for her family while managing picky eaters and minimizing grocery trips. Both users face common pain points such as time constraints, food waste, and the challenge of balancing convenience with healthy eating. Their needs highlight the importance of a simple, adaptable meal-planning solution that streamlines grocery shopping and reduces the burden of cooking and cleanup.
With these personas in mind…
How might we help Vanessa save time, reduce food waste, and encourage healthier home cooking?
&
How might we help Emily streamline meal planning and grocery shopping while ensuring meals are nutritious, kid-friendly, and easy to prepare?
Ideation
The solution for Vanessa & Emily
Saving time, reducing stress, and achieving meal-planning goals effortlessly with an AI Assistant
The solution I came up with was leveraging AI to help users because an AI Assistant offers a smarter, faster, and more adaptable solution to meal planning compared to traditional methods. This solution provides personalized meal plans and allows users to organize their favorite meals in a separate space. By automating time-consuming tasks such as recipe selection, grocery list creation, and portion adjustments, AI reduces the burden of meal prep and streamlines the process. Unlike rigid meal-planning apps, AI can adapt on the fly, making real-time adjustments based on changing schedules, food availability, or preferences. It also learns from user behavior, refining recommendations over time to minimize food waste, optimize nutrition, and save costs.
User Flow: Create a meal plan with the AI assistant
Low Fidelity
Since this is a responsive web design project, I came up with I came up with 3 different sets of sketches:
Desktop:
iPad/Tablet:
Mobile:
during my low fidelity testing…
Realized that I need to change the way I’m testing my screens
The plan was to test the AI Assistant by completing the task of creating a 4 day meal plan for 3 different meals (Breakfast, lunch, and dinner) with each mode (desktop, tablet, and mobile) and although the participants successfully completed the task across all modes, with feedback highlighting actionable improvements such as optimizing touch targets, enhancing visibility of the AI assistant, I realized that there was a little flaw in the way I was going about testing this feature. While the prototype provided valuable insights, it primarily served to assess the overall concept rather than fully replicating real-world AI interactions. As a result, task completion times may be biased, since users were not required to perform all interactions involved in the final implementation. Overall, participants found the feature practical, offering actionable feedback to enhance usability and user experience.
For this reason next time I will be testing for accessibility, and how users interact with the overall concept of the site.
Design
Healthy, simple, sustainable, innovative, and inclusive, SmartBeet is the ultimate meal-planning solution
Why SmartBeet?
"Smart" represents the intelligent AI assistant, which helps users make informed, efficient, and personalized meal-planning decisions.
"Beet" symbolizes wholesome, nutritious eating, reinforcing the product’s focus on health-conscious meal planning.
Together, SmartBeet conveys a seamless fusion of smart technology and healthy living, making meal planning simpler, more accessible, and enjoyable.
Moodboard
This moodboard reflects the product's core identity: a blend of simplicity, warmth, and health-conscious living.
Style Tile
Color palette:
#9AD349 (Vitality Green): This fresh and vibrant green symbolizes health, sustainability, and vitality, reflecting the core mission of promoting nutritious and eco-friendly eating habits.
#FD9842 (Zest Orange): This energetic orange evokes creativity, optimism, and warmth, emphasizing the active and empowering experience the product provides while fostering a welcoming vibe.
#FFFAFA (Pure Glow): This soft white brings simplicity, clarity, and balance to the palette, ensuring a clean and uncluttered interface that highlights the content and enhances usability.
#42250C (Earthy Cocoa): This earthy brown ties the design to natural and wholesome elements, grounding the color palette with a sense of warmth, trustworthiness, and connection to real, organic food.
Fonts:
"Baloo”: with its playful and rounded design, is perfect for the main headings, as it conveys a sense of approachability and friendliness, aligning with the product’s mission to make meal planning inviting and enjoyable. Its fun and bold nature also helps the headings stand out, drawing attention to the most important information on the site.
Poppins": used for subheadings and body text, offers a clean, modern, and highly legible design. Its versatility ensures that detailed information remains clear and easy to read across all devices, while its contemporary aesthetic complements the approachable yet professional tone of the platform.
Logo
Wordmark: Designed with the Baloo font, reflects the product’s fun, approachable, and family-friendly nature. Its rounded, playful style reinforces the idea that meal planning can be enjoyable and stress-free. The stars incorporated in the wordmark symbolize the "magic" of AI technology, representing guidance, inspiration, and innovation, much like how AI assists users in making healthier and more efficient choices.
Logo Mark: Featuring a beet with stars at its center, visually connects wholesome nutrition with advanced AI. The beet symbolizes fresh, nutritious eating, while the stars highlight the power of AI technology in simplifying meal planning. This combination represents the product’s mission to blend nature and technology, making healthy eating effortless, innovative, and accessible.
Components
High Fidelity
Putting it all together and bringing SmartBeet to life
These high-fidelity screens bring SmartBeet’s vision to life, showcasing a clean, intuitive interface designed for effortless meal planning. I made sure that every element, from clear navigation to visually engaging meal suggestions, reinforces the product’s mission to make healthy eating simple, enjoyable, and accessible. These designs reflect user insights, ensuring clarity, ease of use, and an inviting aesthetic that encourages long-term engagement.
Desktop
Tablet/iPad
Mobile
Time to Test These High Fidelity Screens
Ensuring the current design remains effective and user-friendly
Participants easily completed the meal planning task using the AI assistant across desktop, tablet, and mobile, praising its intuitive interface and seamless workflow. The assistant was easy to locate, and its purpose was immediately clear, making the process smooth and efficient. Since users encountered no major difficulties, the focus will be on maintaining the design’s effectiveness rather than making significant changes. While the prototype provided valuable insights, it primarily assessed accessibility and concept viability rather than fully replicating real-world AI interactions, which may have influenced task completion times. Still, this high-fidelity prototype offered a more realistic user experience than earlier testing phases, reinforcing SmartBeet’s usability and efficiency.
Final Prototype
SmartBeet Overview
Reflection
Understanding real-world behaviors and crafting experiences
This project help me reinforce the value of user testing. I helped me realize that I could not test the full potential of the AI feature since unfortunately I’m not able to replicate real artificial intelligence interactions, but it still helped me replicate core experience. Additionally, designing across multiple devices highlighted the need for consistent yet adaptable layouts that maintain usability regardless of screen size.
SmartBeet was a great reminder that successful design isn’t just about aesthetics, it’s about understanding real-world behaviors and crafting experiences that make everyday tasks easier and more enjoyable.