Vangio A recipe app
Project brief
Project timeline
7 days
My role
Research
Design
Project Type
Designathon -IFP 7 days design challenge (Individual)
Recipe browsing & Missing Ingredient shopping app
Suppose you’re selected by a company that has an app for collecting recipes of world cuisines. The app hasn't been updated in a while, so you're being asked to add four useful features that will make it more marketable. You can also rebrand it.
Three business requirements to solve
Make the app design drool-worthy so that anyone who sees the recipes is tempted to try them
How someone can watch recipe video and operate with dirty hands and cook at the same time
Show nearby retailers or e-commerce services to buy missing ingredients
Assumption & constrains
- Assuming that company already have a database of billions of world cuisine recipes.
- Not provided with previous design but just got an instructions to solve business requirements.
- Can’t add add feature like reels and social media for cooks.
- Don’t know about the quality of recipe content comes from database.
- Assuming data structure as spoonacular API
User’s insights & findings
- I've done user interview with 10 users including housewife, working women, person who loves cooking, 2 paying guest. It was open ended conversation.
1.1
Don’t want to spend too much time just browsing recipes
1.2
How do I know that recipe that I'm making is legit
1.3
Don’t want to just cook recipe, but some users wants to know the story & tips about that cuisine and ingredients
1.4
Can’t operate recipe video while cooking
1.5
Use of different measurement unit like servings, count, gram
1.6
A great recipe has been found but don’t have enough ingredients
Solving given business goals
01
Drool worthy design
- I started with desk research and reading some articles about salivary responses.

- Food cues are especially likely to trigger simulations of consumption when the food is considered attractive.

- And also attractive food induces the ghrelin hormone and because of it hunger increase.
- Also simulations of eating a food(e.g. foodies on reels, etc.) produce salivary responses similar to when a food is actually being eaten.

- Based on these inside and user research I can thought of following 2 solution to make users drool:
1. Putting high quality aesthetically clicked images can increase salivary response
- So I’ve decided to use display images from adobe stock images API instead of poor images from database.

- But It’s technically complicated to use different API for images.
2. Reels of food vlogging & recipes can make you drool
- It was my personal experience that I crave for food when I watch reels or yt-short of any food vlogger. My mouth drools starts drooling watching this street food.

- Second use of integrating this short video content is that cooks can share small recipes OR tips & tricks OR story behind foods.

- Business issue is to get these creators on board to share reels.
02
Optimised to cooking while watching recipe
- Firstly I tried cooking while watching recipe on phone. It’s very important to get into the user’s shoes to identify problems.
Findings I found:

1. Phone stand problem while cooking

2. User can't operate video with dirty hands. Every time they have to wash their hands to operate.

3. Pause, play, 10 sec before-after, go to timestamps are most used controls.

4. Some times user wants to move time slider cardinally(2-3 min change) so using of 10 sec before-after function is a hectic.


I can think of following 2 ways to solve this problem :
1. Voice User Interface
- In hindsight, A wake word(trigger) followed by a command that our app will execute and control video player.

- According to a report, 1 in 4 adults in the US owns a smart speaker today. And more than half of the smart speaker owners in the US are using their devices on a daily basis.

- 71% of users prefer doing a voice search in queries instead of typing.

- So we can assume people are comfortable using voice UI.

- But there are some disadvantages of voice UI like Privacy concerns and Misinterpretation.

1) Solving Privacy issues first I've done research a bit on how voice command works technically and found offline(without cloud) option where we don't need to post microphone data to servers instead process it inside the user's phone with the use of
Porcupine Wake Word engine and the Rhino Speech-to-Intent.
e.g. - "Vangio, play"

- In this phrase, Porcupine identifies the wake word “Vangio” and Rhino infers the intent of the command that follows. Rhino uses an embedded grammar to determine the meaning of the command.

- User can set wake word and commands for play, pause, #number of seconds/minute before/after.

2) Secondly Misinterpretation can be tackled by two ways: first app would not allowed customize commands which spells the same(homonyms like their and there, ad and add, etc.) and secondly if misinterpretation happened then app will give error voice feedback to user.

2. Wave gesture control
- User can control recipe video by doing following wave gestures in front of proximity sensor of phone. Technically it's possible to operate phone by gestures.
03
Shopping missing ingredients.
- Sometimes we don’t have missing ingredients on our self so first we have to buy and then can start cooking. And now grocery shopping is on phone so we can order missing ingredients.

- Here's 2 problems I found :

1. All user doesn’t have an access to online grocery sopping apps so we have to list nearby retailers too.

2. And we are not in a business of grocery delivery so we have to redirect user to apps like gofers, etc. But user can compare rates from diff e-com apps on our app.
Feature inspiration
Features
Inspiration From
Browsing recipe
Netflix & spotify & Zomato
Search & filters
Tasty
Reels
YT shorts & Instagram
Shopping list
Swiggy & bigbasket
Color palette
#013832
Primary
#FF9600
Secondary
#FFFFFF
Surface
#BD350D
Errors, non-veg
#008001
Success, Veg
#2E2E2E
Text, Borders, Shadows
Typography
Poppins - other than brand identity
Quattrocento - for brand identity
High fidelity solution and whys behind decision
Home screen
Search & filter Page
Recipe page
Thanks :)