A digital display featuring several smartphone screens with health and fitness app interfaces. "A.I. Body Simulator" is prominently featured, encouraging users to upload a photo. The screens show images of healthy food, fitness activities, and app features like a dashboard and food log. The "fitfare" logo is visible on one screen.
white circular logo with text "fitfare" in lowercase

Rethinking Nutrition Tracking

ROLE

UX | UI DESIGNER | RESEARCHER |

GRAPHIC DESIGNER | BRAND DESIGNER

TIMELINE

100 HOURS

ESTIMATED READ

10 MINUTES


Smartphone displaying an app with fresh fruits and flowers, featuring the logo 'fitfare'. Berries, cut citrus, rhubarb, and tulips are visible.

Problem

Users (ages 25-35) hesitate to use nutrition tracking apps due to uncertainty about its value.

How user’s feel about nutrition tracking?

Based on user interviews

Sliced oranges on yellow background with text "Nutrition tracking could help" in speech bubble.
Sliced cucumber and kiwi background with quote "The first thing I think about when I hear nutrition tracking is overall negative thoughts" - Ken, in a speech bubble.
Close-up of raspberries with a speech bubble containing the text: "I would use a nutrition tracking app more if I was introduced to something new" -V.
Close-up of a sliced kiwi fruit revealing green flesh and black seeds.
Close-up of a sliced kiwi fruit showing green flesh and black seeds.

Goals

Show the value of nutrition tracking in an interesting way

How Might We’s

How might we make users feel confident about their efforts when tracking nutrition?

How might we stay relevant with competitors?

Two ripe red cherries with stems on a black background.

Once the goal and how might we’s were created, user interviews were conducted to help me understand what users want in nutrition tracking

Understand our users

Key Findings

I conducted five 1:1 interviews with individuals who are on their fitness journeys . Our goals were to:

Uncover pain points

• Discover the best ways to interest skeptical users in nutrition tracking apps

  1. All users want to see the benefit of nutrition tracking

    “I must see the benefit of paying for premium”

    “I want to see what the features do”

  2. Most users want something easy to navigate thats also informative

    “Something easy to navigate and simple”

    “Introduce ways to approach different lifestyles”

Personas

Empathizing with Target Users

Once pain points were uncovered creating user interviews helped me compose different user personas with varying levels of nutrition experiences

A triptych display featuring profile cards for three individuals, each with a distinct background and food preference. The first card is for Victoria, the pescatarian trainer, with goals and a sushi image. The second card features Brian, the pizza loving novice, with goals and a pizza image. The third card is for Kenneth, the non-tech savvy lamb lover, with goals and a lamb dish image.

Victoria- The Pescatarian Trainer

A fitness professional with a strong educational background in nutrition and its effects on the body. This user is experienced with nutrition tracking apps and seeks to explore new features or insights that could enhance their existing knowledge and routine.

Brian- The Pizza Loving Novice

An individual accustomed to an unhealthy diet but motivated to improve their eating habits due to health concerns. They have had previous negative experiences with nutrition tracking apps, finding them expensive and not particularly helpful in their wellness journey. They seek a solution that is affordable, effective, & user-friendly.

Kenneth- The Non-Tech-Savvy Lamb Lover

A user who is moderately health-conscious but struggles with consistency in maintaining healthy habits. While not entirely unfamiliar with technology, they find nutrition tracking apps cumbersome and would prefer a more intuitive, less intrusive solution that simplifies the process of monitoring their diet.

Grilled fish tacos on wooden board with lime wedges and fresh salsa.
Line drawing of a pizza with one slice removed
Silhouette of a lamb chop
A fresh red strawberry with green leaves on a black background.

During user interviews I learned about existing nutrition apps that users tried to help expand upon current pain points

Sliced kiwi and blueberries floating on a white background.

What thier users are saying

Competitor Benchmarking

MyFitnessPal logo featuring a white silhouette of a person leaping, set against a blue square background, with "myfitnesspal" text beneath.

You'll need a fitness degree to be able to use the app. Clearly they assume everyone has grown up with technology. It's a shame because it seems like it could really help people”

“The app is still not user-friendly.”

“Nothing about Cronometer is easy and I am very frustrated.”

Cronometer logo featuring an orange apple with a target and arrow, followed by the word 'Cronometer' in white text.

“ Some days you just want to eat and not worry about fat content, etc. but still want to keep track of what you've done. It's creating food anxiety and major guilt. I'm sad I paid so much for the year. Now I feel obligated to use it.”

“Not very intuitive”

Current competitor apps are hard to use and pricey

Exploring other apps

What other apps are doing

Mobile fitness app dashboard showing steps, exercise, and progress graph. Includes a button for premium upgrade, search bar, and navigation menu with Dashboard, Diary, Newsfeed, Plans, and More options.
Close-up of a halved lemon with visible segments on a black background
Mobile app screen displaying a "Foods" section with options for custom recipes, custom foods, and Oracle nutrient search. Buttons include "Create Recipe," "Import Recipe," "Create Food," and "Search." Navigation tabs at the bottom include Home, Diary, Foods, and Settings.

Cronometer’s recipe analysis and sharing is a key custom feature

Screenshot of a MyFitnessPal app showing a calories remaining summary, steps count, and an article titled '5 Summer Desserts With Less Than 100 Calories'. Below it, there are images of desserts and an ad for a workout scheme.
Screenshot of a calorie tracking app, showing calories remaining for the day. It displays a goal of 2,320 calories, with 0 food consumed and 3 calories burned from exercise, leaving 2,323 calories remaining. The app offers options to add food entries for breakfast, lunch, dinner, and snacks. An advertisement for Huntington's 4.44% APY Money Market Accounts is visible, along with a prompt to "Go Premium" to remove ads. The navigation bar includes buttons for Dashboard, Diary, Newsfeed, Plans, and More.

Myfitpal focuses on the community aspect with their newsfeed feature that offers related articles, workout plans and food recommendations.

After viewing what other apps are doing and speaking to potential users, I knew I needed to focus on a feature that interesting, easy and specific to this brand. User flows, initial sketches and feature development were my next step.

User Flow

User flow guides user through the simulator process. I wanted to focus on a feature that had minimal steps to help simplify the process

Flowchart illustrating the process of using an AI simulator, including steps like selecting photos, uploading, camera permissions, and saving results.

Once flows were done the brand identity was created to help develop future low fidelity screens

Our Vibe

Brand Identity

Name

Fit: adj; in good health, especially because of regular physical exercise.


Fare: noun; a range of food of a particular type

Logo

"fitfare" logo in white text on a green circular background

The logo’s thick-to-thin type symbolizes the app’s transformative impact on weight loss

A sequence of five circles in different colors: navy blue, terracotta, sage green, light green, and white, each outlined in black.

Color

Based on users associated fitness nutrition with colors found in nature.

Four pineapples in a row

Initial Sketches

After research I realized that we needed an easy feature that would interest users. While exploring competitor apps, I realized each app had a special feature that users enjoyed. Thus the A.I body simulator was born from users wanting to see immediate benefits from eating healthy, easy navigation and something that would set us apart from existing apps was also key

Hand-drawn wireframe sketches showing multiple mobile app interface layouts labeled with headings, logos, image placeholders, and text areas for elements like 'Loading Page', 'Image Screen', 'Processing', and exercise tips.

Lo-fi Screens

After initial sketches the key low fidelity screens for the body simulator feature was created. These screens show the photo selection, simulator results, and catered steps based on your results.

Mobile app interface showing AI Body Simulator, with options to upload a photo and view simulation results, along with a dashboard menu at the bottom.

Upload Screen

More Info Screen

Body Results Screen

The image shows three screens from a fitness app interface. The first screen features an "A.I. Body Simulator" prompting users to upload a full body photo with "Select Photo" and "Take Picture" buttons. The second screen is an A.I. Body Simulator interface with options to adjust diet, current weight, and fitness, showing a person in workout gear. The third screen displays personalized suggestions based on results, featuring an image of pasta, a gym ball, and people practicing yoga, with menu icons for dashboard, food log, newsfeed, and a barcode scanner at the bottom.

Upload Screen

Body Results Screen

More Info Screen

Mid-fi Screens

After initial sketches the key low fidelity screens for the body simulator feature was created. These screens show the photo selection, simulator results, and catered steps based on your results.

After developing the Mid-Fi screens, I wasn’t happy with the visual aspect and button drop option on the body screens. It also didnt feel as easy as I initially wanted so I explored other input options.

High Fidelity Screens

My second iteration included using a scrolling circular graphs opposed to drop down menus. The drop down menu options seemed to complicate the process and the goal was to simplify it.

Fitfare app interface showcasing AI Body Simulator with sections for photo upload, entering weight, and displaying weight input of 211 lbs.

Upload

Enter Weight

Weight Screen

Three mobile app screens from "fitfare." The first screen shows an AI Body Simulator indicating a current weight of 211 lbs with an image of a woman posing in activewear. The second screen displays the AI Body Simulator Results with options "Vegan" and "Cardio," a new weight of 169 lbs, and a similar image of a woman. The third screen suggests personalized options based on results, featuring food and exercise imagery, including a salad and fitness equipment. Menu items at the bottom include Dashboard, Food Log, Newsfeed, and Barcode.

Overview

Selections

Results

I added additional screens to make the steps easier to understand. The scroll bar option is a more convenient and interactive choice.

A whole orange and a halved orange showing juicy segments on a white background.

I am currently working on a reiteration to further simplify the process. Check back soon for the final prototype

View Similar Work