AI-BASED MEAL LOGGING

World's fastest
meal logging experience

World's fastest & easiest meal logging experience

COMPANY

Veri

ROLE

Lead Designer

EXPERTISE

UX/UI Design

YEAR

2024

About project & User problem

Veri is a personalized metabolic health program, heavily relying on meal logging. The goal of the project was to improve key feature of the app - meal logging, and make it fast, fun, and useful experience for users.

Team

Product owner

Lead designer (me)

Developers

Data Engineer

Product owner

Lead designer (me)

Developers

Data Engineer

Product owner

Lead designer (me)

Developers

Data Engineer

Timeline

From explorations to final designs in 5 weeks while working with multiple projects at the same time

Background

Veri app focuses heavily on meal logging, and therefore making the meal logging experience as seamless as possible is important for the overall experience of the product.

Traditional meal logging is usually based on manual text input which requires time and energy, and can become an annoying task to complete multiple times during the day.

Why

Logging foods takes too much time and effort

See an example of the old manual meal logging from here: https://tonjrv.com/old-home

Users aren't including foods/ingredients to meals

Over 60% of the meals logged in the Veri app had only 0-1 foods logged inside them.

Note: Meal = Breakfast, lunch, dinner etc., Food = Food item like drink or ingredient added to meal.

Users stop logging food over time

The longer users are using the app the less foods they are adding to their meals.

How

AI-based image detection model

Our team had developed a prototype of an AI-based image detection model that seemed to be working well in detecting the ingredients from the meal.

I started to experiment with it and created few example concepts that got people excited, which led to a completely new project being added into our app roadmap.

My role

Lead designer

As a lead designer of the project my responsibilities were to be responsible for maintaining the design process from the start to the final product, including discovery & definement, ideation & concepting, evaluation & iteration, and supporting developers with implementation.

I also created Rive animations that are used to indicate when the AI is analyzing meal information.

Discovery & Definement

It was clear that faster solutions were desired since the complexity of meal logging was one of the main feedback received from our users.

How

Collecting feedback from users

The team and I gathered feedback from our users about the meal logging and it's pain points. We utilized in-app surveys, feedback received by our customer service, and user interviews.

Defining the scope of the project

Together with the team we decided the scope for the project which was to utilize AI-based image recognition to improve meal logging flow.

OVERALL FLOW | BEFORE & AFTER

TRADITIONAL MEAL LOGGING FLOW

NEW MEAL LOGGING FLOW

Main screen

Open the manual meal logging sheet

Meal logging screen

Type manually and search for all the ingredients you are looking for.

Meal logged

Done deal, ready to go.

Camera modal

Take image of your meal

Ability to change between two modes

Ideation & Concepting

Based on the early discussions, and ideation sessions I came up with a main concept focusing on meal logging with camera.

Creating new concepts and flows

Created high-level concepts and gathered feedback from the team

Gathered ideas and requirements from the team, and discovered that we want to prioritize efficiency of meal logging. Also, created preliminary flows that could work to solve the issues.

High-fidelity prototypes in Figma

After the early explorations and discussions with the team, I moved onto creating four different prototypes in Figma.

Early explorations on what the meal logging could be with camera

Evaluation & Iteration

Faster meal logging experience was loved, but more communication after taking the image was requested by users.

How

Internal and external testing rounds

Tests with prototypes done in Maze, with the help of Figma prototypes. Combined with user interviews to gather more in-depth feedback.

Internal testing phase

After finalizing the main flow, we created a light version that we shipped into the test app to gather feedback internally.

Canary release

We released the program first for the small patch of our users to validate it with actual usage, and to see if there are anything to be fixed before rolling it out for all users.

Foundings

Fast meal logging was loved

In general people loved the fast and efficient meal logging with camera

Prototypes with more manual work was loved and hated

Some people loved the prototype with manual confirmations for foods (See Prototype 1 below this section ↓), but many people didn't like it since it wasn't drastic enough change from the traditional text-based meal logging experience.

Animations were loved

The animation shown after taking an meal image was loved (See prototype 3 below this section ↓), even though it was super quick version done in Figma to just communicate what it could be like. I built the final version of animation later in Rive.

Iterations

Improve the communication on what happens when taking the image

I added explanation text for the meal logging screen, and also attached more information to meal logging animation to explain that you can actually close the app after logging.

Put more effort into animations to turn meal logging into delight moment

I moved to Rive to animate few parts of the meal logging, to make the experience more engaging and delightful.

Ensure that old manual logging flow is easy to access

When we did canary release for the feature, we noticed that some of the old users were confused since they didn't find the old manual logging easily. We then made sure that old manual flow is exactly the same as before if you prefer using it. This solved all the feedback received, and we got a lot of positive feedback from these customers.

Some of the prototypes that I created after mapping out different possibilities

Prototype 3 was the most liked one,
and the one that was implemented later on.

PROTOTYPE 1
Closest to original text based logging, that would provide a clear step for users to confirm AI-detected foods.
Test results → This felt still too "manual" for many participants and wouldn't make the flow fast enough. Even though many people liked this one.
PROTOTYPE 2
Fastest flow I could imagine. Just take image, and you are good to go. Minus side in this is that you can't immediately see the logged foods.
Test results → People felt that they need more transparency in what goes into their meals. So this one was too fast.
PROTOTYPE 3
Two taps to log a meal + show animation when we are fetching the data from backend.
Test results → Most liked flow, clear loading state for food fetching was loved and people liked the transparency in communication.
PROTOTYPE 1
Closest to original text based logging, that would provide a clear step for users to confirm AI-detected foods.
Test results → This felt still too "manual" for many participants and wouldn't make the flow fast enough. Even though many people liked this one.
PROTOTYPE 2
Fastest flow I could imagine. Just take image, and you are good to go. Minus side in this is that you can't immediately see the logged foods.
Test results → People felt that they need more transparency in what goes into their meals. So this one was too fast.
PROTOTYPE 3
Two taps to log a meal + show animation when we are fetching the data from backend.
Test results → Most liked flow, clear loading state for food fetching was loved and people liked the transparency in communication.
PROTOTYPE 1
Closest to original text based logging, that would provide a clear step for users to confirm AI-detected foods.
Test results → This felt still too "manual" for many participants and wouldn't make the flow fast enough. Even though many people liked this one.
PROTOTYPE 2
Fastest flow I could imagine. Just take image, and you are good to go. Minus side in this is that you can't immediately see the logged foods.
Test results → People felt that they need more transparency in what goes into their meals. So this one was too fast.
PROTOTYPE 3
Two taps to log a meal + show animation when we are fetching the data from backend.
Test results → Most liked flow, clear loading state for food fetching was loved and people liked the transparency in communication.
PROTOTYPE 1
Closest to original text based logging, that would provide a clear step for users to confirm AI-detected foods.
Test results → This felt still too "manual" for many participants and wouldn't make the flow fast enough. Even though many people liked this one.
PROTOTYPE 2
Fastest flow I could imagine. Just take image, and you are good to go. Minus side in this is that you can't immediately see the logged foods.
Test results → People felt that they need more transparency in what goes into their meals. So this one was too fast.
PROTOTYPE 3
Two taps to log a meal + show animation when we are fetching the data from backend.
Test results → Most liked flow, clear loading state for food fetching was loved and people liked the transparency in communication.

PROTOTYPE 1
Closest to original text based logging, that would provide a clear step for users to confirm AI-detected foods.
Test results → This felt still too "manual" for many participants and wouldn't make the flow fast enough. Even though many people liked this one.
PROTOTYPE 2
Fastest flow I could imagine. Just take image, and you are good to go. Minus side in this is that you can't immediately see the logged foods.
Test results → People felt that they need more transparency in what goes into their meals. So this one was too fast.
PROTOTYPE 3
Two taps to log a meal + show animation when we are fetching the data from backend.
Test results → Most liked flow, clear loading state for food fetching was loved and people liked the transparency in communication.
PROTOTYPE 1
Closest to original text based logging, that would provide a clear step for users to confirm AI-detected foods.
Test results → This felt still too "manual" for many participants and wouldn't make the flow fast enough. Even though many people liked this one.
PROTOTYPE 2
Fastest flow I could imagine. Just take image, and you are good to go. Minus side in this is that you can't immediately see the logged foods.
Test results → People felt that they need more transparency in what goes into their meals. So this one was too fast.
PROTOTYPE 3
Two taps to log a meal + show animation when we are fetching the data from backend.
Test results → Most liked flow, clear loading state for food fetching was loved and people liked the transparency in communication.
PROTOTYPE 1
Closest to original text based logging, that would provide a clear step for users to confirm AI-detected foods.
Test results → This felt still too "manual" for many participants and wouldn't make the flow fast enough. Even though many people liked this one.
PROTOTYPE 2
Fastest flow I could imagine. Just take image, and you are good to go. Minus side in this is that you can't immediately see the logged foods.
Test results → People felt that they need more transparency in what goes into their meals. So this one was too fast.
PROTOTYPE 3
Two taps to log a meal + show animation when we are fetching the data from backend.
Test results → Most liked flow, clear loading state for food fetching was loved and people liked the transparency in communication.
PROTOTYPE 1
Closest to original text based logging, that would provide a clear step for users to confirm AI-detected foods.
Test results → This felt still too "manual" for many participants and wouldn't make the flow fast enough. Even though many people liked this one.
PROTOTYPE 2
Fastest flow I could imagine. Just take image, and you are good to go. Minus side in this is that you can't immediately see the logged foods.
Test results → People felt that they need more transparency in what goes into their meals. So this one was too fast.
PROTOTYPE 3
Two taps to log a meal + show animation when we are fetching the data from backend.
Test results → Most liked flow, clear loading state for food fetching was loved and people liked the transparency in communication.

Final designs & Implementation

Based on the above steps, I finalized the designs for developer handoff, and also created interactive animations with Rive.

How

Figma file with designs

Figma file containing all of the user flows, screens, corner cases, prototypes and copy needed for successful implementation.

Rive animations

I created meal logging animations, and title generation animations in Rive, and handed them to our developers to reduce the time it takes from the developers to implement the feature.

Assisting developers with implementation

I also assisted developers to maintain the quality of final implementation.

Final flow for logging meals:
Just open the camera & take the photo

MAIN FLOW CAPTURED IN APP
This screen recording shows how the final result works and looks like. It only takes two taps to log meals. I created all the designs you see in these examples.
HOW TO CHANGE BETWEEN AI LOGGING AND MANUAL LOGGING
Drag the bottom sheet, or tap from "Search foods" to seamlessly transfer between text-based or camera based logging.
FETCHING FOODS ANIMATION
I did this interactive animation in Rive to turn AI logging into a delight moment. Just snap a photo, see engaging animation, and get variable reward by seeing your foods logged.
HOW TO EDIT FOODS
Removing AI added foods and adding new ones are important features to make food logging seamless. Here's an video how easy it is to do with the new meal logging flow.
MAIN FLOW CAPTURED IN APP
This screen recording shows how the final result works and looks like. It only takes two taps to log meals. I created all the designs you see in these examples.
HOW TO CHANGE BETWEEN AI LOGGING AND MANUAL LOGGING
Drag the bottom sheet, or tap from "Search foods" to seamlessly transfer between text-based or camera based logging.
FETCHING FOODS ANIMATION
I did this interactive animation in Rive to turn AI logging into a delight moment. Just snap a photo, see engaging animation, and get variable reward by seeing your foods logged.
HOW TO EDIT FOODS
Removing AI added foods and adding new ones are important features to make food logging seamless. Here's an video how easy it is to do with the new meal logging flow.
MAIN FLOW CAPTURED IN APP
This screen recording shows how the final result works and looks like. It only takes two taps to log meals. I created all the designs you see in these examples.
HOW TO CHANGE BETWEEN AI LOGGING AND MANUAL LOGGING
Drag the bottom sheet, or tap from "Search foods" to seamlessly transfer between text-based or camera based logging.
FETCHING FOODS ANIMATION
I did this interactive animation in Rive to turn AI logging into a delight moment. Just snap a photo, see engaging animation, and get variable reward by seeing your foods logged.
HOW TO EDIT FOODS
Removing AI added foods and adding new ones are important features to make food logging seamless. Here's an video how easy it is to do with the new meal logging flow.
MAIN FLOW CAPTURED IN APP
This screen recording shows how the final result works and looks like. It only takes two taps to log meals. I created all the designs you see in these examples.
HOW TO CHANGE BETWEEN AI LOGGING AND MANUAL LOGGING
Drag the bottom sheet, or tap from "Search foods" to seamlessly transfer between text-based or camera based logging.
FETCHING FOODS ANIMATION
I did this interactive animation in Rive to turn AI logging into a delight moment. Just snap a photo, see engaging animation, and get variable reward by seeing your foods logged.
HOW TO EDIT FOODS
Removing AI added foods and adding new ones are important features to make food logging seamless. Here's an video how easy it is to do with the new meal logging flow.

MAIN FLOW CAPTURED IN APP
This screen recording shows how the final result works and looks like. It only takes two taps to log meals. I created all the designs you see in these examples.
HOW TO CHANGE BETWEEN AI & MANUAL LOGGING
Drag the bottom sheet, or tap from "Search foods" to seamlessly transfer between text-based or camera based logging.
FETCHING FOODS ANIMATION
I did this interactive animation in Rive to turn AI logging into a delight moment. Just snap a photo, see engaging animation, and get variable reward by seeing your foods logged.
HOW TO EDIT FOODS
Removing AI added foods and adding new ones are important features to make food logging seamless. Here's an video how easy it is to do with the new meal logging flow.
MAIN FLOW CAPTURED IN APP
This screen recording shows how the final result works and looks like. It only takes two taps to log meals. I created all the designs you see in these examples.
HOW TO CHANGE BETWEEN AI & MANUAL LOGGING
Drag the bottom sheet, or tap from "Search foods" to seamlessly transfer between text-based or camera based logging.
FETCHING FOODS ANIMATION
I did this interactive animation in Rive to turn AI logging into a delight moment. Just snap a photo, see engaging animation, and get variable reward by seeing your foods logged.
HOW TO EDIT FOODS
Removing AI added foods and adding new ones are important features to make food logging seamless. Here's an video how easy it is to do with the new meal logging flow.
MAIN FLOW CAPTURED IN APP
This screen recording shows how the final result works and looks like. It only takes two taps to log meals. I created all the designs you see in these examples.
HOW TO CHANGE BETWEEN AI & MANUAL LOGGING
Drag the bottom sheet, or tap from "Search foods" to seamlessly transfer between text-based or camera based logging.
FETCHING FOODS ANIMATION
I did this interactive animation in Rive to turn AI logging into a delight moment. Just snap a photo, see engaging animation, and get variable reward by seeing your foods logged.
HOW TO EDIT FOODS
Removing AI added foods and adding new ones are important features to make food logging seamless. Here's an video how easy it is to do with the new meal logging flow.
MAIN FLOW CAPTURED IN APP
This screen recording shows how the final result works and looks like. It only takes two taps to log meals. I created all the designs you see in these examples.
HOW TO CHANGE BETWEEN AI & MANUAL LOGGING
Drag the bottom sheet, or tap from "Search foods" to seamlessly transfer between text-based or camera based logging.
FETCHING FOODS ANIMATION
I did this interactive animation in Rive to turn AI logging into a delight moment. Just snap a photo, see engaging animation, and get variable reward by seeing your foods logged.
HOW TO EDIT FOODS
Removing AI added foods and adding new ones are important features to make food logging seamless. Here's an video how easy it is to do with the new meal logging flow.

Results

AI-based meal logging was launched early 2024 and it has been received very well. People are praising it for how great and easy it is to use, and how it really makes the key part of the app better than it was before.

Increased overall satisfaction

App's CSAT score has improved ever since the introduction of AI-logging. We have received a lot of positive feedback around it.
And our Trustpilot rating is increasing solidly.

Drastically faster meal logging

Looking at the usage data, the time it takes to log meals has decreased drastically after the launch. Almost 50% of the meals are now logged in less than 10 seconds.

More logged foods

It's not just faster, but it also helps to build a better picture of users' diets with more foods logged. The amount of meals that had only 0-1 logged foods has dropped from 60% to 30%.

To make outstanding UX work, it still needs polished visual design in which I excel as well.

More logged foods

It's not just faster, but it also helps to build a better picture of users' diets with more foods logged. The amount of meals that had only 0-1 logged foods has dropped from 60% to 30%.

Allows new use cases

Since the new meal logging makes the main action in the app much easier we are able to build more features on top of it.

Allows new use cases

Since the new meal logging makes the main action in the app much easier we are able to build more features on top of it.

However, still some of the users prefers the traditional text-based meal logging.

Still around 40% of the users opt-in to use traditional logging instead of AI-logging

There seems to be many reasons ranging from privacy fears, precision issues, to not willing to take photos of meals. But we support both use cases so the ones who want more precise logging can still log manually.

Here you can see some of the
feedback we have received.

"I like that I can take a picture and the app gets a pretty good idea of what I ate, and that I can modify what the app guessed was in my picture."
-Veri user
“I also love the new feature where you can snap a photo of your plate and it will determine what is on there to make it easier for logging. It's pretty accurate."
-Veri user
"I love being able to just snap a picture of a meal and the app list everything on my plate. It tells you it's a good choice and gives it a score. - It's a game changer!"
-Veri user
“Easy to use app, the picture function for meals is awesome!."
-Trustpilot review