QUICK REVIEW
CookBook
They have allllllll the features you could possibly imagine, but it’s not always intuitive to use!
QUICK REVIEW
Yummly
Cute and great for actually shopping! But missing some key features (edit recipes, view directions in-app, changing ingredient list, etc).
QUICK REVIEW
RecipeChef
Detailed recipe categories. A lot of oddities in the user experience, but overall not too bad.
QUICK REVIEW
OrganizEat
Too many usability issues! Lots of design oddities and unexpected / unpredictable behaviors.
QUICK REVIEW
RecipeBox
A very cluttered interface. Had a 'discover new recipes' feature which took up a lot of the app and is not what I'm interested in.
QUICK REVIEW
Samsung Food
Had the 'discover new recipes' and a blog/articles feature that took up most of the app. Extremely hard to create a meal plan.
The features are bucketed into common pages/flows I noticed throughout all apps:
View All Recipes
Recipe Creation Flow
Recipe Detail Page
Grocery List
Meal Planner
BRAINSTORM
Opportunities
Focus on usability!
Create a useful dashboard/homepage
Simplify recipe creation
Easily browse current recipes
Allow users to access the full recipe and edit it
Help with ideation during meal planning?
Make the grocery list practical and simple
Prioritize key actions, and hide others
Use color and type to enhance, not as a focus
Defining the brand
To put purpose behind the project, I tried to mimic the skills of my product and brand manager peers and used Notion to develop the company mission, principles, and brand pillars.
Planning, scoping, and prioritizing
Leveraging the insights from the discovery phase, I developed a detailed list of design tasks, prioritized them from P0 to P3, and estimated the level of effort (LOE) for each. This approach proved invaluable for planning and tracking progress on a project of this scale.
Brand design inspo
I sought branding inspiration from other food-related products and found myself most inspired by the natural colors of fruits and vegetables. To refine my color palette, I used a color picker tool to test hues directly from food images.
Wireframing the primary screens
With a mobile-first approach in mind, I used Figma to create basic wireframes for the app's primary screens and flows.
Here's where I landed on a few of the primary screens:
WIREFRAME
All Recipes
A view of all the recipes a user has added.
Tabs for All, Favorites, and Categories (based on meal type only for the first iteration)
Ability to both search and filter
Ability to add recipes to meal plan or glist on each card
Ability to add new recipes here
WIREFRAME
Recipe Detail Page
View and edit each recipe's details.
A view to see and edit all of each recipe's details
A tab to view the recipe's ingredient list
A tab to view the recipe's cooking directions
Ability to add recipe to meal plan or glist from here
WIREFRAME
Add New Recipe
Add new recipes to the collection.
Ability to add recipes by entering the details manually
Ability to add recipes by entering a URL from a blog or site
Options to add image, meal type, serving size, and total cook time
Ability to add both ingredients and directions one by one, or by copy/paste in a large text area
WIREFRAME
Meal Plan
Plan meals ahead of time.
Ability to plan/view meals by the day
Ability to plan/view meals by the week
Ability to add recipes from this view
WIREFRAME
Grocery List
Create grocery lists based on recipes.
Ability to add all ingredients from a recipe to the grocery list
Tabs for viewing All items, items by Aisle, and items by Recipe
Ability to check off items, rearrange items, and add custom items not from a recipe
Identifying component needs
We decided to utilize an existing component library to streamline development. I explored Google's Material 3 design system and compared its components to those in my wireframes. Material 3 provided nearly everything we needed and was also easily customizable to align with our brand.
Color
The key to effective color usage for this app was ensuring that recipe images remain the focal point. We achieved this by using a black primary color, incorporating neutral tones extensively, and including accents inspired by real foods.
Typography & iconography
I chose a modern sans-serif typeface with clean lines and balanced proportions. Combined with the rounded styling of Material 3 icons, this typeface contributes to a friendly and approachable aesthetic.
Responsive grid system & element styling
I created grid and spacing guidelines based on a 4px scale, and defined rounded and elevated styles to help add a modern, friendly character to the product.
Creating components
Starting with Material 3 components as the foundation, I configured each one according to our defined foundations and styles. Additionally, I developed a few custom components to fill in the gaps where Material 3 didn't meet our specific needs.
