1.0 THE PROBLEM
PERFECTING THE FOOD LOG Food Lens app uses deep learning to track nutrition from food images. I redesigned the food logging process because it was full of disparate features that made the app slow and complex to use.
THE GOAL 1. Make the app fast and easy to use for everyone, everywhere. 2. Give users more control over logging custom food items not recognized by the app. 3. Get correct food labeling data from the users to help train the food recognition algorithm and get better results in the future.
ROLE
UX / UI Designer (Research, User flow, Ideation, Wireframes, Visual Design) TYPE
Prototype, soon to be integrated in the app DATE
October - December, 2019
THE BEFORE Disparate features of the food logging process compete for focus. App reliability and performance issues increase exponentially. The design is not consistent or intuitive.
The food logging process before I started working on it. (1 Take a food photo, 2 - Confirm the food group, 3 - Search for custom food items)
2.0 UNDERSTANDING USER’S PAIN POINTS
DISCOVER
USER SURVEY FINDINGS
The goal of our users
Based on the user survey results the following questions formed: 1. How can we make the food logging process less complicated?
track food by taking food photos
eat healthier
Loose weight
notification reminder
collecting rewards for log
How can we help the
2. How can we help our users loose weight? users reach their goal
making food logging less complicated
USER RESEARCH
DEMOGRAPHICS
Age :
never tracked consumed macronutrients doesn’t have time for meal prep sitting down a lot at work
single computer engeneer
Profession
:
Lives in :
California ENABLERS
Reno
”
DEMOGRAPHICS ‘’I started working out in the local fitness Ageand : I love 43 it. I want to build muscle and Status : single mother lift heavier weights..’’
He wants to bulk up in fitness with his friend. Just a recent obsession and something to look forward to after long hours spent behind a computer screen. PAIN POINTS
school consultant
Profession
:
Lives in :
Texas
Singlemotherof2kids
He works out in the morning before work. He eats a big breakfast after working out and lunch at work. Small dinner at home.
DEVICES
bad
discovered fitness. He decided to bulk CALORIE COUNTING up and knows he has to change his GOALS diet significantly. Eat more protein, doesn’t count reduce carbs and exercise a lot. His Want to change job behind a computer isn’t helpingher life for the better - loose weight, eat healthier him change the habits but he’s trying and exercise on a daily basis. with hard! He is very proficient
BEHAVIOURS
lazy cook doesn’t like healthy food lacks motivation due to loneliness
HEALTHY EATING HABITS
SUMMMARY / BIOperson but recently Not a sports
Emma
friend’s support strong motivation to change the foods he eats
GOALS
Computerengeneer
PERSONAS
I created user personas to take into account different types of users and make the app great for everyone, everywhere.
PAIN POINTS
32
Status :
good
Iphone 10 Mac laptop
ENABLERS
has a lot of time motivation to get fit till summer counts BEHAVIOURS
She is not very technology savy. She technology but doesnt want to spend PAIN POINTS owns an old Iphone but knows only the too much time tracking his nutrition. basic options. no knowledge in healthy nutrition He wants to exercise! doesn’t make time for healthy meal Status : married HEALTHY EATING HABITS thinks he eats overall healthy food DEVICES Profession : car retailer Her daughters moved away for Iphone 6 Lives in : toOhio college and she decided put her bad good Windows laptop life in order. She is overweight,
‘’I want toDEMOGRAPHICS get fit to hike up the Great Canyon in Age : 52 summer’’
SUMMMARY / BIO
Toby Type2Diabetic ‘’I love technology and cars, but I am very impatient. If it’s not fast, I won’t use it.’’
doesn’t eat healthy and doesn’t CALORIE COUNTING exercise. Taking care of two kids and working two GOALS jobs she never found time for herself. She is on a mission to doesn’t count hike up the GreatRecenty Canyon diagnosed this with type 2 Diabetes, he summer with herhas twodecides kids andtowant change his eating habits and to get fit. She wants to loose starts livingweight healthier life. and start exercising regularly. She uses Iphone but is not very proficient. She works with young teenagers as a consultant. HEALTHY EATING HABITS
SUMMMARY / BIO
He wants to start tracking his eating habits, include more healthy foods and start exercising. He works as a car retail person and doesn’t have time for himself and sports. He watches tv series and enjoys fried food in the free time. He is married and has a grown up daugther.
bad
strong motivation to change lifestyle wants to loose weight counts BEHAVIOURS
He likes to grab a sandwich from fast food restaurants for lunch. He always goes for Starbuck’s frapuccino and a cake in the morning. DEVICES
good
CALORIE COUNTING
doesn’t count
ENABLERS
counts
Iphone 8 Windows laptop
USER RESEARCH DATA ANALYSIS
I worked with data analysts and we discovered highest bounce rates of the food logging process.
Most users quit when they have to (1) manually search for food not recognized by the app or (2) log multiple food items.
3.0 IDEATION
DESCRIBE
THE CHALLENGE:
Redesign the food logging process into simple and intuitive for everyone to use. Three primary questions led my design strategy: 1. How do we make food log fast and easy to finish for everyone? 2. How do we help our users loose weight? 3. How do we improve our food recognition algorithm to improve the overall user expeience?
PERFECT FOOD LOG MAKE IT QUICK AND EASY
I stripped the food logging process to 4 key moments user goes through to get the nutritional value of their meal by taking a food photo.
The 4 key steps of user’s journey.
WORKING BACKWARDS FROM PERFECT I reversed the polarity of the imperfect food log to jumpstart creativity. Ambiguous
Unlimited options
Complicated
Inefficient
Obvious
Constraints
Simple
Optimised
Four key design challenges emerged: How might we help user search food items not recognized by the app? How might we reduce the number of different food options suggested without sacrificing usability? How might we simplify the logging of multiple food items? How might we reduce the number of clicks per food log?
PAPER PROTOTYPE USER TESTING
Users had to put the food logging steps in a logical order. Based on the findings I created simple a user Journey map.
4.0 SETTING RULES
DESIGN
TAKE A FOOD PHOTO
USER JOURNEY MAP
1 PIN
CHOOSE 1ST FOOD GROUP
SWIPE FOOD CHOICE
2 PINS
CHOOSE 2ND FOOD GROUP
ADD MORE FOOD
CONFIRM
3 PINS
CHOOSE 3RD FOOD GROUP
TAP FOOD CHOICE
ADJUST QUANTITY
DELETE PIN
FINISH
WIREFRAMES
01 Easy to use 02 Max 3 OBVIOUS
CONSTRAINTS
food search option.
options + search more.
03 Simple log 04 Number of SIMPLE
OPTIMISED
of multiple food items
clicks reduced to 2.
5.0 FIRST TO SECOND VERSION
USABILITY
For an earlier iteration, I created simple digital prototypes and tested wireframes with our users.
USER TESTING User testing gave me some valuable insights. We took them into account when designing the second high fidelity prototype.
Making the already logged items and current food pins more visible and getting rid of the top right save button and place it on the bottom. Unlimited options confuse the user that’s why we change it to step by step process with max. 4 food options.
USER GOALS How do we help our users loose weight? Quick overview screen tells the user the macronutrients of the last meal and gives him/her feedback on how healthy the meal was/is.
Macronutrients Health meter
Calorie sum
IMPROVE THE ALGORITHM Improve our food recognition algorithm to improve the overall user expereince with ‘’Add custom food item’’ button to encourage users to add foods that the app missed.
‘’Add custom food item’’ drag and drop button was changed a few times to be the most intuitive and simple to use for most of the users..
6.0 SECOND VERSION
PROTOTYPE
I developed the second high fidelity digital prototype that showcases the end product quite nicely. I tested it again with some test users and perfected the designs. The link to digital prototype animation: https://youtu.be/p5TzPLmdtE8
7.0 SECOND VERSION
VISUAL DESIGN
Take a food photo
Analysing
Choose food group
Choose food item
Adjust quantity
Add another food item
Finish logging
Quick overview
8.0 WHAT I LERNED
TAKEAWAYS
01 LESS IS MORE
Strive to make the design as easy to understand as for a five years old child, otherwise it’s too complicated.
02
03
IT’S ALL ABOUT DETAILS
USER IS THE BOSS
Every little detail can make it or break it! Test every iteration with users and only then decide fo the best.
It’s important to test the prototypes with user during the process again and again.