Mealogy
A web-based solution that enables users to minimize household food waste and save money by planning meals, generating accurate shopping lists, and providing expert preparation tips.
• Project: Web App
• Role: UI/UX & Product Designer
• Tools: Figma Adobe CC, Miro, Maze, Canva
.png)
Introduction
Cooking at home offers health and financial benefits, yet the U.S. generates 60 million tons of food waste annually, largely due to impulsive food purchases.
Challenges
Consumers often buy food impulsively, often in excess or without a plan. Combined with misconceptions about expiration dates, this leads to the world's largest food waste, impacting household finances and increasing the carbon footprint.
Role
As a UX/UI web designer, I explored user needs in home cooking, developed key solutions to their challenges, and designed a web app that meets them exactly where they are.
Cooking at home offers health and financial benefits, yet the U.S. generates 60 million tons of food waste annually, largely due to impulsive food purchases.
Goal
I want to tackle this issue at the household level. By helping users know exactly what they’re cooking, how much food to buy, and how to store it properly, they can reduce food waste and save money.
Outcome
This case study successfully addressed user needs by enabling them to explore diet-tailored recipes, add meals to a calendar, and generate a precise shopping list.
80% of users successfully complete key tasks such as signing up for the meal plan service, browsing recipes, and interacting with meal plan calendars, significantly more than the initial design implementation.
User Survey
Results show that frequent home cooks struggle with gauging ingredient quantities. Without recipes, some find it difficult to improvise and pair ingredients.
Nearly all survey participants reported at least one dietary restriction or preference, and 95% stated that a meal plan would help them stay organized and manage daily meals.
Based on the result, I create a list of key features to include in Mealogy's services that address user needs.
Auto-generated grocery list
Special diet options
Meal plan
Cooking time
Curated recipes
Adjustable serving size
Cooking tips & storage guide
Edit recipes
Nutritional values
Dietary substitutes
Competitor Audit
I conducted a competitor audit (Cook Smarts, Stashcook, Mealime, and Paprika) and compare different service prices and payment plans. Based on this analysis and user survey results, I incorporated key service selling points to boost engagement and increase sign-up rates.
Most customers are more willing to sign up for services that offer free products with an upgrade option. They are also more likely to try services that include a free trial period. Survey results indicate that nearly all users prefer a seamless experience across both web and mobile app versions.
Free trial period
Free with available upgrades
Share & download recipes
Web & mobile app access
Personas & User Journey
Analyzing the user survey, I focused on busy individuals and large families, both facing time constraints. Busy individuals prefer quick, simple recipes, while large families benefit from organized shopping and weekend meal prep.
A diverse recipe selection, combined with a structured weekly or monthly meal plan, can help users plan ahead and integrate healthy eating into their busy schedules.
User Flow
Since Mealogy is a paid web service, I designed the initial flow to guide users through signing up and creating an account before accessing full recipes and meal planning features.
After the signup process, it's crucial that users are able to browse recipes, add them to their meal plan, customize calendar, and access shopping list.
Each recipe must include key features such as 'Add to Calendar,' ingredient list that can be imported to the shopping list, edit function, and essential details like cooking tips, substitute options, storage guides, and nutritional values.
Wireframes & Early Testing
I designed wireframes for the initial user flow to optimize Call-to-Action (CTA) features, while considering competitor designs.
Early usability testing on the wireframes showed that while the layout meets the standards for readability, the web flow need to be more accessible, more impactful CTA design.
Design Decisions
Sequential Website Structure.
I implemented a sequential signup flow to guide users through each call-to-action step, ensuring clarity and improving completion rates.
As a result, the user screen capture below illustrates how smoothly and efficiently a participant navigated the signup process during prototype testing.
Color Palette
I chose yellow (#DDB764), red (#B65A5A), and green (#47715B) for the web app.
Yellow and red are widely used by major food companies like McDonald’s and Chick-fil-A because they stimulate hunger and create a sense of urgency. With that in mind, I used red and yellow for the Call-to-Action and Browse Recipe buttons to encourage users to sign up and explore recipes.
DDB764
B65A5A
47715B
In contrast, green is associated with positive emotions, healthy eating, and trust. Therefore, I used green for most buttons and interactive components to reinforce trust and assure users of the quality of Mealogy's recipes and services.
Typography
I selected Libre Caslon for headers and a combination of Libre Baskerville and Libre Franklin for body text. These fonts enhance readability while evoking a timeless, elegant aesthetic. This design choice appeals to an older audience familiar with traditional cookbooks, encouraging them to embrace Mealogy as a modern take on a classic experience.
Paired with a clean white background and a palette of primary colors, the typography reinforces a sophisticated look that elevates the brand identity and fosters trust with users.
Commands like edit, print, share, and remove from meal plan are represented as icons to keep the recipe page clean and enhance the user experience.
Minimalist background design, highlighting the action button
An easy-to-adjust serving size feature automatically updates ingredient measurements and the shopping list.
Dietary information and cook time are placed beneath the image to establish visual continuity and cohesion.
.png)
Used icons to indicate diet and allergen information, keeping recipe thumbnails and titles clean and minimalist to enhance visibility and improve navigation.
Applied visual unity to recipe images to create a cohesive look and help users navigate recipes more easily while browsing.
Layouts and Iconography
Outcome
The Good
After developing the prototype, I conducted another usability test to evaluate the effectiveness of the refinements made after the initial testing. I designed two tests: one focusing on functionality and the other on UI design. The results were overwhelmingly positive, confirming that the refinements were successful. Users found the website both functional and visually appealing.
The Bad
The results also highlighted areas for improvement in navigation design to enhance accessibility. For example, users struggled to locate the weekly and monthly calendar buttons, making it difficult to switch between views. Additionally, one user noted that the font size was too small, which reduced readability and overall accessibility.
These statistics highlight potential usability issues that should be addressed to improve the user experience.
80% of users successfully completed key tasks such as signing up and creating meal plans.
80% of users found it very easy to navigate the website and complete the key tasks.
On average, 48% of users misclicked while navigating through key tasks.
20% of users left without completing key tasks.
Achievement
I successfully designed a functional web prototype that incorporates key features defined in the earlier stages. The web flow effectively guides users through the signup process, recipes, and accessing meal plan calendars.
Additionally, I implemented seamless interactive features that further elevate user engagement and usability.
I addressed usability issues identified during early testing and resolved them throughout the design process. For example, I improved the visibility of the CTA and action buttons to help users complete key tasks more easily.
Drag-and-drop functionality allows users to easily adjust recipe placement.
The interactive shopping list automatically moves checked items to the bottom, enhancing the user experience.
A full pop-up filter allows users to set multiple preferences while keeping the page clean and minimalist.
Monthly and weekly meal plan calendars offer slightly different functionalities to enhance usability.
Challenges
While designing the prototype, I struggled to find the best way to add recipes to the meal plan. The calendar feature was a good start, but requiring users to click three times. Moving forward, I need a more efficient solution that allows users to easily add recipes while selecting the specific day and meal.
Additionally, I realized that some components were too large compared to the screen size, impacting visibility and overall user experience. In retrospect, I should have kept text sizes under 16px and scaled components like calendars to fit above the fold, enhancing both accessibility and usability.
.png)
Conclusion
Mealogy has strong potential to support users with cooking, meal planning, and reducing food waste. With ongoing refinements, user testing, and a focus on usability and accessibility, I believe Mealogy can empower users to lead a healthy home-cooking lifestyle while saving time and money. By addressing the challenges of home cooking and meal planning, the platform also contributes to reducing food waste in the U.S.
Additionally, I plan to further develop a complementary mobile version of Mealogy, allowing users to browse recipes and access meal plans and shopping lists on the go. This would create a seamless, continuous experience, improve accessibility, and increase usage across devices—enhancing key KPIs and the overall user experience.
Thank you for walking with me through this case study!
Read my other projects
KUNGBREW CAFE
I redesigned KungBrew’s website and brand assets, creating a CTA-driven, cohesive experience with an optimized logo and scalable design system for long-term growth.
URHOME
I designed the UX/UI for a mobile interior design app that helps users make eco-friendly choices, reduce fast furniture waste, and support sustainable brands.