A SET OF FEATURES

UX research

Interaction Design

Ui design

Usability testing

Branding

A person holding a mobile phone with a mockup of an app on the screen.

Overview

MY ROLE

UX RESEARCH
INTERACTION DESIGN
UI DESIGN
USABILITY TESTING

NOTE: I am not affiliated with Lifesum. This case study showcases a simulated project adding a set of features for a pre-existing product.

BACKGROUND

Lifesum has a vision to simplify the path to long-term healthy living for millions of people worldwide. Evolving from a calorie tracking app, Lifesum offers a platform that motivates users to live a healthy, balanced lifestyle with tailored plans for better eating. Lifesum’s goal is to create the number one self-care service for the Millennial Generation.

OPPORTUNITY

People who use food tracking apps have individual needs and individualized goals that can range from weight loss or gain, nutrition & health, improving brain function, and improving athletic performance. These goals may require information to be organized in a variety of ways. Lifesum has an opportunity to improve or add customization features to retain current users and expand market share.

Solution

I created a set of features that add flexibility to the way subscribers track their food by allowing them to control:

  • how many meals are included in their day
  • errors made when adding food to the diary
  • multiple nutrition goals for different days
  • the exact increment of water to track
A mockup of a an app on several mobile phones.

How did I land on this solution?

RESEARCH GOAL

My research goal was to understand why people subscribe to food tracking apps and what included features help them to make that choice.

RESEARCH METHODOLOGIES

USER INTERVIEWS
USER SURVEYS
SURVEY OF LIFESUM COMMUNITY REQUESTS
COMPETITIVE ANALYSIS

RESEARCH contstraints

I was limited to recruiting within my networks and I could not find Lifesum subscribers to interview and survey within my timeframe. I opted to interview and survey people who regularly use any food tracking app, which gave me broad insights but limited my findings specifically around Lifesum. Accessing the Lifesum community requests site proved to be a valuable resource to pull specific insights.

RESEARCH OBJECTIVES

  • Understand the different reasons and motivations behind customers downloading a food tracking app
  • Understand why a customer chooses one food tracking app over another
  • Identify competitors, their target consumers, and how they track meals, macros, and calories
  • Understand the reasons behind tracking food, calories, and macros by meals
  • Understand the barriers customers encounter for subscribing to a Premium Lifesum account and whether or not having custom features is a significant factor

Research

Lifesum is falling behind several competitors when it comes to flexibility features.

A chart comparing nutrition apps.

competitive analysis

When comparing features that allow customizing meals to track macros and calories per meal, timestamping and scheduling, and adjusting calories for different days, learning about Lifesum’s lack of customizing features made me curious to find out if features like these are valuable.

People want flexibility.

In a survey focused on customization, many of the participants said they valued it.

Survey

Since I didn't have access to Lifesum users, I found it difficult to compare my interview participants' struggles to theirs directly. So I cast a wider net with a survey focusing on what participants value in their food tracking app. The results showed that participants tend to appreciate a flexible organization system that accommodates their needs.

92%

92% OF Participants value customizing which meals are tracked

53%

53% of participants value customizing their target calories per meal

54%

54% of participants value customizing their macros per meal

An image showing reviews of the app.

Lifesum subscribers are leaving for apps with better tracking flexibility.

Lifesum community requests site

I found the Lifesum feedback site to be a helpful resource in gaining insight into who Lifesum users are, what they value, and what their pain points are.

The top-upvoted post had over 5,000 votes and asked for flexible meal options. Comments on this post mentioned diverse needs from trying to gain weight, dealing with diabetes, intermittent fasting, and gastric bypass surgery. Many people also noted that they wanted their entries timestamped.

Other top posts included asking for flexibility in the increments of water to track, and different goals for different days.

Thumbs up icon.

5,098 votes

ADD ADDITIONAL MEAL OPTIONS

247 SUPPORTING COMMENTS
ORIGINAL POST: AUGUST 13, 2015

Thumbs up icon.

2,729 votes

should be able to choose your own amount of water, the size of your glass/bottle

76 SUPPORTING COMMENTS
ORIGINAL POST: july 10, 2015

Having control of which meals to track is important.

Assessing the data from the Lifesum community request site, user surveys, and user interviews, it is clear that flexibility is valuable.

A chart comparing what customers value in the app.

qualitative data synthesis

Looking at all the information together, I found a few areas for improvement that fall under the umbrella of customization:

  • how many meals are included in their day
  • errors made when adding food to the diary
  • multiple nutrition goals for different days
  • the exact increment of water to track
Chart key.

How might we give people flexibility when logging food and water, so they are more likely to stick with it?

Once I had a set of features to work with, I looked at how they would integrate within the current Lifesum app.

Assigning Tasks to New Features

Task Flow: Customize meals.

CUSTOMIZING MEALS Tracked

Ashley wants to change her food diary to include a morning snack.

Task Flow: Change timestamp.

ADDING timestamps to the current diary style

Ashley forgot to track her lunch earlier. She needs to track her lunch and make sure the timestamp is correct.

Task Flow: Customize nutrition.

ADJUST TARGET NUTRITION FOR DIFFERENT DAYS

Ashley has decided to adjust her nutrition on her rest days to reach her goals faster.

Task Flow: Track Water.

TRACKING CUSTOM AMOUNTS OF WATER

Ashley drank a small glass of water at a friend's house - only 8 ounces. She needs to add this smaller amount of water to her diary.

Design

Design process

I started by sketching each screen I would need by hand. I referenced the task flows and screenshots of the original app, noting where I would be repurposing existing design patterns and UI elements. From there, I narrowed the sketches down and created mid-fidelity screens in Figma using screenshots and noting where I might need to make additional icons. After receiving feedback, I created higher fidelity screens, a few new icons, and a basic prototype. I administered four usability tests that helped to find additional improvements – especially around UI copy.

Customizing meals

Hi-fidelity mockup of customizing meals.

Final screen

See the process by clicking through the slides.

Wireframe sketches: customizing meals.

Initial sketcheS

To have custom meals in the Diary, I added "Meal Settings" to the settings screen. I decided to mimic the existing "Food Preferences" settings with a simple toggle list.

Hi-fidelity wireframes: customizing meals

Initial wireframes in figma

I decided to add even more flexibility here by including "Add a custom meal."

The final screen includes a pencil icon so users can edit each name.

Correcting an entry

Hi-fidelity mockup: correcting an entry

Final screens

See the process by clicking through the slides.

Wireframe sketches: correcting an entry.

Initial sketcheS

As I sketched out a way to add a timestamp, I wanted a way for people to correct an entry. A modal made sense to update these items based on other patterns in the app.

Hi-fidelity wireframes with notes: correcting an entry

Initial wireframes in figma

I had two options for placement of the timestamp: 1) in the entry details or 2) in the header. My mentor and I decided it was better in the header because users could find it quickly. I also changed the arrow to a pencil icon to match similar situations in the app.

Nutrition Settings

Hi-fidelity mockup: nutrition settings.

Final screens

See the process by clicking through the slides.

Wireframe sketches: nutrition settings

Initial sketcheS

Lifesum currently has the Calorie and Macro settings in different places. But these settings needed to be combined to allow the user to add goals. I found a few patterns to repeat here: inputs from "Personal Settings" and days of the week selection from "Notification Settings."

Wireframe sketches: nutrition settings

Initial sketcheS

I decided I needed a page that listed out all goals, starting with a default one for every day.

Hi-fidelity wireframes: nutrition settings

Initial wireframes in figma

The most complicated mini-feature was combining the nutrition settings to create a new goal. I needed to design additional screens from these two base screens to test the feature.

Tracking any increment of water

Hi-fidelity mockup: track water

Final screens

See the process by clicking through the slides.

Wireframe sketches: track water

Initial sketcheS

I decided a status ring that matches Lifesum's food tracking could also be used to track water. At first, I thought there could be an "add" button leading to a modal with size options. Instead, I decided on a simple list and an input modal.

Hi-fidelity wireframes: track water

Initial wireframes in figma

The Water Settings adjustment was straightforward. I only removed the choice between the two water containers. People can then add any water increment that they need.

Priority Revisions

Before and after revisions for nutrition settings.

UI Copy

I conducted four usability tests, revealing confusion in the nutrition goal settings. The feedback helped to simplify the flow and adjust verbiage for clarity.

Before and after revisions for nutrition goals.

UI Copy and contrast

There were a few buttons that needed more clarity and icons that benefitted from additional contrast.

SEE THE PROTOTYPE
Before and after revisions for nutrition settings.

confirmation simplification

50% of the usability test participants thought the repeated confirmation was annoying. One suggested that a one-time verification at the end of the flow would be less intrusive.

SEE THE PROTOTYPE

Iconography

I designed a few new icons to match the rest of the Lifesum system.

“This seems like a great idea. I have tried a lot of food tracking apps, including Lifesum. It was a really nice app, but ultimately I felt that Lifesum was too rigid.”

Usability test participant

Conclusion

What's next

The added features give subscribers like Ashley flexibility when logging food and water, so she is more likely to stick with it and continue subscribing to Lifesum. The solution fits seamlessly within the design system and passes basic usability tests.

If I had additional time, scope, and access to the Lifesum dev team, I would collaborate with them early in the process to see what is possible. I imagine we'd start with one of these ideas smaller ideas that could make a significant impact, like the custom meal settings. We would have to refine and test it, especially with the nutrition breakdown.

My mind continued to return to a question while developing this solution: “Why haven’t they implemented a solution to these popular requests?” I’m guessing there are technical challenges associated with nutrition algorithms — a constraint I did not consider in my process. However, I think this is an essential improvement that Lifesum should make to stand out in the field of food tracking apps.