Product: Lumen
Guided Nutrition Plan
This is the story of the creation of a guided nutrition experience for Lumen users. It covers the design process and decisions that were made over the past 10 months as well as some other features that became a part of the experience.
UX Design
UI Design
Prototyping
Animation & Interactions
My role - Lead product designer
The product
Lumen is the world’s first hand-held, portable device to measure metabolism through the breath. Lumen tracks, analyzes and shows you how to improve your metabolic health. It indicates the type of fuel your body is using to produce energy and helps to understand how your metabolism functions while providing insights on how to improve it.
The Why
Users are getting a daily nutrition plan that is created according to their morning breath to Lumen device. They’re getting the plan in the form of macros (Carbs, Protein, Fat). Users don’t understand how to follow their plan or how to convert their daily macros to real foods. Data shows that this is the main reason for refunds.
Discovery
We started with talking with our users. We researched two main groups of users the ones that are using Lumen for a long time (6 months+) and the ones that are new to the product (1-3 weeks). We divided users problems in to two main themes.
Don’t understand how to count macros
Don’t understand how to convert macros to real foods
Don’t have inspiration of what foods they should eat
Users only know complicated meals that require a lot of ingredients and preparation
Hard to report the food they ate to get a more persanolized nutrition plan
Don’t feel guided
Recommendations don't fit users lifestyle -making it hard to follow the plan
User problems - What should I do today?
User problems - How should I apply?
4
Give users the possibility to create their own combo with recommended healthy food options while educating them about the different foods.
5
Create a journey experience for the users to give them a sense of progression and providing them with an understanding of their accomplishments.
Initial assumptions and solutions
1
Create two modes for the nutrition plan for users to choose from.
Carb mode - Focus on the carbs macro in the nutrition plan to make following the plan easier. The carbs are the most important of the 3 macros for weight lose (most of our users goals).
Macro mode - For more advanced/old users to follow all macros.
2
Create easy to make combos with everyday foods that the users can get inspiration from.
3
Give users an easy way to report back what they ate so they will get a more personolized nutrition plan.
The Approach
Create the first version of the experience fast while using as much as possible the components of our design system for testing our assumptions and solutions.
KPIs to test
Impact retention week 2 - From 78% to 82%
Reduce refunds due to “too much effort to log food” - from 12% to 8%
Reduce refunds due to “My nutrition plan doesn't suit me” - from 15% to 10%
Number of users that log food - from 40% to 60%
Initial design & prototype
Nutrition plan page (new carb mode)
Carb history to show the user his journey
Simple carb logger for user to report with ease
High level education for the day
Daily meals with recommended carb distribution
Main flow 1 - Discover a combo and log it to your day
Main flow 2 - Create your own combo
Swipe
Scroll
Testing our assumptions
Task flow #1
Task flow #2
I created the prototypes for the two main user flows and started testing with our users. We mainly focused on new users that only just started using the product because our new carb mode was mainly for newbie users that don’t have enough knowledge in nutrition. Plus they won’t have any bias for the old experience. (group of 10 users)
Find a food combo that you like and log it to your day.
Create your own food combo while using Legumes as your carb source.
User #1
BMI: 31
Age: 55
Time with Lumen: 2 weeks
Likes the recommended carb amount for each meal
Doesn't understand the “+” and “-” thinks it will add more macros to her day
Understand the previous day swipe but doesn't understand the difference in color
Asked where are all the macros
User #2
BMI: 20
Age: 62
Time with Lumen: 3 weeks
Likes the recommended carb amount for each meal
Wants to see precise grams amount for logging
Want to filter the different combos by her food preferences
Wants to see recommendation for all macros
User #3
BMI: 35
Age: 48
Time with Lumen: 3 weeks
Wants more visualisation of the combos
Wanted to edit the quantities of different foods
Doesn’t understand the counter of the carbs
Liked the guidance around when to eat your carbs
Likes macro mode better
User #4
BMI: 31
Age: 50
Time with Lumen: 4 weeks
Takes too much time to build your own combo
Thinks some of the foods combinations are wierd
Expected to see all macros
Wants to use ingredients she has in her fridge
Previous knowledge
People are NOT robots
Looks pretty = tastes good
We understood that most of our users even if they are new to the product have previous general knowladge of nutrition and therefor when we removed all the macros from the main view of the plan it made them stress and think they are missing something.
Most of our testers liked the combos we proposed to them. They thought that its a great way to help them reach their nutrition goals. But they all wanted to edit the combos, some wanted to edit the amount of the ingredients and other the ingredients them selfs.
As we predicted creating a quick design and prototype is not enough. Most users wanted the combos and the general UI be more visually appealing.
Key conclusions
1
2
3
It’s time to get to work
Now that we had all of the conclusions from our initial designs and prototypes it was time to get back to the details and create our guided experience according to less assumptions and more according the data that we got from our research.
Decisions
Create another main tab in the app for everything nutrition.
Give more focus to carbs because it’s the main macro for loosing weight but show all macros and give recommendations to them as well.
After a lot of discussions we decided to make the Grams mode the default one not to stress new and existing users with portions they don't understand. But decided to promote the portions mode as well to see if it will make our users life easier.
Make two modes for the nutrition plan
Portions mode: Use portions for less precision and easier following. Mostly for new users
Grams mode: More precise, everything to the grams. Mostly for experienced users that tracked food before in other apps and products.
Information architecture
Wireframes
We had so many ideas after our research so we conducted a lot of different sketches on how are we going to present all of the information that will guide our users in the best way.
Guided experience
We created a first time experience for users introducing the new Guided Nutrition Plan in the form of a walkthrough.
We divided the walkthrough to three main steps explaining the core elements of the feature.
Part one - Main page
Part two - Planing
Part three - Tracking
Main app page
Nutrition tab
Combo page - Version 1
Before morning measurement
Date plan last updated
CTA to do a morning measurement to update the plan
High level guidance for the day type
Macros for the day and their amount
New nutrition tab
Plan updated for today
New nutrition tab
After morning measurement
A quick guide for common foods and how to count them in portions for all macros
Portions mode
Planning
Recommendation when to eat your daily carbs amount
Combos for each meal type in the day
Food combo with all the macros and a possibility to save to the favourite library
Portions mode
Portions mode
Portions mode
Tracking
Indication for users journey and a quick overview of how the week went
Users can log a meal to track their progress.
Tracking of users macros
Progress indication of daily nutrition plan
In the first version of this page there are still no way to edit the ingredients or their quantities. We wanted to go live with the feature and start seeing the impact and collect more data.
We had big ideas for the combo editing experience and we knew we need more time to make it perfect.
Scroll
Users can change the meal type if they ate the combo for a different meal then recommended, and they can change the meal time
Add combo to favourites
Visually appealing food picture
Users get educated about which macro is every specific food
Ability to quickly report that the user ate this combo
We already had the possibility to log individual food in the app. We connected it to the new experience
Food log
Our new food combos hand crafted by the Nutrition team to have healthy ingredients
Combos
Another feature that we already had that lets you log macros manually
Macro logger
Main flows
There are 3 main ways to report to Lumen what you ate to get a more personalised nutrition plan.
Logging a combo
Logging individual foods
Logging macros
Users have different lifestyles, not all of them can follow our recommendation precisely everyday. We wanted to give them more freedom and customisation of their day so we created the possibility to edit the daily carb distribution.
Editing carb distribution
Not everyone eat the same amount of meals. Some don't eat breakfast some don’t snack. Another feature meant to help users follow their plan without changing drastically their whole lifestyle.
Managing daily meals
See all daily combos
Using AI
To have all the freedom of creating any food combination and not dealing with production times and costs I used Midjourney Ai to create all of the food combo photos.
Nutrition history
First time experience
Key features along the way
Thorough out the process of this project we understood a lot of users needs through iterations and testing. It made us add some key features to the guided experience
Give users a sense of journey
Ability to edit past data
Motivate users to log food
Motivation
Increase % of users food logging
Decrease CS tickets about editing viewing past data
KPIs
We used our product personas to create an empathy map for understanding better our users needs and motivations.
Something we understood early on from our research we have to give users the freedom to edit our combos and help them make them their own.
Editing food combos
Combo page - Version 2
To empthesize our solutions for users needs regarding editing the combos we changed the design of the combo page
Emphasize the editing option
Macro tags in the same language as macros at the top
Component of ingredient and quantity same as in the food log
All secondary actions and favorite option goes in the top nav bar
Ingredient page
Recommended amount for users to always knows what quantity Lumen recommended
Changing the amount and the units of the ingredient. (Component used in the food log)
Four healthy alternatives for the ingredient with amounts base on the original recommendation
If the user doesn’t want or doesn’t have the ingredient he can remove it from the combo
Understanding
Give users guidance with feedback so they understand how their decisions impact their nutrition.
Give users healthy food alternatives that are suited for their daily macro amount.
The empathy map helped us understand that there are two main needs
Editing ingredient quantities
Editing the foods of the combo
1
2
Substitute ingredient
Edit quantity
Removing ingredient
Editing combo flows
Outcome
We tested the new guided experience first of all with our Beta community (200 users). After we saw good feedback from our testers we released the feature gradually to all of our users. This are the insights we got after 2 months from the release.
Retention week 2
78%
92%
App open rate
times a day
times a day
2
3
Refund reductions
12%
10%
Due to “too much effort to log food”
Refund reductions
15%
12%
Due to “My nutrition plan doesn't suit me”
Looking forward
Giving users the possibility to create there own food combo. The challenge is going to give guidance without judging users on their food choices
Create your own combo
We are developing a smart engine that will learn from our alternatives feature and suggest to users new combination of food base on their choices.
Create an even more personalised experience
One of our main KPIs was increasing the number of users that log food. That number have yet to move. The assumption is that users have to many unconnected tools to log food.
Improve the logging experience
Check out another project
Part one - Main page
Part two - Planing
Part three - Tracking
Main flows
There are 3 main ways to report to Lumen what you ate to get a more personalised nutrition plan.
Our new food combos hand crafted by the Nutrition team to have healthy ingredients
Combos
Logging a combo
We already had the possibility to log individual food in the app. We connected it to the new experience
Food log
Logging individual foods
Another feature that we already had that lets you log macros manually
Macro logger
Logging macros
Users have different lifestyles, not all of them can follow our recommendation precisely everyday. We wanted to give them more freedom and customisation of their day so we created the possibility to edit the daily carb distribution.
Editing carb distribution
Not everyone eat the same amount of meals. Some don't eat breakfast some don’t snack. Another feature meant to help users follow their plan without changing drastically their whole lifestyle.
Managing daily meals
See all daily combos
Key features along the way
Thorough out the process of this project we understood a lot of users needs through iterations and testing. It made us add some key features to the guided experience
Nutrition history
First time experience
Give users a sense of journey
Ability to edit past data
Motivate users to log food
Motivation
Increase % of users food logging
Decrease CS tickets about editing viewing past data
KPIs
Substitute ingredient
Editing combo flows
Edit quantity
Removing ingredient
Let’s Talk
Feel free to reach out for work or just to say hello