StayGreen MSU
An AI-personalized fitness and wellness app for MSU students, built from a competitor teardown through paper prototypes to a clickable Figma flow.
A one-stop wellness resource, built around MSU
The assignment offered a choice of scenarios; I picked designing a fitness and wellness app that uses AI to tailor its offerings to students' unique needs — personalized workout routines, nutrition tips, mental health resources, and campus-specific wellness events. For MSU students, the goal was a single app to balance academics, physical health, and wellbeing, with enough Spartan school spirit woven in to make it feel like it belongs on campus rather than a generic wellness app with a green coat of paint.
Learning from three specialized apps before designing one broad one
I evaluated three competitors, each strong in a different lane. MyFitnessPal has one of the largest food databases around and clear nutrition breakdowns, but the interface feels cluttered with ads and tabs, and a lot of the value sits behind a paywall. Strong (Strength Training Log) strips everything down to just strength training — logging sets, reps, and weights against a clean history — but it has almost no nutrition or social features. Fitbit leans on passive tracking through a wearable for steps, heart rate, and sleep, with friend challenges and badges driving engagement, but it's largely useless without the device and adds ongoing cost.
My design pulls the strongest piece from each: customizable workout routines and progress tracking like Strong, detailed nutrition tracking like MyFitnessPal but simplified by pulling directly from MSU dining hall menus instead of manual food search, and passive-feeling tracking like Fitbit without requiring students to buy a separate wearable. AI personalization ties it together — for example, if a student's sleep has been poor, the app suggests a lighter workout and easy breakfast ideas pulled from campus dining halls, rather than treating every day the same.
Sketching six core screens before touching Figma
The prototype plan settled on six main screens, all looping back to a central dashboard so navigation stays simple: a Login/Welcome screen carrying MSU's colors and Spartan helmet for instant school identity, an AI Dashboard summarizing steps, workout recommendations, nutrition, and upcoming events, a Workout screen with AI-generated routines and personal records, a Nutrition Tracker that reads MSU dining hall menus for instant calorie and nutrient logging, a Campus Wellness Events screen for fitness classes and mental health workshops, and a Progress & Community screen with achievement badges and hall-vs-hall challenges.
From there the sketches went into more detail on paper — working out the login and account-creation flow, the dashboard, dining hall menu integration and food logging, wellness events with a calendar and RSVP reminders, community leaderboards and challenges, and a progress/achievements screen for tracking badges over time.
From paper to a clickable Figma flow
The paper screens carried straight into a mid/high-fidelity Figma prototype, keeping the same six-screen structure and dashboard-first navigation but adding real MSU branding, layout hierarchy, and interaction states the paper version could only gesture at.
View the full mid/high-fidelity prototype on Figma →
Walking through the app with a student persona
The final deliverable paired the prototype with a video demo, walking through a student persona and how they'd actually move through StayGreen MSU day to day — from the AI-suggested workout in the morning to logging a dining hall meal to checking a campus wellness event before finals week.