Nutrition Tracking App

Providing Princeton students nutritional info and meal tracking for the dining halls.

Overview

A full stack web app that addresses the issue of dining hall transparency at Princeton. Many students struggled to know what exactly was in their meals—whether for health, fitness, or dietary restriction reasons. The platform the university provided to see nutritional data for the dining halls was obscure and hard to navigate to, which meant many students either did not know it existed or found it very inconvenient to use. Our app provides real-time dining hall menus with ingredient lists, macronutrient information, and the ability to log meals and track analytics over time.

Duration: Spring 2024

Product: Full-stack nutrition tracking app

Team: 5 students

Role: Design & Frontend Development

Approach

My role spanned from UI/UX design to frontend implementation. I began by conducting user research through interviews with health-conscious students and athletes, gathering feedback on what features would be most useful. Additionally, I researched dietary needs and current user pain points with the nutritional data the university provided. I then created wireframes and interactive prototypes on Figma to test early concepts.

Onboarding slide showing feature highlight

Meal logging functionality ideation

Meal history & data analytics ideation

Log Food Wireframe

Meal History Wireframe

After I began developing the frontend webpages, I continued to meet with our group of users to ensure the product was intuitive and met their needs. I iterated on the design and functionality based on this feedback. Through several iterations, and collaborating with the backend team, I helped build this application.

Key Features

Live updating dining hall menus with nutritional data for each item
Macros for each meal item
Meal logging with daily macronutrient stats on the dashboard
Analytics dashboard for long-term trends in meals
Ability to add custom (non-dining hall) items to your meal

Outcome

Our app received the second highest grade in the class and was successfully launched and published to Princeton’s permanent student-run app library, making it a tool that students regularly use in their daily campus lives. This project not only gave me experience in full-stack development workflows, but also deepened my understanding of how design decisions impact usability for real users with diverse needs.

Final Product

Below are some of the features implemented in the website.

Final meal logging page

Final dashboard