Making diet tracking easier in Lifesum

Defining a new direction for the Lifesum mobile app

BACKDROP
In 2018, Ryan Magee and I tried Lifesum, a diet tracking and planning mobile application which recently reached 35 million users. Motivated to reduce the barrier to people becoming healthier, we pursued a redesign of their core feature - adding meals.
Since this was a school project, we only had 7 days to complete this project. During these 7 days, we read research papers, app reviews, and completed a heuristic evaluation, a design proposal, & usability testing.
Timeline: 7 days
Team Members: 2
My role: User Research, Prototyping, User Testing
Tools used: Figma, Invision

Here is a timeline of how we divided our time in tackling this design problem.

THE PROBLEM
🌟 A good first impression
Their beautiful onboarding impressed us; they asked relevant questions and gave recommendations right at the start. They get brownie points for their beautiful illustrations & animations.
⁉️ The cracks start to appear
However, as we started to add and track our meals, we began to struggle. Features such as the barcode scanner were easy to miss. For a user to add a custom meal, they needed to go to a different page altogether. 
More than 50 app reviews highlighted this struggle. Many mentioned they switched to MyFitnessPal (a competitor) due to this.
This was a key cause of concern not only for the user but for the business as well.
Below is a sample of critical app reviews highlighting the core issues. 
📉 A steep challenge of retaining users
Further investigation led me to discover a "A Stage-Based Model of Personal Informatics", a research paper that listed the guidelines with which I should evaluate personal informatics apps such as Lifesum. ​​​​​​​
Using these guidelines, I identified that the current pain points were in the data preparation and collection stages.

The user journey of tracking one's personal information is very user driven and hence the systems are highly dependent on a user's motivation.

It highlighted that any further friction in these stages might frustrate users & cause them to leave because it was already so difficult to create motivation for them to download the app and collect data on themselves daily.
Using our research, we identified the following reasons behind user retention dropping for the app within the first 2 weeks:
- 🗂️ Incomplete & Inaccurate Databases which led to false recommendations
- ✏️ Users cannot find the option to manually add custom foods
- 😞 Forgetting to record meals daily with some seeing the process repetitive.
- 🥗 Recommendation of diets that may not be appropriate for all of its users.
🤦‍♀️ Adding a custom recipe is very frustrating!
We mapped the entire user journey of a new user to understand the most commonly shared frustration on app reviews better - adding a custom recipe. 
It took a shocking additional 7 steps & 10 extra minutes just because the add meal screen did not have an option to add a custom meal. 
PROTOTYPING
✨ Introducing 3 new user journeys
The principal objective of our first prototyping exercise was defining how we could introduce & eliminate friction to reduce user frustration. This helped us converge to adding the following three new user journeys: 
1. Asking the user to confirm details when they scan a bar code to ensure it is correctly identified.
2. Allowing a user to add a custom food or recipe from the add meal screen itself rather than the separated frustrating user journey the user has to take to add a recipe.
3. Listing the favorite foods on the add meal screen itself rather than hiding them behind a favorite button. 

I made this in Overflow, a user journey tool I discovered during the span of this project

💭 Re-imagining the entry point to creating a meal
To start our ideation process, we began by sketching out ideas for the add meal screen. Apart from lowering the search bar, we needed to introduce a button for adding custom recipes & allow the user to access their favorite meals quickly.
Our initial idea started with huge buttons & list items. However, we soon realized that this made the screen busy & more importantly, these were secondary & tertiary actions...search was the primary action! 
This led to an exploration in the design where we placed the barcode scanner within the search bar & made the visual appearance of "add custom" follow the Human Interface Guidelines of Apple.

I wish I discovered graph paper back then! I promise I've improved in making neater sketches.

Even though we had reduced the cognitive load in our second and third ideas we decided to convert each into high fidelity prototypes as we felt more pronounced buttons may help the user.
💻 Switching to a higher fidelity medium
In our first round of iteration we focussed on incorporating the Lifesum brand into our design. During this stage we realized that replacing recents with favorites may not be wise as the user would have to favorite many food items. The advantage recents provided was that if an item was a favorite it would frequently show up in the recents.
👎 Lifesum's Design System needs better accessibility
While aesthetically pleasing, the green background & thin fonts of the Lifesum design system made the system less accessible for color-blind users. This also made it difficult to differentiate between headers & tertiary actions.
To compound this issue, the contrast ratio between the text and the background was 3.16 which is 1 point below the minimum and 4 points lesser than the recommended WCAG values
Considering the overall impact of these color & font styles, we believe that the Lifesum design system needs an update for accessibility. 

Yes I do critique my own work (all the time)!

👁️ Designing for Accessibility
Improving accessibility, meant departing from the established green background aesthetic. While change is hard, it is needed. Rather than letting green represent the brand, we wanted the value of caring for users of all kinds to represent the Lifesum brand.
We introduced a white slate background which improved accessibility, text legibility & made tertiary actions more pronounced. This would resonate with the aesthetic other mobile apps have been moving towards since 2018 & keep Lifesum with the trend.
USABILITY TESTING
😲 People preferred higher cognitive loads
To identify the most successful of the 3 versions of the "Add Meal" Screen, we conducted a usability test with 12 students who were either interested in dieting or already doing a diet. Our personal hypothesis was that people would prefer version 3 as it had the least cognitive load, however it turned out to be the exact opposite. 
Users were able to quickly identify the add custom meal & barcode options fastest in version 1 & specifically noted that they preferred bigger buttons versus smaller less pronounced icon buttons. 
BACK TO PROTOTYPING (FOR A QUICK MOMENT)
✅ Confirmation (friction) to reduce frustration
Many users had complained that the barcode scanner wasn't always accurate & they wish they could confirm the details before adding it to their meal. While Lifesum did have an option for it, it was easy to miss & get frustrated. 
Hence we added introduced a confirmation screen to ensure the user could actively confirm the accuracy of the scan & not be frustrated.
FIN.
📗 The Results
During our usability testing, we tested both the current design (as a control) & new designs. Unlike the old design, each user was able to now figure out how to add a custom meal with testers appreciating the clean white look & pronounced buttons.
"You both did a great job creating a high fidelity prototype. Great job showcasing the different iterations of the application and design process. A fine description of the app. Good connection to your readings, and a good identification of the problem." 
- Chris Oh, our Teaching Assistant for Bio-Informatics
📚 Key Learnings
Due to the short project length, my team-mate recommend we read published research in this space. It was because of him that I realized the value and impact published research papers can have on a project. Without "A Stage-Based Model of Personal Informatics", we wouldn't have been able to narrow the scope of our project & quickly identify the area we need to focus on.
😬 Key Challenge
Since we had just discovered the app ourselves, our ideas were all over the place, at the start of the project. We did realize this and discovered and used an action priority matrix to identify where we should focus our efforts. Using this chart was really beneficial in making us have a goal & defined end point. This is a solution I use even today in other projects. 
🤔 What Next?
During this project, we explored the idea of updating the design system for better accessibility. While time limited us to implementing it only for the key screens, I would love to explore implementing it for the entire application. 
While Ryan and I had explored the process of adding a meal into Lifesum, I think it would be really interesting to backtrack & first understand how users discover, decide, & eat meals. Doing this could help us discover interesting how we could provide relevant food recommendations when a user is shopping at a store or deciding which restaurant to eat at and what dish they should eat.
Back to Top