Major Meal Manager
Cooking for a crowd has never been easier.
This is a class project conducted individually within four weeks. My primary responsibilities include:
Designed a high-fi prototype as a design solution within technical and business constraints
Established a UI design system
Conducted competitor analysis and preliminary research based on the design brief provided
Tools
Figma, Procreate
Sector
Meal planning
Timeline
March 2024
Market Research
The design brief was simple: create a site for planning a multi-course menu for a group. I conducted a competitive analysis of current services, including Eat This Much and Mealime, to understand market opportunities.
Both sites effectively use vision statements and CTAs to resonate with users' needs while offering personalized recipes and meal customization.
However, both also face challenges such as information overload, over-complicated navigation systems, and limited flexibility for personalization.
Eat This Much
Mealime
Design Ideation
To best identify the most urgent user pain points, I reviewed the two competitors’ social media accounts and product reviews and found that many users:
hope to explore new recipes while being able to cook them well;
need a more streamlined way to identify and swap allergens for group meal planning;
want to save money by buying in bulk or avoiding over-purchasing.
With that knowledge in mind, I developed three key ideas to address these concerns:
"Cooking for a crowd has never been easier."
Clickable Prototype
A well-designed structure makes the service more intuitive. While I drew many inspirations from competitors, I aimed to avoid their common pitfalls as I mapped out the site.
I created straightforward labeling for cuisine types and simplified the information architecture for both recipes and meal plans.
Using the map as a structure, I designed the high-fidelity prototype, which allows users to complete three tasks:
1. Browse. Users look for meal plans they are interested in through the customization tool, the home page, or the recipe page.
2. Purpose. Users choose a meal plan and explore its recipes and ingredients, make changes accordingly.
3. Commit. Users save a recipe and export a grocery list.
(The clickable prototype is shown below, and also available in Figma)
Establishing User Interface
Lesson Learned
Ensuring visual consistency in UI elements can effectively enhance user navigation and experience. Standardizing interactions and animations allow users to predict behavior, improving usability and satisfaction.
Creating reusable components is crucial in UI design, for it reduces redundancy and streamlines workflows for both design and development teams, allowing quicker and more efficient implementation of changes and new features.
Emphasizing responsive design ensures components work well on various devices and screen sizes, maintaining a consistent and high-quality user experience across platforms.
Other Projects Like This
Free City
An app that helps you find the latest discounted cultural activities in Toronto.
Growth Redesign
Landing pages designed for an end-to-end subscriber experience to boost engagement and conversion.