Tastebook is Pinterest integrated hand’s free cooking application and recipes manager. Users can export and store recipes from Pinterest or other websites, create their very own recipe book, and enjoy a voice enabled hand’s-free cooking guide. The goal of Tastebook is to give users the necessary assistance and organizational tools to enjoy a smooth mobile cooking experience.
UX/UI Designer
10 weeks
Tools: Sketch, InVision
Systems: Google's Material Design
This idea was born from my love of cooking and a need to streamline the mobile recipe process. I am always looking for new recipes and have wanted to consolidate everything in one place - a recipe book. I ran into a few preliminary problems myself: currently all my recipes are scattered - saved on my phone, Instagram, Pinterest, in a physical family recipe book, etc. I wanted something more easily accessible than a physical recipe book. I needed a way to save recipes from Pinterest or the web, while maintaining all the needed values and fields in the recipe, without adjustment.
Second, since I keep all my recipes somewhere on my phone or the web, I would cook right from my phone. This posed several problems of not having the recipe and ingredient list fit the screen, and worrying about the screen timing out after a while. This was frustrating while I was preparing a dish.
The target demographic for Tastebook includes people who cook and / or bake and need help managing all their recipes. Cooking is a regular activity for this audience segment, and something that they love or want to do. They care about saving recipes and organizing them in a way that helps them. These people regularly use social media like Pinterest and Instagram to search for fresh ideas.
I conducted a survey to learn about people's recipe keeping and sharing. My goals included:
1) Recipe keeping processes
2) Users’ cooking process
3) Pain points and challenges with mobile cooking
4) What other applications are my users using
share recipes directly from social media
like the portability and mobility of using a phone
want the ability to export recipes from websites
like having access to photos or videos of the final recipe
The main takeaway from the survey was that people want a balance between structure and freedom when it comes to recipe formats. My users want to be able to export recipes from external sites or blogs and maintain all needed fields, without the hassle of rewriting the recipe themselves. Once it is in the app, they want the freedom to edit and organize their recipes as they wish. It is also important that the sharing is simple and maintains the recipe format.
Visuals play an important part in the experience. Users want a clean interface that is easy to navigate and look at. Including photos in the recipe helps the overall recipe book experience feel complete and customized.
Finally, when it comes to cooking, my users love the portability and mobility of having their phone in the kitchen.
According to a study by Google
Nearly 60% of millennials bring their smartphone or tablet into the kitchen
Phones are used to search, store, and cook the recipes. I want to use this opportunity to create a new cooking and recipe experience right from your phone.
According to the study by Google, for a quarter of online millennials, the most important part of mobile cooking is providing a better experience across the board - from storing recipes, to editing, and cooking. Users want to personalize their experience as much as possible.
Paper prototypes on phone cutouts
Exploring 3 design approaches for the homepage
Add New Recipe Flow
Cook Mode Flow
Usability test using paper prototypes
Usability test using Marvel app
For the first round of mocks, I gave Tastebook a fun and energizing feel. I chose bright colors and hand-written style font.
After user testing my mocks, I received feedback on the flow and UI. As part of my iterations, I worked on:
I chose a deep pink for the main color to make it pop against a soft white background. The yellow and orange act as bright contrasts to each other and pop against the pink.
Tastebok's style follows Google's Material Design - from text inputs to tabs and interactions. Opens Sans is the main typeface, which is a Google font. It is simple and easy on the eye, especially for data entry heavy tasks.
I included thin iconography that features kitchenware and utensils
This was among my early projects born out of a personal problem I ran into during cooking. Cooking is a topic I love so I wanted to create a project centered around this idea. After surveying other food bloggers, I noticed common patterns and overlap with similar issues others were experiencing. This drove me to explore the problem further.
For the design process, I explored various design-thinking exercises like storyboarding, paper prototyping, surveys, competitive analysis, and more to learn about my topic and users. Paper prototyping helped me craft those initial designs and decide how to move forward. By testing in person and on Marvel, I was able to receive feedback to fuel my next designs.
After the initial round of designs, I received more feedback and updated my UI elements to be more streamlined and sophisticated. I chose to follow Google's Material Design.
