oChef
— Guided cooking
Overview —
oChef is a touch projection interface that works as a cooking assistant that helps you prepare
your recipe with an intuitive and helpful step by step process.
The interface is an add-on tool for
recipe cooking mobile applications like Tasty or Yummly. The system allows you to create your
profile according to your personal preferences and guides you throughout the cooking process, starting from
selecting your recipe until having your meal ready to be served.
Create your profile.
Diet habits, allergies, personal preferences and cooking tools can be personalized when you create your oChef profile.
Connect any mobile app.
Your recipe is in a mobile application? Just send the recipe to oChef and cook your favorite meal.
Cook your meal!
Real step-by-step videos and clear instructions to guide you through the cooking process.
Project goal
Improve the step-by-step experience when cooking and combine it with an innovative technology that allowed the users to interact in a fast an easy way while preparing their food. Creating a positive experience in the user would encourage the continuous use of this tool and develop healthier diet habits.
— Skip the Design Process
Design Process —
Process & Context
The recipe world has changed dramatically due to technological advances, starting with books that explained how to prepare your dish until having hundreds of mobile applications and websites that explain step by step (even with videos) how to prepare that recipe that will take away our craving feeling.
Market research
Taking Tasty and Yummly as a starting point for the project, the analysis of both platforms gave us a clear idea, basic content and several features for a recipe-based cooking system.
Technology research
One of the first ideas and approaches was interactive projection, we also had access to a product with this technology. After analyzing its added value, we decided to use it for two main reasons: learn about the possibilities and limitations of this technology and also guide the project towards functional prototype and not only a virtual concept.
Research results
The project was not intended to create a new platform, but to work as a tool that could connect to existing applications and focus on the user experience when performing the step-by-step process in a digital and innovative way.
It's important to highlight the fact that throughout the project, the Sony Xperia Projector allowed us to define some ground rules to use this technology and apply them into the design concepts.
User analysis
Analysing different ages and “cooking expertise” levels for the personas gave us a wide range of needs in a real life situation. Diet habits, allergies, personal tastes and amount of portions were concepts that started popping out with those user needs.
Cooking scenario
To validate the user needs, we decided to go through the cooking process ourselves. We used the personas to ask the questions they could have during the process. The whole process was divided in two main parts: “pre-cooking” where the user prepares the ingredients and sets everything to start cooking & “cooking process” where the user goes through the step-by-step cooking.
Features needed
Based on the scenarios we did a brainstorm of features that would improve the user experience. After analysing the brainstorm the features were filtered between the ones that were necessary and the ones that were not necessary, based on the "user questions" mentioned above to finally decide the final features for the system.
Information architecture
After analysing the user journey (cooking scenario) and the user needs (features) we created the flow for general use cases. Before creating the final information architecture we validated the features with some possible users.
Design iterations
Once we had the technology, the user needs and the basic content, we created concepts for the interface design. We started creating sketches on paper to analyze them and turn them into digital low fidelity wireframes.
Wireframes
The main challenge was to decide which information was necessary for the user. At first we wanted the user to have a working space at the bottom, but then we decided to give more space to the instructions and the steps. We tried some variations for the timeline element on the top. Finally we placed clear and simple CTA’s (Call to Action) for the user inside the step-by-step process.
First visual aproach
& Animations
At first we wanted the users to create their own recipes with a modular animation system and share them inside in a possible social platform created for the system. We got rid of the social platform idea and continued with the abstract animations, but during this process we realized that it was better to use real life videos and images to help the user get the information in an easier way.
Interface research
Moodboards for the look & feel to get a sense of how the interface could look like. The layout, animation and visual elements were based in the decisions from previous phases.
Final concept validation
At the end of the iteration process we tested the concept with some target users to develop a functional and good-looking solution for the overall visual interface.
Visual Interface —
Final design
The projection technology defined some key aspects for the final visual interface, for example the background. Most projectors take black as absence of light, so we used it as the background color to create a floating effect. Interface colors, photos and videos were tested several times with different surfaces and light scenarios.
Final Result —
Cooking assistant
The final concept can be divided into oChef's three main features: the profile creation, the mobile app connection and the cooking process.
Profile creation
To create a personalized experience, the profile section saves settings for user diet habits. The tool selection will modify the cooking instructions to allow the user cook only with pots and tools he or she owns. Finally, by slecting personal preferences, the system filters each recipe to replace or delete those ingredients.
— Bright light environment
Mobile App connection
The user can select recipes from oChef’s recipe list or simply select it from an existing app, like Tasty, and send it to oChef with an easy drag and drop gesture. When oChef is synchronized, the user gets the ingredient list with a warning next to the ingredients that interfere with the user's preferences. Any missing ingredients can be sent back to the phone as a shopping list.
— Natural light environment
Cooking process
The simple and intuitive interface guides the user throughout the step-by-step process with a looping video, clear instructions and graphic support like an ingredient picture or animation. The interface shows the process progress and the user can either continue to the next step or go back to the previous one.
— Dark environment
Final thoughts
The analysis of the existing platforms and the user scenarios gave the project a clear goal and focus while the design iterations allowed us to find the right color, contrast, and size for the visual elements to create a projection that could work on a dark and light surface. This project allowed me to understand how important is to keep in mind, throughout the design process, the device or the technology in which your interface is going to be displayed for the user.
Project Details —
A project like this is full of details and elements that take an important part in the final design, so here are some extra details that deserve to be shown.
Interface elements
All the visual elements from the final interface were designed by us: icons, photos and videos. The interface colors were tested several times to assure that they could be displayed in different surfaces and light scenarios.
Cooking videos
As an extra challenge, we had to create our own step-by-step cooking videos in order to have a nice visual result for our concept. We created a small setup with the top-view camera, recorded the whole process and finally edited the video to create the small loops used in the final prototype.
HfG Schwäbisch Gmünd, Interface Design II — 2018