Ochef - Guided cooking

by Jose Avila and Halil Karacaoglu
The opinions regarding healthy food changed over the past few years. At the same time, there are more and more oven-ready-meals. Media provides a huge amount of recipes, as print, apps, websites or on tv. During the cooking process, it proves unsuitable to use a medium which is prone to contamination. Most of the recipes are shown as text sometimes combined with graphics. A better way to show recipes are video clips showing each step of the process especially easy for beginners to understand. This idea was implemented by a recipe platform named Tasty. It provides step by step videos offering guidance through the whole cooking process. We liked this idea and created an add-on tool
which works with an interactive touch projection. The interface can be projected on the table as well as on the wall. The big size of the screen makes it easy to interact with and there is no problem with dirt which can damage the device. Additionally, a profile setting was added to suggest only recipes which match to the user. Another big advantage is the simultaneous function. Ochef guides you to cook multiple dishes in one process, this warrants an effective cooking process and saves time. Our main motivation for this project was to generate a guide, which gives the user a completely new cooking experience as well as to integrate fresh and healthy nutrition to daily life.

Set your profile

The whole interface of Ochef was built by a step by step matrix, so it is comprehensible for each age group. Before starting cooking a Profile should be created, which makes it possible for Ochef to remind your preferences. Firstly, a fruit can be selected as your profile picture, then type in your name, set your diet, the kitchen tools you have at home and subsequently your allergies and dislikes of food. You can undo this filter anytime. If you want to cook in a group you can select more profiles before you start cooking so every wish is considered and the right amount of the ingredients can be calculated. If there are dishes with ingredients you don`t eat and it is not necessary for the preparation of the meal, it will be still suggested but marked in red. This feature makes it possible to suggest a bigger range of recipes by omitting ingredients you don`t eat.

Coworking of
Ochef and Tasty

The link between Tasty on your smartphone and Ochef makes it possible to switch and send information between both devices. Recipes can be discovered on Tasty or Ochef. Before you start cooking, Ochef enquires who will be eating with you. After selecting the person the recipe can be selected. If for example, you made your choice on your smartphone, the recipe can be sent under the step by step rubric by dragging and dropping the dish graphic on the projection icon. Once you have dropped it, the recipe will appear on this device and you can proceed from there. If all the ingredients are already are available, the cooking process can proceed. If missing ingredients are needed, they can be configured and sent to your phone. The app generates a checklist which can be processed by ticking the boxes. When you are ready and prepared to start, you can tap "Start cooking".

Cooking process

The core of Ochef is the cooking process which guides step by step through the preparation. It is basically separated into 3 fields. The main one is in the middle. With the aid of looped video sequences from the top view, it shows how to prepare the food. The videos are attended by the descriptions on the right. It explains you the video in textual form. On the right, the information is shown as graphics or animations. About that, the progress is shown. The cooking process can be stopped by pressing the X. The menu on the top left helps to change defaulted configurations.

Whole process

Behind the scenery

To create the desired interface, we generated our own videos. We implemented this by recording the preparation process from the top view. The green screen helped us to remove the background. Little tricks like to keep the steam away from the objective, were solved by using a hairdryer as shown. The video editing was completed with after effects.

Fonts and colours

The whole design process in this project was really interesting, colours, transparency, proportions, seemed totally different on the projection than on the screen. The mirror function of Sketch was used to shorten the work process. After testing a large range of colours on the projector, cyan and white were chosen as the main colours. Red was used to disable things or quit the process. The grey scales made it possible to give the interface a depth and an element to play with the transparency, scale and reflections. The DIN Pro was chosen as program font, 4 weights were used to classify the design in 3 groups (profile setting, recipes, cooking process).

The design

Here are several icons developed for this project. The buttons navigate through the menu. The animations give notifications, helping with the time management and the heat levels. The setting tools help you to match the filter to your needs. The device icons differentiate both from each other.

Kitchen icons

Kitchen icons can be created by setting the profile and the tool setting option. To ease differentiation they were built with detail.


The big advantage of the projector was the laser diode system. Black surfaces will not be projected. So an interface was designed which is mostly without a frame. This gave us the possibility to create a floating design. Set centred alignments were used to keep the floating design.