UX Design Case Study - Food Lens, Perfecting the food log

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.