top of page
Litness
Designing a calorie-tracking weight loss mobile app for Udacity's UX Design Course.
ROLE: UX / UI Designer and Researcher
TOOLS: Figma, Zoom, Miro, Procreate
TIMELINE: Oct 2020 – Feb 2021, Dec 2022
OVERVIEW
In 2019, over 68.7 million smartphone users in the United States used a health / fitness application at least once per month.
​
A few months into the shelter-in-place order for San Mateo County during the Covid-19 pandemic (July 2020), I decided to track my calorie and protein intake using the most downloaded calorie tracking application to lose weight and to make sure I was reaching my daily protein goal.
After a few days of using MyFitnessPal, I realized I wasn't enjoying the cumbersome user interface and switched to another app for its seamless usability and visual aesthetic.
Ultimately, this led me to want to explore other users' motivations, experiences, pain points, and workarounds to design a calorie-tracking application that better serves users and their weight loss goals.
RESEARCH AND ANALYSIS
Initially, I ran semi-structured Zoom interviews with several of my Instagram friends who have used or are actively using a calorie tracker for weight loss. With 10 interviews conducted, I had plenty of data to create an affinity board to piece together common themes users were experiencing. One key finding that stood out the most from the discussions:
70% of users felt that inputting accurate measurements for food entries often felt troublesome and made it harder to log food easily.
DESIGN: PAPER SKETCHES AND LOW-FI PROTOTYPES
After synthesizing key findings from the interviews, I began to sketch out a few ideas utilizing the Crazy 8 method. I then prototyped more detailed sketches that I hypothesized to possess a better user flow that addressed my interviewees’ friction regarding entering their food and serving size.
I diagrammed a user flow chart to assess my initial clickable lo-fi prototype and make notes on the users' task to complete.
In Figma, I created a low-fidelity wireframe of a landing page with a distinguishable CTA “fork” button that users could pinpoint and click intuitively to input their food entries.
I then added a drop down menu of the different numerical values in grams
After designing my initial high fidelity prototype, I wanted to get user feedback by doing a test conducted by reaching out to other aspiring UX design students in the message boards on Udacity’s student portal and reaching out to a few friends already working within the tech industry. The tests were documented using lookback.io that recorded their display screen and audio of the test subjects as they were clicking through my app.
USABILITY TESTING: FURTHER INSIGHT
With the information gained from testing, I discovered that my design needed a stronger CTA button on the main page to capture the users' attention as most users felt confused as to what they were supposed to do when they made it to the main page as the “fork” button placed in the middle of the card wasn’t as intuitive to click as I had assumed.
50% of users noted that there needed to be an “add (+)” button after users clicked on the serving size to confirm the entry was added.
30% of users were confused about the main page as the circular graph does not indicate what the circles surrounding the FORK icon are for.
​
One user noted that the visual weight of the cards on all the screens were all equally weighted and that it competed for their attention and caused confusion as to where to click.
.png)
DESIGN: FURTHER ITERATION
After usability testing of my second high fidelity design, I gained a stronger sense of what did and didn't work. Users pinpointed a few things I overlooked, such as not having a cancel button in the food entry/serving portion card. Research provided a clearer picture towards iterating a better version of my product where I completely revamped the home screen with a CTA button for food entries for each meal of the day as well as a corresponding color.
DESIGN ITERATION 2022
After completing Udacity’s UX Design Course, I ultimately came to the realization that I needed to again re-iterate my calorie tracking app upon learning more about Figma’s auto layout features, variants, design systems, and more about current design principles and current trends.
I revamped the navigation bar with a circular "+" icon that would rotate on click and popup a sub menu for users to click to add food to a meal. The "+" icon rotates 75 degrees to a "x" to signify to the user that they can cancel out of this sub menu as well.
The user can search for a food item to add via the search bar, their past food choices for the meal they intended to track, or even recommendations to help achieve their caloric / macro goal. On the "Salted Popcorn" selection page, I added a down chevron arrow by the "grams" input window to note that other options are available for serving sizes when a user clicked on it. Then a modal would pop up and users could pick other units of measurements or cancel out of that action. Once the unit was chosen, the user could then input the desired numerical value of the unit of measurements with the native numpad.
bottom of page