Cookery | Experience the Art of Cooking
Role | UI/UX Designer
Timeline | 4 Months
Tools | Adobe XD
The Beginning
Competitive Analysis | User Research | Gathering Requirements
Competitive Analysis
Several methodologies were deployed to analyze 2 of Cookery's potential competitors: Forks Over Knives & Kitchen Stories. A high level overview of where these apps have positioned themselves within the market, UI/UX analysis, SWOT Analysis, as well as analysis of User Psychology.
Forks Over Knives
Strengths
Attractive Recipe Images & Inviting Color Palette
Weaknesses
Bland search function with no suggested categories/meals to inspire users
Opportunities
Verbage such as "See Article" is unclear
Threats
$4.99 is a steep price for something that is available for free elsewhere
Kitchen Stories
Strengths
Filters cater to all dietary preferences & it's free!
Weaknesses
Brand recognition
Opportunities
Better pairing options as opposed to seemingly random suggestions
Threats
All other social media savvy recipe providers
“Dietary restriction conscious cooks need a way to find and cook meals that are safe for them and their meal partners to eat and enjoy.”
Problem Statement
User Personas
User interviews were conducted to establish Cookery's user base and create user personas. Key findings from user interviews such as users utilizing multiple devices throughout the recipe research/execution process and the need for filtering by dietary restriction helped reveal who our user personas would become.
Gathering Requirements
-
Users will need access to the app on the go in order to search for and save recipes wherever they are. Users will want to access their curated shopping lists while in store shopping for ingredients. The most important place this product will be used is in the kitchen while preparing for and executing a meal.
-
Cookery will be a Responsive Web app utilized on phones, tablets, and desktop/laptop. Most users will utilize more than one device to work their way through searching and executing a recipe with this app.
-
Individuals cooking for themselves or their household who are dietary restriction conscious and often tailor their shopping lists around specific recipes
-
Cookery will Provide step by step instructions and will list ingredients and nutritional information. Cookery will allow users to curate shopping lists as well as save and share recipes.
-
Cookery will streamline the shopping to cooking experience allowing users to find and prepare meals made with ingredients they control
“Cookery will allow users to search for, save and share recipes. Users will be able to filter their search results as well as find ingredient alternatives in order to find delicious meals that are safe for them to eat. Cookery will provide users with beautiful, easy to follow instructions as well as a way for users to curate shopping lists built around their chosen recipes.”
Minimum Viable Product Statement
Jobs To Be Done
"When I search for recipes, I want to filter the results, so I can know whether the results meet my dietary restrictions."
Standard search function with filters
"When I find a recipe I like, I want to be able to save it, so I can find it later."
Recipe bookmark for saving and storing favorite recipes
"When I find a recipe I think someone else will like, I want to be able to share it with them, so they can enjoy a delicious meal."
Social Media integration & in app user sharing
"When I find a recipe I like, I want to make a shopping list based on the ingredients, so I can ensure I have everything I need."
Ability to create shopping lists based on recipe ingredients
User Flow
The Middle
Wireframes | Prototypes | and More
Paper Prototypes
"When I search for recipes, I want to filter the results, so I can know whether the results meet my dietary restrictions."
"When I find a recipe I like, I want to be able to save it, so I can find it later."
"When I find a recipe I think someone else will like, I want to be able to share it with them, so they can enjoy a delicious meal."
"When I find a recipe I like, I want to make a shopping list based on the ingredients, so I can ensure I have everything I need."
Low Fidelity Wireframes
Utilizing the method of Crazy 8's I was able to iterate and refine the skeleton of Cookery. The dot method was employed to select my favorite aspects from my Crazy 8's sessions. These findings were used to solidify the features and layout for my low fidelity wireframes.
User Sign Up
Home
Search | Filters
Search | Results
Recipe | Details
Recipe | Instructions
Recipe | Saved
Pop Art Mood Board | Blue & Yellow provide strong contrast. | Fun, playful, artsy imagery.
Minimalist Mood Board | Less color offers even cleaner and more crisp appearance.
A/B Testing
User testing was conducted with Usability Hub to help solidify a design direction. Although results were polarizing amongst testers, comments on WHY users preferred A or B helped with refining the design of Cookery.
Style Guide
The End
Mockups | Responsive Design | Reflection
Mid-Fidelity Wireframes
This is where Cookery really started to come to fruition. Layout and spacing was defined, initial logo was designed, and typography selected. Some aspects didn't make it into the high fidelity versions of these screens such as the Navigation Bar at the top of the screen, the heart icon was also swapped out for a bookmark icon in the final designs.
User Sign Up
Home
Search | Filters
Search | Results
Recipe | Details
Recipe | Instructions
Recipe | Saved
High Fidelity Mockups
Some of the biggest breakthru's in the final mockup stage include the revamped navigation bar and the simple yet playful color pallette. Creating mockups in XD presented numerous challenges including the inability to properly export mockups to PDF, in the future I will explore different design tools to ensure my designs maintain their high quality.
User Sign Up
Home
Search | Filters
Search | Results
Recipe | Instructions
Recipe | Details
Recipe | Saved
Responsive Design
After spending several months working on designs with a mobile first approach my skills were put to the test adapting my designs for larger format devices. Utilizing Adobe XD's built in Responsive Resize feature I was able to recreate and reinvent my screens for multiple breakpoints.
Reflection
-
I was able to create an app that meets my definition of a minimum viable product. Users are able to search for, save, and share recipes, filter search results and swap ingredients for alternatives. Cookery’s typography, color palette, and image curation offer a beautiful recipe research and execution experience for the user.
-
The biggest roadblock for this project was learning Responsive Design. Having spent a ton of time learning the proper way to design mobile screens, I felt ill equipped to design larger breakpoints. After several attempts to connect with and learn this practice from my mentor, I was best able to learn this concept from a few YouTube videos and simply but persistently fine-tuning my designs at larger breakpoints in XD.
-
I think I may have started out trying to break the mold a little too much which may have slowed down the development and design process. On future projects I will rely on time tested layouts and user research for defining the design of my apps so as not to get caught in a cycle of attempting to reinvent the wheel.
