UI/UX Case Study, Columbia Engineering Bootcamp, First Team Project

Take Aim And Shoot For Your Goals.

This was our first real project as a team, a fitness app built from a blank canvas, four of us figuring out the process together, one decision at a time. This is the story of how that came together.

Scroll to begin ↓
Role UI/UX Designer (one of four), research, design and mentorship
Team Stylianos Zissopulos, William Lin, Kiara Azize & Mark Pabustan
Tools Figma, Miro, FigJam
Status Figma prototype, first bootcamp project, unshipped

"Everyone on the team showed up ready to work. We just weren't all starting from the same place. My job was to close that gap quietly, not make it the headline."

The Problem

Here's where we started. Most people who want to get healthier already know it. The thing standing between them and a better routine usually isn't motivation, it's logistics. The gym is open, sure, but finding the hour is its own negotiation every day. Meals get decided in the middle of a busy afternoon, not during some calm planning session on a Sunday, and if a diet plan exists at all, it's living in someone's head, half remembered and rarely followed.

That tracked with what our interviews told us. People had some version of a workout habit going. Almost none of them had a diet plan running alongside it, and the two never talked to each other. Plenty of apps already cover this space, but most pick a lane, tracking or nutrition, rarely both at once. We wanted to build the version that treats them as one habit instead of two separate chores.

The name came from there. Chiron, in Greek mythology, was the centaur who trained heroes, half human, half horse, equal parts teacher and healer. Our tagline followed naturally, "Take aim and shoot for your goals." Both stuck with us through every design review that followed, because they kept reminding us what we were actually building. Not a tracker. A coach.

Mark Pabustan Stylianos Zissopulos William Lin Kiara Azize

Research & Discovery

We ran six interviews and sent out a survey, both circling the same question: how do people actually manage their workouts and their diet, and where does that process fall apart? It was a first sprint on a short timeline, not a validated study, but the answer kept repeating itself across nearly every conversation.

A strong signal, not proof
Prefer gym workouts, when they can find the time 66.7%

Gym access wasn't the obstacle here. Time and consistency were.

Currently have no diet plan at all 62%

The workout side existed in some shape. The diet side almost never did.

Don't track their diet in any way 56%

Not because they didn't care. Because there was no easy place to do it.

Work out mainly for stress relief Majority

Which raises the stakes on consistency. Stress relief only helps if you actually show up.

One line came back clearer than anything else we heard. People found it hard to make time for working out and eating well at the same time. Not one or the other on its own. Both, together, inside a life that wasn't built around either.

User Persona

We pulled one composite persona out of everything we heard in those interviews. Anthony Walker became the person we kept building for: driven enough to want consistency, busy enough to keep losing it, and short on exactly the fitness knowledge that would let him fix it on his own.

Anthony Walker

"A healthy body and mind starts with great habits."

Age: 30 IT Professional Manhattan, New York Characteristic: Energetic

Goals

  • Live a healthy life and maintain good physique
  • Follow an organized set of workout routines
  • Keep track of diet and build body mass

Pain Points

  • Loses track of his diet, ends up eating fast food
  • Inconsistent with his workout routine
  • Doesn't have much fitness knowledge to fall back on
  • Struggles to find time to actually work out

Define & Ideate

The real constraint of this phase had nothing to do with disagreeing on features. It was the gap in experience sitting between us. Three of the four of us were stepping into a formal design project for the first time. I wasn't, and that kind of asymmetry shapes how a team works together more than most case studies admit.

Coming in with prior experience

I'd already worked with Figma and been through the UX process before the bootcamp started. That let me move faster, form opinions earlier, and see a few steps ahead of where the rest of the team could see yet.

Three quick learners, first project

My teammates picked up the tools fast and worked hard. What they hadn't built yet was the instinct for what comes next in a real design process. That's just what a first project looks like, for anyone.

My job wasn't to design the app for them. It was to teach the process as we went, so they could make real calls beside me instead of just carrying out what I'd already decided.

Looking at the competition told us what we didn't want to rebuild. We studied three established players and found the same gap across all of them: solid tracking tools, but none of them made working out and eating feel like one connected experience. That open lane is what Chiron was built to fill.

MFP
MyFitnessPal
NTC
Nike Training Club
FO
FitOn

From there we moved into feature prioritization. Not everything the research surfaced earned a spot in the prototype. What stayed was whatever pushed someone like Anthony from "I want to be consistent" to actually opening the app and seeing today's workout next to today's meal.

The decision that ended up defining Chiron more than any single screen was the survey-driven onboarding. A new user answers a few questions about where they're at, and the app uses that intake to recommend a starting program built around them specifically. You tell Chiron where you are. Chiron tells you where to start. That mentor-like first impression stayed with us from the earliest lo-fi layout all the way through the final hi-fi screens.

User Flow

The onboarding sequence had one job: earn the right to personalize before asking the user for anything. Nobody lands on a generic dashboard here. You arrive at a coaching screen that explains what Chiron actually does first, then move into a quick survey that lines your program up with where you're starting from.

1

Download → Splash screen

The brand moment up front: "Take Aim And Shoot For Your Goals." Tone is set before anything else happens.

2

Coaching screens 1 & 2

Chiron walks through the two things it actually does, diet management and workout planning, before asking for anything back.

3

Login / Sign up

Email, name, and password, or a quick connect through Apple, Google, or Facebook. Account creation only comes after the pitch has already landed.

4

Intake survey

Fitness level, goals, time available. The app reads the answers and recommends a starting program. This is the moment Chiron starts acting like a coach instead of a tool.

5

Home screen

A personalized greeting, "Hi Anthony," and the week laid out at a glance. View Progress and today's workout are both one tap away from the moment the screen loads.

6

Set diet & set workout

Two tracks running in parallel, both reachable from the same bottom nav, built to feel like one experience instead of two apps stitched together.

7

Track fitness journey

Progress rings, a calendar history, and ongoing meal and workout logging. This is the long loop that turns one good session into an actual habit.

We built this sequence twice. First as a lo-fi pass, to prove the order actually held up. Then again in full color, once it did. Both are below.

Lo-Fi Prototype

The lo-fi pass is where we found out whether the flow above held up as a real interface, not just a plan we'd agreed on out loud. Every screen went into Figma as a grayscale layout, gray pills standing in for buttons, boxed X's for photos and video, scribbles for body text, so the four of us could argue about placement, whether the workout video belonged above or below its title, whether the calendar needed a header at all, before anyone touched color or wrote real copy.

The intake survey got the same treatment: gender, height and weight, then goal weight, meal style, and workout frequency, each screen a placeholder pass at the moment Chiron starts personalizing itself.

Chiron lo-fi splash screen with the finished archer wordmark and tagline already locked in, over a plain background, with a Let's Get Started button
Chiron lo-fi coaching screen for the Workout Plan feature, with a placeholder image, scribbled placeholder copy, and pagination dots
Chiron lo-fi coaching screen for the Diet Plan feature, with a placeholder image, scribbled placeholder copy, and a Let's Get Started button
Chiron lo-fi landing screen with the Hello, let's get you started on your fitness journey copy already finalized, a placeholder image, and Log In and Sign Up buttons
Chiron lo-fi sign up screen with First Name, Last Name, Email Address and Password fields, and Apple, Google and Facebook connect options
Chiron lo-fi survey screen for Let's Get Started, with placeholder Gender, Height and Weight inputs
Chiron lo-fi survey screen asking what the user's fitness goal is, with a placeholder Goal Weight field and four scribbled option cards
Chiron lo-fi survey screen for choosing a meal plan, with placeholder Classic, Veggie, Vegan and High Protein rows
Chiron lo-fi survey screen asking how much the user exercises on average, with placeholder frequency rows
Chiron lo-fi home screen with a progress ring reading 82, a placeholder banner, and a placeholder image below it
Chiron lo-fi workout calendar screen showing This Month with several days marked, a Leg Day label, and a placeholder image below
Chiron lo-fi workout search results screen with two video thumbnail placeholders and placeholder labels beneath each
Chiron lo-fi workout detail screen with a placeholder video player, a Workout Title placeholder, four placeholder spec blocks, and a More Workouts button
Chiron lo-fi diet plan screen with the Vegan, Veggie, High Protein and Classic tabs already in place, a Breakfast heading, and a placeholder meal image
Chiron lo-fi recipe detail screen with a placeholder video player, a Recipe Title placeholder, four placeholder spec blocks, and a More Recipes button
Chiron lo-fi profile screen with a placeholder avatar, First Name and Last Name fields, an Email Address field, and Height and Weight inputs

Two structural calls got made here and never moved again: workouts split into single sessions and full day-by-day programs, and the diet plan's four-tab system was already in place before any real meals existed to fill it. The wordmark, tagline, and landing copy were also locked this early and carried straight through to hi-fi.

Design Decisions

Dark, focused visual tone

The hi-fi prototype leans into a dark, high-contrast look on purpose. Fitness apps live on a phone screen during a workout, harsh gym lighting, daylight outdoors, whatever's in someone's living room, and a dark interface with a clear type hierarchy holds up better across all of that than a flat white screen does. The mood also matched the research: for these users, a workout wasn't a productivity task, it was a release, and the interface needed to feel that way.

Personalization before content

The survey-to-recommendation flow is the decision I stand behind most, looking back. Most fitness apps hand you a content library on day one and let you sort it out yourself. Chiron's bet was the opposite: the app reads the intake survey and hands a new user a starting point instead. The coaching screens before sign-up make the same case before asking for a commitment, an easier ask for anyone already burned by an app that promised something different and didn't deliver.

Chiron splash screen, the CHIRON wordmark over a photo of two runners at dusk, with the tagline Take Aim And Shoot For Your Goals and a Let's Get Started button below
Chiron coaching screen introducing the Workout Plan feature, with a photo of a man adjusting his lifting belt and copy explaining that Chiron recommends workout programs based on the intake survey
Chiron coaching screen introducing the Diet Plan feature, with a photo of fresh produce and copy explaining that Chiron provides meal plans suited to the user's dietary goals
Chiron landing screen reading Hello, over a photo of two athletes standing back to back, with Log In and Sign Up buttons beneath a short welcome message
Chiron sign up screen with First Name, Last Name, Email Address, and Password fields, a Sign Up button, and Apple, Google, and Facebook connect options below
Chiron survey screen for Let's Get Started, with Gender, Height and Weight inputs and Male, Female and Other options
Chiron survey screen asking what the user's fitness goal is, with a Goal Weight field and Lose Weight, Maintaining Body Mass, Increase My Weight and Build Muscle Mass options
Chiron survey screen for choosing a meal plan, with Classic, Veggie, Vegan and High Protein options
Chiron survey screen asking how much the user exercises on average, with Occasionally, 1 to 3 Times a Week, and 3 to 5 Times a Week options

The intake asks gender, height and weight, a goal, a meal plan style, and a workout frequency, then hands back a recommended starting program.

Chiron home screen, a Hi Anthony greeting above a horizontal date strip, a View Progress card, and a Full Body Workout banner with a Let's Get Started button
Chiron workouts tab showing Today's Focus: Legs, a Leg Day banner with a Let's Get Started button, and Single Workouts cards for Arms and Legs beneath it
Chiron Home Workouts search results, listing The Bicep Curl and Home Squatting as two browsable workout cards with short muscle-group descriptions
Chiron workout detail screen for The Bicep Curl, with a video player, sets and rest interval specs, and More Workouts and Finish Workout buttons
Chiron diet plan screen for Thursday, showing the Vegan meal plan with calorie and macro breakdown and a Vegan Banana Pancakes breakfast card
Chiron recipe detail for Vegan Banana Pancakes, with calorie and macro breakdown, a short description, and a View Recipe button
Chiron profile screen showing Anthony's circular profile photo, editable first and last name fields, email, and height and weight inputs, with the Profile tab active in the bottom navigation

Putting It in Front of People

We tested the hi-fi prototype against three concrete tasks, setting up an account, finishing a workout, and choosing a diet plan. We weren't trying to confirm it looked good, we wanted to find out where the experience actually broke down once someone tried to use it.

Create an account
Every participant got through sign-up with little to no friction.

Select and complete a workout
Users found their way to and through a workout without needing any guidance from us.

Pick a diet plan
The diet-style filter tabs, Vegan, Veggie, High Protein, Classic, were understood right away and used correctly.

All three tasks went through cleanly, which for a first bootcamp prototype means the core flows held up, the bar a first project actually needs to clear. It doesn't tell us whether anyone would open the app again the next day, or whether pairing workouts with diet felt meaningfully different from two separate features sitting next to each other. Those questions need a second round of testing, with more time than we had on this one.

Where This Landed

Honest framing

Chiron was a learning exercise first, and I'd rather describe it that way than oversell it. We still ran a real process: interviews, a persona, a competitor audit, lo-fi wireframes, a hi-fi prototype all four of us touched, and usability testing that confirmed the core flows worked. The prototype also carries the rougher edges you'd expect from a team learning the tools and the discipline at the same time as building the product. The full prototype lives in Figma (Group Chiron), every screen from splash through diet plan included.

On the team dynamic: the experience gap didn't hold the project back, if anything it made the process more deliberate, since explaining a decision meant I had to understand it myself first. What I'd change is building in more explicit checkpoints, real moments where I stopped and asked whether the pace was working for everyone instead of assuming it was.

What I'd do differently: push for a second round of testing focused specifically on the survey-to-recommendation flow, to see whether the "coach" idea felt different in practice and not just on paper. All three tasks passed cleanly, but the real question Chiron's design was asking, whether a personalized starting point actually matters to someone, needs users to experience a recommendation they weren't expecting.

Where we'd take it next: calorie counting built directly into the diet tracker, a wider library of workout videos, and diet tips tied to specific workout days, so the connection between eating and training feels structural instead of two features placed near each other.