Archived · 2020

Chef Bot

Conversational mobile concept.

Transforming the ordinary recipe app into a more engaging and intellectual application that uses artificial intelligence, and provides quick results tailored to your needs. Chef Bot is an example of artificial narrow intelligence (ANI), answering simple repetitive user inquiries. Check out the UI design on Behance.

The Problem

How can I redesign a recipe app into one that will not make users think or process huge amounts of data, but will help them decide quickly and easily on what they can cook with the ingredients and resources they currently have, and find alternatives for those that they do not have.

Users & Audience

Smartphone users with the ability and time to cook their own meals at home. They are amateur chefs and need help deciding what to cook with the current ingredients they have, and tailored to their dietary preferences. Currently, they are completing these tasks with the help of:

  • Google Search
  • Browsing through various existing recipe apps
  • Consulting friends
  • Some dare to experiment on their own (a.k.a. the lone ranger)
Screen 1

Artificial Intelligence

For my first solo project, I thought, with the current trend in technology, what are the current solutions available that can help enhance usabilty and reduce cognitive load? That was when I landed on conversational UIs and natural interaction.

Remove Friction

Having a conversational UI gives the advantage of interacting with the application on human terms. Also, with artificial intelligence, people doesn't have to process large amounts of data on their own, they can do it with the help of Chef Bot. This also increases motivation.

Context and Intent

The main challenge for the interaction design of this application was to figure out what information is relevant in a given context and ignore the rest. My hope is that with AI, the app will eventually learn and make these kinds of judgements on its own.

Conversation Design

I found Google's guidelines on conversational design to be extremely helpful in building a meaningful conversation. With this, I started by understanding, from interviews, who are my users.

Common words & phrases;

  • I have chicken in the fridge, what can I cook with it?
  • I'm hungry but what can I eat?
  • How do they cook lasagna?
  • I want to make pizza but I don't have yeast

Common triggers;

  • impromptu hunger
  • something in the fridge is about to expire
  • cooking for others/guests
  • time for the next meal
System

System Persona

(Chef Bot) - the conversational partner created to interact with the users. Helps maintain a certain tone when writing dialog.

  • Adjectives: foodie, friendly, professional, helpful, knowledgeable
  • Character: A creative cook that loves to experiment in the kitchen and try out new recipes that are both healthy and tasty. A professional, but not afraid to bend the rules a little. Doesn’t like to dilly dally, but what he lacks in small talk he more than makes up for it with a bit of humour. Worked with a lot of master chefs across the globe. Attempted to start own restaurant but preferred the direct contact with customers via chat.
User

User Persona

Anna, is a 27 year old entrepreneur who lives in a small city. Her passion is cooking and sometimes cooks for her family and friends on weekends and at parties.

  • Goals: Anna has time to cook for herself because she is her own boss, but since her family has several diabetics and hypertension patients, she wants to cook only healthy meals. She is always aware of what her body needs to stay healthy, and when her friends come over she would like to cook for them new and exciting meals. She is one of the lone rangers who like to experiment in the kitchen.
  • Context: Anna is in the cab ride home thinking of what to cook tonight given what she already has in the fridge.

Critical User Journey

To-be scenario: story of a better experience for the user

User Journey

Interaction Design

The objective of the interface was to be simple, fresh, ingenious, and in tune with the system persona mentioned above. This was accomplished by implementing a clean interface, with simple shapes and a few innovative details.

Wireframes

Conversation Flow

This provides the structure of the conversational interface.

flow chart

Micro-Interactions

View source code on Github

The interaction model was mainly inspired by Material Design, and because two of Chef Bot's personality traits are friendly and professional, I chose to to add a few subtle but fun animations to enhance the experience. The goal was to minimize content given to the user and limit interactions that involve moving to another screen so that the user does not lose track of where they are in the app.