UI for an intelligent cooking assistant

Nymble had a unique idea to automate boring parts of cooking so people could enjoy what they really loved- Eating!

Role: Research, UX/UI design, Prototyping

Problem

We were just a few months away from CES, the most influential tech event in the world. Nymble wanted to show their product fondly called "Julia" to potential customers, investors and tech enthusiasts. Julia could cook a variety of meals, but had difficulty communicating with humans.

Approach

I started out by understanding the current "smart cooker" space. I found that there were 2 types of interfaces –

1) A small digital screen with buttons to interact with the appliance and 
2) A full-screen display with one or no buttons.

Next, I understood the design of the appliance itself –
It would be a modern, minimalistic appliance with very few buttons. It would have smooth contours and no hard edges.

Finally, I understood how the device would be used – 

It would be used mostly in the kitchen under different lighting conditions. People would use it standing about 1 foot away from it.

Insights

1) The interface had to be dark to emit very less light from the screen. It would be used both in the night and day.

2) The interface had to be fully screen-based to match the aesthetics of the appliance.

3) The text and images had to be legible from a distance.

Inspiration

I drew inspiration from other smart devices that had a full digital display and controls.

June- Smart Oven
Starry Router – Touchscreen router.

Solution

I build a click-through prototype that simulated all the features of Julia.

Julia could show recipes from all over the world. The prototype guided users to choose a recipe, prepare ingredients and see the progress. It also prompted them to complete an action when needed.

Mood board showing the appliance aesthetics and style for the icons, UI, Fonts and Images.

The navigation system was designed to be simple so users could concentrate on the task at hand.

We identified 4 things the device UI had to support: 

1) Show a restaurant style menu

We found that people bored of the same food, that's why they like to try new things often. Julia could show a regularly changing menu to keep the interest going.

2) Show cooking time and ingredients

Peopled picked a dish based on the amount of time they had and the ingredients available. It was important to show the ingredients and cooking time to help them make a decision.

3) Show ingredient preparation

Some dishes had to be prepared manually. Users needed to know how to prepare the ingredients without moving away from the recipe. We showed preparation videos as part of the recipe to allow them to follow along.

4) Prompt user when needed

Some recipes needed users to complete a task before moving forward. We prompted users to complete the task.
Example: Flipping over a steak.

Navigation Flow for cooking a steak with Julia

Restaurant style menu

We found that people get bored of the same food, that's why they like to try new things often. Julia could show a regularly changing menu to keep the interest going.

Our research showed that people liked to eat quick meals when they were in a hurry but, enjoyed cooking alone or with friends and family as a pass time. Julia had 2 modes for this – Auto and Guided

Most people ate meals based on what they felt like eating. Instead of Breakfast, lunch or dinner, they would like to eat a light snack a dessert or a filling meal.

Visual Ingredients

Peopled picked a dish based on the amount of time they had and the ingredients available. It was important to show the ingredients and cooking time to help them make a decision.

We borrowed the photography style from real restaurant menus. We used mouthwatering photos of the dish and ingredients to build up an appetite.

Prepare ingredients

Some dishes had to be prepared manually. Users needed to know how to prepare the ingredients without moving away from the recipe. We showed preparation videos as part of the recipe to help them to follow along. 

Most of our users already cooked while watching recipe videos. We used the same idea to create mini videos with captions to help users easily follow along.

Prompt users

Some recipes needed users to complete a task before moving forward. We prompted users to complete the task.

Users could be away from the appliance, so we used sounds as well to call for attention.

We used animation to show actions – Weighing scale showed the actual weight and the arrow indicated a flip action.

Outcome

The product demo was a hit! The physical device and the UI worked very well and showed the full experience to thousands of visitors.

The team was able to get some interest from high profile investors, hardware manufacturers and technology enthusiasts.

They also collect emails of interested visitors which could later be used for marketing and user testing.

My Learning

This was my first project for a physical device. Designing for a physical device is very different from designing for the mobile and web. A few things I learnt on the way:

1) Consider the distance between the interface and the user earlier on. Account for the distance to design the best size for the fonts, graphics and buttons.

2) The graphic capability of the display can be limiting. Use this as a constraint for designing minimal graphics and better text.

3) The display will usually interact with physical buttons on the device. Make sure the placement of the buttons are intuitive

4) Devices also use sounds, vibration and lights to communicate with users. knowledge of these will help in designing a better experience.