Recipe App
A supportive approach to cooking.
My Role
Designer, Researcher
Team Members
Rollin’ Solo
Tools Used
Figma
Timeline
2 weeks
Purpose Of this Project
In recent years, my love for cooking has grown, inspiring me to create Off The Pan—a culinary app with diverse recipes and filters for all experience levels. This innovative platform is designed to delight a broad audience, from busy moms to casual home cooks. Creating a successful recipe app as a product designer involves a combination of thoughtful design principles, user-centric features, and a seamless user experience.
Competitive Analysis
To enhance the features and services of the app, I conducted thorough research and comparative analysis. My focus was on studying two successful platforms, namely "Tasty" and "Yummly," both dedicated to cooking and food recipes.
Kitchen Stories
The good
Meal Planning: Some versions of the app may include features for meal planning, allowing users to organize their weekly meals and create shopping lists.
The bad
User Interface: The recipe interface screen is too long for a user to go back and forth from ingredients to instructions. It would be helpful to have checklist functionality for the items/directions as well.
Yummly
The good
Recipe Saving and Organization: Users can save their favorite recipes to collections or folders for easy access later. The app may provide features for organizing recipes, creating shopping lists, and planning meals
The bad
Complex Navigation: While the app aims to provide a personalized and tailored cooking experience, some users have found the navigation to be a bit complex. The abundance of features and options may lead to a steeper learning curve for new users, and finding specific functionalities within the app could be challenging for some.
User Research
Who are you designing for?
I am designing for users of all levels who have an interest in cooking recipes. The product can be useful for people who want home-cooked meals but don’t have the time to go out and buy groceries.
Where will your audience be using what you’re designing?
Either at home, in any kitchen, or grocery/shopping store.
What kinds of tasks and goals will your audience be accomplishing as they use your website or app?
In the end, the user will create and learn how to make their personalized homemade meals. They will also be saving time and money by ordering food through the product and developing their meal plans.
Why is your audience choosing to use what you’ve designed and what drives this behavior?
The audience is looking for new food to make. They’re looking to expand their knowledge of food as well as organize their cooking and meal prep time around their busy lives.
How will your user accomplish their goals?
The goals will be accomplished when the user is finished cooking, has ordered food for the next meal, and completed another week of meal plans.
When will your audience be engaging with your product?
Users will find themselves using this product whenever they’re home, most likely after work or on the weekends. They could be shopping for groceries as well and looking for a specialized meal to prepare.
User Personas
User Stories
Low-fidelity wireframes
Once the flow diagrams were established, I started creating the low-fidelity wireframes of the main flows.
High-fidelity UI Design
Once the initial flows were completed, I started by creating a couple of main screens of the app. I started by defining the fonts and colors.
Color
Accent, primary, secondary, tertiary, background
Buttons & Icons
Font
Graphix Regular, Medium, Bold
Farm kitchen look & feel
The style was achieved by using red and white colors with friendly rounded design elements.
30 high-fidelity designs were created
Including three different navigation patterns (categories, advanced search functionality, and organizing/saving needs) that could be used for A/B testing in further design stages.
