RecipeBox.
Figma
Illustrator
Balsamiq
Illustrator
Balsamiq
Product design for recipe storage + planning
Description
RecipeBox is a recipe storage website I created for my Interaction Design class. For home cooks who store their own recipes, RecipeBox is a recipe storage site that offers customizable filters and organization tools. Unlike Allrecipes, RecipeBox’s main feature is organization and storage of the user’s own recipes, rather than having this as an underused and underdeveloped side feature.
Anonymous home screen
Home screen
Recipe screen
Recipe with expanded step modal
process
🌷Empathize
Critical to the assignment was not having an idea in mind at first. I created personas from people I saw in my own life, from my roommates to my grandfather, and then sketched out ideas for products that may help them. I fleshed out each sketch with workflows, triggers, and what pain points it would address. In class, we critiqued each others' ideas and I took this feedback into account when deciding which idea to pursue.
Personas
Idea sketches
🌷Define
I decided to pursue my idea for a recipe planning tool. I conducted interviews and revised my personas accordingly. The main pain point that came out of interviews with my target demographic was losing track of favorite recipes. One of my interviewees printed all her recipes found online and added them to a binder with handwritten recipes, however her spreadsheet table of contents quickly became out of date. Another interviewee, a college student, wrote down all her recipes in the iPhone Notes app or kept them open as tabs on Safari, allowing them to get lost among hundreds of other notes and tabs.
One of my main concerns was if users would want to spend the time to initially input recipes into the product, but I gleaned from interviews that people already spend quite a bit of time organizing their recipes, but there is no good way to do so.
🌷Ideate
I created a roles & goals matrix and a workflows brainstorm to delve deeper into potential users and how they may want to interact with the platform in order to develop the point-of-view:"Home cooks and budding chefs need a way to organize and access recipes because most users have yet to find a product that meets this need."
Roles & goals
Workflows
I looked at All Recipes and the Food Network to complete a competitive usability evaluation. I have since discovered NY Times Cooking, and wish I had benchmarked it as well! The two workflows I evaluated were adding a custom recipe and adding ingredients to a grocery list.
Main takeaways:
1. When adding a custom recipe, automatic formatting of steps and ingredients is key for usability. This needs to be a main feature, but tended to be hidden within the site.
2. When adding ingredients to a shopping list, quantities should be secondary to type of food, items should be separated by category or aisle, checked items should be less visually evident but not disappear, and feedback that items from a recipe have been successfully added to the list is necessary.
🌷Prototype
"For home cooks who store their own recipes, RecipeBox is a recipe storage site that offers specific and custom filters to navigate recipes. Unlike All Recipes, RecipeBox's main feature is organization and storage of the user's own recipes, rather than having this as an underused and underdeveloped side feature."I created a site map and hand-drawn wireframes. My classmates and I helped each other out by sketching UI ideas for each others' products and presenting them. These outside perspectives provided ideas I loved but never would have thought of, from overarching functionalities down to minor UI elements, such as a recipe box skeuomorph on the anonymous home page and the flow for creating a new recipe.
(Left) Site map
(Right) Wireframes
I did a type study to choose type styles for the site and a Crazy 8's exercise with my classmates to draft an identity mark. The final mark, an empty plate, stands for the site's goal of simplicity in cooking. I left color choice up to my personal aesthetics, but made sure to run accessibility checks on colors and type.
I kept accessibility front-of-mind as I created the high-fidelity screens. Each step in a recipe can be expanded into a focus mode and ingredient quantities are found both in the side bar and within the recipe itself. This cuts down on the eye strain, overwhelm, and distraction caused by text heavy pages and needing to constantly look back and forth between steps and ingredients.