Redefining meal logging for nutritional awareness and lasting wellness
Company
Kickoff, fitness & nutrition remote coaching startup
My Role
Lead product designer
The Team
2 engineers
Design Timeline
September 2022•1 month
Overview
Background
An overwhelming number of people in the United States and Canada struggle with being overweight and having chronic health problems. Some folks who want to improve their health but don’t know where to start turn to Kickoff for guidance. Kickoff pairs each client with a real human coach dedicated to helping them reach their goals. Kickoff’s approach to wellness is rooted in three pillars: movement, wholesome nutrition, and forming sustainable healthy habits.
For nutrition, new clients are asked to log everything they eat in their first week with Kickoff so their coach can get familiar with their eating patterns. From there, the coach will provide advice on better choices and suggest good habits to focus on. Continuing meal logging beyond the first week promotes accountability, enhances awareness, and cultivates mindfulness. While meal logging is not meant to be forever, it can be an effective strategy to re-visit to break through plateaus or troubleshoot new issues that arise.
The Problem
Not enough people log their meals, which is crucial when they join Kickoff so their coach can get familiar with what they eat and suggest adjustments that are appropriate for them.
How might we get new clients to log their meals regularly so their coach can help them reach their health goals quicker?
Final Designs & Interactions
Let me take you on a journey from a newcomer's first interaction with the meal log to exploring more advanced features for seasoned users. In under 5 minutes, you'll witness the seamless progression of our user experience.
Business Impact
Not only did the average number of days with logged meals increase significantly for clients in their first month, it also surpassed the average number of workout days for the first time in Kickoff’s history! That’s a huge testament to the success of the new meal log. The nutrition segment of the app is now in alignment with our well-established workout segment.
increase in average number of days with logged meals per new client
Average number of days with logged meals per new client
Understanding the User
Who uses Kickoff?
Anyone between the ages of 16 and 89 who wants to improve their health, with the majority identifying as female.
Why do they join Kickoff?
Most people join Kickoff to lose weight/fat, or get in better shape. What’s most important (and interesting) though is the why beyond that.
Recent health problem (high blood pressure, diabetes, high cholesterol), or health scare experienced by someone close.
Wanting to look good for an upcoming event, such as a wedding, beach vacation, or high school reunion.
Getting back into shape after hiatus due to injury, pregnancy, illness, COVID-19, etc.
Preparing for first 5K, marathon, triathlon, physique competition, or other fitness event.
Having a hard time sticking to a healthy routine; need accountability and motivation.
Have never worked out or paid attention to nutrition and don’t know where to start.
Nutrition Personas & Archetypes
I created the nutrition personas and their corresponding archetypes in a prior research project based on 4 client interviews, 9 churn interviews, 6 coach interviews, and a brainstorm session with 5 coaches. For this project, my design decisions were guided by Overwhelmed Olivia (primary persona), Fad-Diet Fiona and Ready-for-a-Change Roxanne.
The Beginner
The Fad Dieter with a Deadline
The Reborn
The Tracker
The Apathetic
Exploration & Discovery
Meal Logging Before Redesign
Meal Log: no meals
Meal Entry: filled out
Meal Log: 1 meal added
Positives
Most clients reported they like to take pictures of their meals as opposed to logging calories and macros.
Logging a meal is easy.
Issues
Clients want meals displayed in the order eaten, but “Snack” is always first.
Can’t edit meals: must delete, then re-enter new meal.
Leadership estimates that about 30% of clients want to track calories or macros (but there’s no quantitative data to support that claim).
The Calorie-Tracking Debate
During the project, a significant debate arose concerning the inclusion of calorie-tracking within the app. Here’s why I strongly advocated against it:
Counting calories is not aligned with Kickoff’s nutrition philosophy. Our philosophy focuses on wholesome nutrition with emphasis on quality of food, awareness, and sustainable habits.
Clients adamant about tracking calories are not very open to change; they’re hard to please and retain. In their case, a coach doesn’t add much value compared to simply using a much cheaper calorie-tracking app, which results in them being dissatisfied with Kickoff.
Our coaches drive more success with clients who have very little nutrition knowledge and who focus on healthy eating rather than the numbers. Those clients benefit from working with a personal coach and end up having a positive experience with Kickoff.
Kickoff’s mission is to transform the lives of those facing health challenges and seeking guidance, not to coach already fit individuals aiming for specific advanced fitness or aesthetic goals (e.g. reaching 8% body fat).
From a business standpoint, people in need of comprehensive lifestyle changes represent a much larger demographic than those seeking out elite personal training.
After thorough discussion, we reached a consensus that calorie-tracking does not align with our clients’ best interests or our business goals. With that resolved, I proceeded with the rest of my exploration.
Competitive Analysis
Getting familiar with how some of our indirect competitors approach meal logging helped me identify design patterns and features to inspire the Kickoff meal log.
Macro, diet & fitness tracker
Lose weight with psychology
Calorie counter and meal plans
Love your relationship with food
Track habits, not calories!
Intuitive eating habits method
Instead of incorporating all identified features in the re-design, I prioritized the most impactful ones and added the rest to our nutrition roadmap for future implementation.
Most impactful features
Feedback on meals from nutrition expert
Fasting indicator
Quick access to recent meals
Features for future phases
Nutrition tips
Ability to tie meals to healthy habits
Self-reflection (why you ate, how did you feel, etc)
Hunger level meter before and after meal
Ideation
Guided by insights from the competitive analysis and the client feedback on the current meal log, I explored 3 concepts for the main feed.
Gallery View
Inspired by Wellory and SHYE, this is also a popular pattern in many apps.
Pros
The gallery is visually appealing and easy to scan.
This is a good format for a summary.
Cons
There are no groupings by meal type.
The photo must be tapped to view the meal description and messages from coach.
Not a great view for clients who only provide a description and don’t take pictures of their meals.
Daily List View
Inspired by MyFitnessPal and Lifesum, with the addition of meal pictures and messaging.
Pros
Focuses on one day at a time.
Clear groupings by meal type.
Cons
Hard do compare meals from prior days.
Timeline View
Loosely inspired by ate, with the addition of multiple pictures per meal and messaging.
Pros
Highlights the timing of meals.
Easy to scan meals from prior days.
Cons
The feed format, as opposed to a daily view, could involve a lot of scrolling.
The team agreed to go ahead with this timeline view concept because it’s the most helpful in making clients aware of what and when they eat.
Usability Testing
I conducted a round of moderated testing sessions with 7 Kickoff clients. To gauge the efficacy of the new designs, the participants were asked to complete 6 tasks in a Figma prototype. At the end of each task, the participants assessed the level of difficulty of that task.
Log a meal you’re about to eat
Overall, that task was:
Add food to an existing meal
Overall, that task was:
Log leftovers
Overall, that task was:
Delete a meal
Overall, that task was:
Respond to message from coach
Overall, that task was:
Log a snack you ate last night
Overall, that task was:
Improvements
While there were no major issues with the tasks, a few improvements were suggested by the testers:
Improvement 1
Pre-select meal type based on time of day.
Great idea! Was included in the release.
Extract from Meal Detail screen
Improvement 2
Could be time-consuming to edit the time when entering all meals at the end of the day.
Considered adding a toggle to turn the meal time off.
Added to the roadmap for future implementation.
Improvement 3
Swipe gesture to edit, copy, or delete a meal.
Designed and saved for a fast-follow release.
Extract from Meal Log screen
Improvement 4
Would be nice to check off a habit related to the meal, for instance, “Add protein to breakfast”.
Was identified in the competitive analysis.
Added to the roadmap for future implementation.
Example from Wellory app
Positive Feedback
If nothing else, the testing validated that the new designs are a major improvement over the old interface. One tester summed it up nicely:
At the beginning, I said I had no problems with the current experience. Now that I see this, I realize I did have problems. This looks so much better! Cleaner and more refined. Less clunky.
Those are actual comments from testers that I assigned to the archetype that best represents them.
Final UI
Here’s a preview of the key screens I created for the updated meal log. For the complete experience and interactions, make sure to watch the video at the beginning of the case study.
Meal Log Screen
The challenge with this screen was to organize the relevant meal information on a visual timeline while seamlessly integrating personalized feedback from the coach on each meal. All of that without overcrowding the screen or overwhelming the user.
Highlight 1 of 5
At the beginning of each day, the time since last meal is replaced with the fasting duration to help those who practice intermittent fasting determine when to have their first meal of the day.
Highlight 2 of 5
At the beginning of each day, the time since last meal is replaced with the fasting duration to help those who practice intermittent fasting determine when to have their first meal of the day.
Highlight 3 of 5
At the beginning of each day, the time since last meal is replaced with the fasting duration to help those who practice intermittent fasting determine when to have their first meal of the day.
Highlight 4 of 5
At the beginning of each day, the time since last meal is replaced with the fasting duration to help those who practice intermittent fasting determine when to have their first meal of the day.
Highlight 5 of 5
At the beginning of each day, the time since last meal is replaced with the fasting duration to help those who practice intermittent fasting determine when to have their first meal of the day.
The time since last meal is meant to help identify eating patterns. For instance, if your last meal was 1 hour ago, are you eating out of boredom or because you’re really hungry?
In addition to providing quick feedback with tags in the “Good Choices” section, the coach can offer more in-depth commentary on individual meals.
At the beginning of each day, the time since last meal is replaced with the fasting duration to help those who practice intermittent fasting determine when to have their first meal of the day.
Clients who have been logging their meals for a while can review meals from prior days by tapping on the date pill to easily jump to a specific date (as opposed to scrolling endlessly).
Brand new users who have not yet logged a meal are met with a friendly and informative empty state that encourages them to take action.
At the beginning of each day, the time since last meal is replaced with the fasting duration to help those who practice intermittent fasting determine when to have their first meal of the day.
Meal Detail Screen
The goal for this screen was to make logging a meal as quick and easy as possible.
Highlight 1 of 3
Celebrating when a new user logs their first meal to encourage them to keep logging meals and explain why it’s beneficial.
Highlight 2 of 3
Celebrating when a new user logs their first meal to encourage them to keep logging meals and explain why it’s beneficial.
Highlight 3 of 3
Celebrating when a new user logs their first meal to encourage them to keep logging meals and explain why it’s beneficial.
When logging a new meal, the date, time, and meal type are pre-filled. Only a meal photo or description is required.
Going back for seconds or craving a dessert? A meal can have up to 5 photos.
Celebrating when a new user logs their first meal to encourage them to keep logging meals and explain why it’s beneficial.
Celebrating when a new user logs their first meal to encourage them to keep logging meals and explain why it’s beneficial.
Recent Meals
A pattern emerged from client interviews: most people tend to eat the same meals from week to week. They rotate between the same 2 or 3 breakfasts, prep a lunch they’ll eat for the rest of the week, or eat leftovers for dinner. The “Recent meals” feature eliminates the need to manually enter repeat meals over and over again.
Highlight 1 of 2
Nobody wants to see an empty screen. Here’s our friendly egg again to provide a moment of delight.
Highlight 2 of 2
Nobody wants to see an empty screen. Here’s our friendly egg again to provide a moment of delight.
Recent meals are organized by meal type to make it easier to find a past meal.
Nobody wants to see an empty screen. Here’s our friendly egg again to provide a moment of delight.
Nobody wants to see an empty screen. Here’s our friendly egg again to provide a moment of delight.
Meal Conversation Screen
What differentiates Kickoff from most fitness and nutrition apps is that there’s a real human coach to provide accountability, motivation, and personalized feedback. As such, it was important to incorporate this messaging feature in the meal log.
Highlight 1 of 2
Each conversation is specific to a meal. It can be a single comment from the coach, or a longer exchange between coach and client.
Highlight 2 of 2
Each conversation is specific to a meal. It can be a single comment from the coach, or a longer exchange between coach and client.
Each conversation is specific to a meal. It can be a single comment from the coach, or a longer exchange between coach and client.
The conversation isn’t just for coach feedback; it can also be initiated by the client to ask questions.
Each conversation is specific to a meal. It can be a single comment from the coach, or a longer exchange between coach and client.
Retrospective
What went well
That was a designer's dream project! I was able to do extensive research and testing, and was allotted a reasonable amount of time to ideate and design the screens.
I had the privilege of working with exceptional engineers who flawlessly brought complex features and designs to life exactly as I had envisioned.
That was a big feature! Thankfully, the scalable designs allowed us to roll out multiple fast-follow releases. We began with the main meal log and meal detail screens, then added recent meals, good choice tags for meal feedback, and lastly, meal conversations.
What could have been better
Although testers responded positively to the new designs, we didn’t get user feedback post-release. I would have liked the opportunity to do more testing and iterate.
The calorie-tracking issue caused substantial frustration among the team. Despite our unanimous agreement to exclude it from the app, some team members continued to second-guess the decision. I did my best to remind them of our rationale and emphasized that we had no new information or data to make us reconsider our stance.