Hands-Free Cooking Assistant Mobile Banner

Hands-free
Cooking Assistant.

Personal Cooking Assistant with audio-based step by step instructions & voice control.

Type
Personal Project

Timeframe
May-June ’19

Role
UI/UX Designer

Platform
Mobile

Hands-Free Cooking Assistant Banner Hands-Free Cooking Assistant Banner

A Personal Cooking Assistant that gives audio-based step by step instructions to the user during the cooking process. Can also be controlled by the users voice for a completely “Hands-Free Experience”.


Defining the Problems

This being my 1st UI/UX project, I had to get familiar with the idea of a Problem Statement. I learnt that framing a problem statement is essential because it highlights 2 elements - the users and the purposes they desire to accomplish.

I noted down some fundamental problems that came to my mind that people might face while cooking and moved on to trying to get my assumptions validated.

Knowing the user

I interviewed a total of 7 people from diverse backgrounds (home-makers, hostel dwellers, bachelors etc.) My aim was to validate my assumptions and discover other issues that they might be facing.

Some of the questions I asked were:
  • “When was the last time you tried to cook something new? What was that like?"
  • “What kind of cooking tutorials do you prefer?"
  • “How satisfied are you with the dishes you prepare?" etc.
User Interviews

Who am I designing for?

After talking to the prospective users I was designing for, I tried to formulate the user personas. After researching a bit about personas, I realized that a good persona should be really detailed and should very closely resemble a real person. The following are the 3 user personas I came up with:

Clustering

To gain some useful information from all the data I had collected (from interviews & assumptions), I decided to segregate the data into meaningful groups. The 3 groups were Goals, Pain Points and Requested Features.

User Goals User Goals
Pain Points Validated New Pain Points Discovered
Features Requested Features Requested

Competitive Analysis

Now after defining all the problems I had to solve, I had to figure out the best ways to solve them. And what better way than to analyse existing products and services and learn from them (or maybe from their mistakes).

Competitive Analysis

Feature Ideation

The next step was to think of features for the app, based on the clustering, which could solve these problems. I followed the Diamond Approach, in which I first thought of all the possible features and then filtered out the most important and viable ones. The following were the final features that I landed with and included in the app:

Categorization of Recipes

Products like YouTube and Alexa didn’t have a clear categorization to help the user choose from the vast pool of recipes. Even if categories were available, they were very generic and didn’t really help to make a decision.

Therefore, I decided to have various categories of recipes on the homepage of the app, to avoid the dilemma a user might face when deciding what to cook. This categorization is dynamic and is based on several factors:

  • The Usage Pattern:
    Categories shown to the user on the homepage depend on the type of recipes that the user cooks more frequently.

  • Time, Seasons:
    Eg; During afternoon hours, a large percentage of people will want to make something for lunch, and a considerable percentage of people will want to plan about dinner. So Lunch and Dinner recipes will be shown to the user during these hours.

  • Preferences set during onboarding:
    During the onboarding, users are asked about their dietary preferences. This helps make the experience more personalized. Eg; the app will show vegan and vegetarian options on the homepage, if that's what the user has entered during the onboarding.

Visual Design

The Logo

For the logo, I used a rounded typeface to make it look fun and playful. Bold letter in small case were used to create a casual and personal feel and to imply that “Anybody Can Cook!”. The circular strokes depict the boundary of a plate, bowl or cup.

Typography & Colours

Nunito & Nunito Sans were the fonts chosen for this project. Nunito is a rounded font, where as Nunito sans is a clean sans serif smilar to Avenir. Both the fonts have a wide range of weights and have decent legibility in small sizes.

Yellow & orange were the 2 primary colours chosen because they are some of the most common colours associated with food. The colour scheme was chosen to make the identity pop, and instill a sense of joy and motivation in the user.

Interface

Personalisation through Onboarding

The onboarding is the user’s first impression of the product and can help in successful adoption. For the onboarding of this app, we get responses to a couple of basic questions, to personalise the experience for the user. The responses will enable us to curate the recipes according to each user.

Homescreen

The home screen of the app greets the user everytime the app is launched. The copy and the accompanying illustration varies with the time of the day and the usage pattern of the user. The categories of the recipes also vary according to the time and previous recipes cooked by the user.

May and June

Searching for Recipes

There are basically 2 ways to search for recipes within the app. The first way is a simple keyword search. The app also allows tag based filters for search to narrow down the results based upon the users tastes and preferences.

Inside the Recipe

This screen provides the image and a short description of the recipe. Important details like the prep time, difficulty level, ingredients used etc. are also provided. The user can perform the following actions on this screen:

  • Like, Share the Recipe
  • Add the Recipe to a Collection
  • Increase the No. of Servings required
  • Export a text list of ingredients to share
  • Add ingredients to the Shopping List
  • Start Cooking the Recipe and follow the Step by Step Instructions

Step by Step Instructions

The app follows a ‘Step by step’ mode of instruction for the recipe in a ‘Audio-visual’ format. Also, the user can use their voice to move on to the next step, or go back to a previous step. This 2 way verbal communication between the app and the user provides a truly ‘Hands-free experience’.

Shopping Lists

The app gives the user an option to create shopping lists with ingredients that they need to buy for a particular recipe. By clicking on the Export button on the recipe page, the user can add the ingredients of that recipe to a shopping list.

May and June

Liked Recipes

The user can like recipes that they enjoyed cooking/eating, and also save them to collections to refer to them later on. This makes revisiting previously made recipes much easier than finding the same YouTube tutorial.

May and June

My Learnings

This project proved to be a fun filled way of aplication based learning for me. In the process of designing this app, I had to interact with a lot of relevant people & consume a lot of material related to UI & UX design. This helped me gain the basic knowledge of the design process.

Designing the app was a challenging and rewarding journey. I faced the challenge of creating an engaging app both from the user experience perspective and the visual perspective.

Next Up

Let's talk!

I’d love to chat about anything from design to gaming & esports. You can connect with me on mail or my social media handles.

Home Icon
Facebook Icon
Behance Icon
Linkedin Icon