about the project
TrainUp — Brand Identity
TrainUp — Fitness App
Before the app. Before the store. There was a brand. Every color, every typeface, every design decision in the TrainUp ecosystem started here.
Before the app. Before the store. There was a brand. Every color, every typeface, every design decision in the TrainUp ecosystem started here.
Case Study
Branding
Visual Design
Design Systems
B2C
MY ROLE
UX/UI Designer
UX/UI Designer
TOOLS
Figma · PS · Affinity
Figma · PS · Affinity
TYPE
Concept Project
Concept Project
the brief
A fitness app built around the person, not the gym
A fitness app built around the person, not the gym
TrainUp was designed to remove every barrier between a user and their next workout — no gym required, no experience needed. The goal was simple: build a mobile experience that adapts to real people, with real constraints, and makes starting easy.
TrainUp was designed to remove every barrier between a user and their next workout — no gym required, no experience needed. The goal was simple: build a mobile experience that adapts to real people, with real constraints, and makes starting easy.
the problem
Built for the fit. Not for everyone else
Built for the fit. Not for everyone else
Everyone else — the beginner scared of being judged, the parent with 20 minutes and no babysitter, the retiree who wants to move but doesn't know how — is left to figure it out alone. The problem wasn't a lack of fitness content. The world has enough of that.
The problem was a lack of fitness solutions built around the person using them — their time, their equipment, their goals, their body, their life.
Everyone else — the beginner scared of being judged, the parent with 20 minutes and no babysitter, the retiree who wants to move but doesn't know how — is left to figure it out alone. The problem wasn't a lack of fitness content. The world has enough of that.
The problem was a lack of fitness solutions built around the person using them — their time, their equipment, their goals, their body, their life.
How might we design a fitness experience so personal and frictionless that the hardest part is actually the workout — not finding it?
How might we design a fitness experience so personal and frictionless that the hardest part is actually the workout — not finding it?
the research
What's already out there — and what's missing
What's already out there — and what's missing
Three real people shaped this project from the start — a new mother with no equipment and no experience, a 60-year-old who had never stepped inside a gym, and someone with home equipment but no time. Three completely different needs. One shared frustration — nothing out there was built for any of them.
Three real people shaped this project from the start — a new mother with no equipment and no experience, a 60-year-old who had never stepped inside a gym, and someone with home equipment but no time. Three completely different needs. One shared frustration — nothing out there was built for any of them.
APP
PRIMARY FOCUS
GAP IDENTIFIED
Nike Training Club
Nike Training Club
Beautiful UI
Beautiful UI
Gym-focused, overwhelming
Gym-focused, overwhelming
MyFitnessPal
MyFitnessPal
Calorie tracking
Calorie tracking
Workouts are secondary
Workouts are secondary
Strong Workout
Strong Workout
Experienced lifters
Experienced lifters
Not beginner friendly
Not beginner friendly
7 Minute Workout
7 Minute Workout
Quick Workouts
Quick Workouts
Rigid, one size fits all
Rigid, one size fits all
Fitbod
Adaptive workouts
Adaptive workouts
Complex, expensive
Complex, expensive
Home Workout App
Home Workout App
Home Exercises
Home Exercises
Doesn't adapt to user goals
Doesn't adapt to user goals
Not one app asked who you were before telling you what to do. They assumed your equipment, your experience, your time, and your goals. TrainUp was designed to ask first.
Not one app asked who you were before telling you what to do. They assumed your equipment, your experience, your time, and your goals. TrainUp was designed to ask first.
APP
PRIMARY FOCUS · GAP IDENTIFIED
Nike Training Club
Beautiful UI · Gym-Focused, Overwhelming
Strong Workout
Experience lifters · Not beginner friendly
7 Minute Workout
Quick workouts · Rigid, one size fits all
Fitbod
Adaptive workouts · Complex, expensive
Home Workout App
Home exercises · Doesn't adapt to user goals
MyFitnessPal
Calorie Tracking · Workouts are secondary
the users
Three people. Three completely different needs
Three people. Three completely different needs
TrainUp wasn't designed for the average user. It was designed for three very specific people the fitness industry keeps forgetting.
TrainUp wasn't designed for the average user. It was designed for three very specific people the fitness industry keeps forgetting.
Alex, 30 — Full-time worker Fitness enthusiast
MOTIVATION
Build muscle and stay active
FRUSTRATION
Endless options, no clear starting point
CONSTRAINT
Under 30 mins · basic equipment · no gym
Sarah, 35 — Part-time retail worker, mother of two
MOTIVATION
Energy and strength to be present for her family
FRUSTRATION
Fitness plans feel complicated and hard to maintain
CONSTRAINT
Unpredictable schedule · early morning or late night only
Linda, 67 — Retired teacher, grandmother
MOTIVATION
Stay mobile and independent for her grandchildren
FRUSTRATION
Gym feels intimidating · fears injury from wrong exercises
CONSTRAINT
No gym · basic equipment · needs low-impact guidance
the PROCESS
Designing around the person, not the feature
Designing around the person, not the feature
TrainUp was not designed from the outside in — starting with aesthetics and working backward to function. Every decision started with a person, a problem, and a question: what is the simplest way to solve this?
TrainUp was not designed from the outside in — starting with aesthetics and working backward to function. Every decision started with a person, a problem, and a question: what is the simplest way to solve this?
Feature Prioritization — Subtraction as Design
Feature Prioritization — Subtraction as Design
Custom workout builders, advanced filtering, calorie tracking, meal planners, and social features. Each idea was evaluated against one question: Does this help the user work out, or does it make them think more?
The custom workout builder was cut. Giving users the ability to manually add and remove exercises introduced the same decision fatigue TrainUp was designed to eliminate. Calorie tracking was removed — not relevant to all users and directly contradicts the frictionless philosophy. Social features were cut — competition is the opposite of what Linda and Sarah need.
Every removed feature made TrainUp stronger. Subtraction was the design process.
Custom workout builders, advanced filtering, calorie tracking, meal planners, and social features. Each idea was evaluated against one question: Does this help the user work out, or does it make them think more?
The custom workout builder was cut. Giving users the ability to manually add and remove exercises introduced the same decision fatigue TrainUp was designed to eliminate. Calorie tracking was removed — not relevant to all users and directly contradicts the frictionless philosophy. Social features were cut — competition is the opposite of what Linda and Sarah need.
Every removed feature made TrainUp stronger. Subtraction was the design process.
Custom workout builders, advanced filtering, calorie tracking, meal planners, and social features. Each idea was evaluated against one question: Does this help the user work out, or does it make them think more?
The custom workout builder was cut. Giving users the ability to manually add and remove exercises introduced the same decision fatigue TrainUp was designed to eliminate. Calorie tracking was removed — not relevant to all users and directly contradicts the frictionless philosophy. Social features were cut — competition is the opposite of what Linda and Sarah need.
Every removed feature made TrainUp stronger. Subtraction was the design process.
Onboarding — The Personalization Engine
Onboarding — The Personalization Engine
Seven screens. One question each. No overwhelm.
Seven screens. One question each. No overwhelm.
Before a user sees a single workout, TrainUp learns exactly who they are. Goal, fitness level, available time, equipment, training frequency, preferred days, and reminder preferences — captured one question at a time through progressive disclosure.
One question per screen was a deliberate decision. A single form with seven fields would have felt like a gym intake form — clinical, intimidating, easy to abandon. One question per screen feels like a conversation.
Every screen includes a Skip option. The user is never forced to answer. Their autonomy is respected from the first tap — because an app that respects you before you've even started is an app you trust.
The final screen — "You're all set! We've built a personalized workout experience just for you" — is the payoff moment. Seven questions answered, one promise delivered. The anxiety of starting is replaced with confidence before the home screen ever loads.
Before a user sees a single workout, TrainUp learns exactly who they are. Goal, fitness level, available time, equipment, training frequency, preferred days, and reminder preferences — captured one question at a time through progressive disclosure.
One question per screen was a deliberate decision. A single form with seven fields would have felt like a gym intake form — clinical, intimidating, easy to abandon. One question per screen feels like a conversation.
Every screen includes a Skip option. The user is never forced to answer. Their autonomy is respected from the first tap — because an app that respects you before you've even started is an app you trust.
The final screen — "You're all set! We've built a personalized workout experience just for you" — is the payoff moment. Seven questions answered, one promise delivered. The anxiety of starting is replaced with confidence before the home screen ever loads.
The Home Screen — A Behavioral System
The Home Screen — A Behavioral System
Workout Library & Filters — Power When You Need It
Workout Library & Filters — Power When You Need It
The workout library gives users full access to every workout in the app. But access without structure creates the same overwhelm TrainUp was built to eliminate.
A smart filter system lets users narrow workouts by duration, equipment, goal, and level — independently of what they set during onboarding. Life changes daily. Alex has 45 minutes on Saturday but 15 on Tuesday. Sarah's baby slept badly — she needs something lighter. Linda's knee hurts — she needs to filter out lower body workouts.
The workout library gives users full access to every workout in the app. But access without structure creates the same overwhelm TrainUp was built to eliminate.
A smart filter system lets users narrow workouts by duration, equipment, goal, and level — independently of what they set during onboarding. Life changes daily. Alex has 45 minutes on Saturday but 15 on Tuesday. Sarah's baby slept badly — she needs something lighter. Linda's knee hurts — she needs to filter out lower body workouts.
Filters at home = cognitive load before motivation. Filters in the library = power user feature when needed. That's progressive disclosure — the right information at the right moment.
The Workout Card — Information Architecture
The Workout Card — Information Architecture
Three data points. That's all a user needs to decide if a workout is right for them.
Time, equipment, and body area target — visible before a single tap. Everything else was deliberately excluded. Calories removed. Detailed muscle groups replaced with simple body area targets — Full Body, Upper Body, Lower Body. Clear enough for a beginner, useful enough for an experienced user.
The saved button gives users autonomy — the ability to build their own personal workout collection without disrupting the browsing flow. The goal: scan a card in three seconds and know immediately — I have time for this, I have the equipment, this is right for me.
Three data points. That's all a user needs to decide if a workout is right for them.
Time, equipment, and body area target — visible before a single tap. Everything else was deliberately excluded. Calories removed. Detailed muscle groups replaced with simple body area targets — Full Body, Upper Body, Lower Body. Clear enough for a beginner, useful enough for an experienced user.
The saved button gives users autonomy — the ability to build their own personal workout collection without disrupting the browsing flow. The goal: scan a card in three seconds and know immediately — I have time for this, I have the equipment, this is right for me.
Three seconds to confidence. That's the entire information architecture of TrainUp in one decision.
The Workout Detail — Informed Before You Start
The Workout Detail — Informed Before You Start
Before a single rep is done, the user knows exactly what they're getting into. Exercise list, equipment needed, estimated time, and goal — all visible before committing.
The Start Workout button is fixed at the bottom — always visible, never rushed. The user reads, mentally prepares, and taps when ready. A deliberate moment of pause before action — intentional friction that improves the outcome.
Before a single rep is done, the user knows exactly what they're getting into. Exercise list, equipment needed, estimated time, and goal — all visible before committing.
The Start Workout button is fixed at the bottom — always visible, never rushed. The user reads, mentally prepares, and taps when ready. A deliberate moment of pause before action — intentional friction that improves the outcome.
Informed users are confident users.
The Workout Screen — Designed for Physical Context
The Workout Screen — Designed for Physical Context
Most app screens are designed for someone sitting at a desk. This screen was designed for someone on a yoga mat, in a backyard, or in a living room with a baby nearby. Phone on the floor. Hands sweaty. Sun hitting the screen.
Every decision came from that physical reality.
Most app screens are designed for someone sitting at a desk. This screen was designed for someone on a yoga mat, in a backyard, or in a living room with a baby nearby. Phone on the floor. Hands sweaty. Sun hitting the screen.
Every decision came from that physical reality.
Designed for the context, not the ideal scenario.
The Cancel Modal — Ethical UX
The Cancel Modal — Ethical UX
When a user tries to stop a workout, most apps use guilt. "Are you sure you want to quit?" "You're so close!" Dark patterns disguised as motivation.
TrainUp's cancel modal says: "Break time... or one more rep? 🔥" Two options. Keep Going or Stop Workout. No shame. No manipulation.
The user's choice is respected — with a gentle challenge, not a guilt trip.
When a user tries to stop a workout, most apps use guilt. "Are you sure you want to quit?" "You're so close!" Dark patterns disguised as motivation.
TrainUp's cancel modal says: "Break time... or one more rep? 🔥" Two options. Keep Going or Stop Workout. No shame. No manipulation.
The user's choice is respected — with a gentle challenge, not a guilt trip.
An app that respects you when you're struggling is an app you come back to.
Workout Complete — The Reward Loop
Workout Complete — The Reward Loop
Every behavioral system needs a reward moment. The workout complete screen closes the loop.
Active time, streak count, and one encouraging message — "Consistency wins. Great work today." Not calories burned. Not percentage completed. Just — you showed up, you finished, that matters.
A direct path to the progress screen keeps the momentum going for users who want to track their journey.
Every behavioral system needs a reward moment. The workout complete screen closes the loop.
Active time, streak count, and one encouraging message — "Consistency wins. Great work today." Not calories burned. Not percentage completed. Just — you showed up, you finished, that matters.
A direct path to the progress screen keeps the momentum going for users who want to track their journey.
The reward is showing up. Everything else is secondary.
Progress Screen — Celebrating Consistency
Progress Screen — Celebrating Consistency
Not all users are motivated by performance metrics. Some just need to see that they're showing up.
The monthly calendar with flame icons connects directly to the home screen streak system — one consistent visual language across the entire app. Milestone messages celebrate consistency over performance.
Linda doesn't need to know her heart rate. She needs to know she's doing it.
Not all users are motivated by performance metrics. Some just need to see that they're showing up.
The monthly calendar with flame icons connects directly to the home screen streak system — one consistent visual language across the entire app. Milestone messages celebrate consistency over performance.
Linda doesn't need to know her heart rate. She needs to know she's doing it.
Consistency celebrated. Performance optional.
Empty States — The Details That Show Maturity
Empty States — The Details That Show Maturity
Empty states are where most apps give up. A blank screen with no guidance is a dead end.
The Saved Workouts empty state has a barbell illustration, a friendly message, and a single CTA — "Browse Workouts." A dead end becomes a discovery moment. The user is never stranded.
Empty states are where most apps give up. A blank screen with no guidance is a dead end.
The Saved Workouts empty state has a barbell illustration, a friendly message, and a single CTA — "Browse Workouts." A dead end becomes a discovery moment. The user is never stranded.
The details nobody notices are the details that make everything feel right.
the PIVOT
When the right color was the wrong choice.
When the right color was the wrong choice.
The original primary color for TrainUp was orange. It communicated energy, warmth, and motion — exactly right for a fitness brand. It felt alive. It felt like movement.
Then came the accessibility audit.
A WCAG contrast check revealed a critical failure. Orange buttons with white text scored 2.02:1 — far below the minimum 4.5:1 required for WCAG AA compliance. Not just a number on a screen — a real failure for users in real physical contexts. Sunlight glare. Screen brightness outdoors. Users with visual impairments.
TrainUp was designed for everyone. A color that excludes anyone contradicts everything the product stands for.
The original primary color for TrainUp was orange. It communicated energy, warmth, and motion — exactly right for a fitness brand. It felt alive. It felt like movement.
Then came the accessibility audit.
A WCAG contrast check revealed a critical failure. Orange buttons with white text scored 2.02:1 — far below the minimum 4.5:1 required for WCAG AA compliance. Not just a number on a screen — a real failure for users in real physical contexts. Sunlight glare. Screen brightness outdoors. Users with visual impairments.
TrainUp was designed for everyone. A color that excludes anyone contradicts everything the product stands for.
The solution was Deep Blue-Grey — #36454F. Professional, calm, and strong. White text on Deep Blue-Grey scores 9.90:1 — WCAG AAA. The highest possible rating.
Orange didn't disappear. It became the accent color — used for highlights, streaks, and energy moments throughout the app. It still communicates warmth and motion. It just no longer carries the responsibility of accessibility.
Function overruled aesthetics. The best design decision in the project wasn't adding something — it was changing it.
The solution was Deep Blue-Grey — #36454F. Professional, calm, and strong. White text on Deep Blue-Grey scores 9.90:1 — WCAG AAA. The highest possible rating.
Orange didn't disappear. It became the accent color — used for highlights, streaks, and energy moments throughout the app. It still communicates warmth and motion. It just no longer carries the responsibility of accessibility.
Function overruled aesthetics. The best design decision in the project wasn't adding something — it was changing it.
the solution
The finished product
The finished product
Every decision made throughout this process — the research, the personas, the pivot, the features that didn't make it — led here.
A fitness app that meets people exactly where they are. No gym required. No experience needed. No guesswork.
View Prototype
the ecosystem
One brand. Three products. One experience.
One brand. Three products. One experience.
Most portfolio projects are a single deliverable. TrainUp is three connected products designed to work as one system.
Most portfolio projects are a single deliverable. TrainUp is three connected products designed to work as one system.
The Connection
The Brand Identity is the visual foundation — every color, every typeface, every design decision in both the app and the store flows from it. It's not three separate projects that happen to share a name. It's one product ecosystem with three entry points.
The Brand Identity is the visual foundation — every color, every typeface, every design decision in both the app and the store flows from it. It's not three separate projects that happen to share a name. It's one product ecosystem with three entry points.
How They Work Together
A user downloads TrainUp and starts working out at home. Over time they want better equipment — the store is the natural next step, organized around the same goals the app already knows about them.
A user discovers TrainUp through the store. The app is the natural next step. One product leads to the other. The ecosystem retains users that either product alone would lose.
A user downloads TrainUp and starts working out at home. Over time they want better equipment — the store is the natural next step, organized around the same goals the app already knows about them.
A user discovers TrainUp through the store. The app is the natural next step. One product leads to the other. The ecosystem retains users that either product alone would lose.
The Visual System
Every touchpoint — app, store, brand identity — shares the same color system, typography, and design language. A user moving between the app and the store never feels like they've left. That's not a coincidence. That's a design system doing its job.
Every touchpoint — app, store, brand identity — shares the same color system, typography, and design language. A user moving between the app and the store never feels like they've left. That's not a coincidence. That's a design system doing its job.
This is what product thinking looks like at a systems level.
the REFLECTION
What TrainUp taught me
What TrainUp taught me
What I'm Most Proud Of
What I'm Most Proud Of
The restraint.
TrainUp could have been overwhelming. The feature list started long — custom workout builders, social features, calorie tracking, meal planners. Every single one was cut, not because it wasn't interesting, but because it didn't serve the person using the app.
The question I kept asking wasn't "would this be cool?" It was "would I actually use this? Would Sarah? Would Linda?" Features that couldn't answer yes were removed.
Every element earns its place. Nothing exists for decoration. Everything exists because a real person needed it.
TrainUp could have been overwhelming. The feature list started long — custom workout builders, social features, calorie tracking, meal planners. Every single one was cut, not because it wasn't interesting, but because it didn't serve the person using the app.
The question I kept asking wasn't "would this be cool?" It was "would I actually use this? Would Sarah? Would Linda?" Features that couldn't answer yes were removed.
Every element earns its place. Nothing exists for decoration. Everything exists because a real person needed it.
What I'd Do Differently
What I'd Do Differently
The onboarding flow was the decision I was least certain about.
Seven questions felt like the right number — enough to personalize the experience without overwhelming the user before they've even started. But that decision was based on instinct, not validated data.
Would a first-time user abandon the app at question four? Would Linda feel intimidated? Would Alex skip the whole thing to get to the workouts faster?
Without real users moving through that flow, every onboarding decision was an educated assumption. If I could go back, I would have tested the onboarding with five real people before building anything else.
The onboarding flow was the decision I was least certain about.
Seven questions felt like the right number — enough to personalize the experience without overwhelming the user before they've even started. But that decision was based on instinct, not validated data.
Would a first-time user abandon the app at question four? Would Linda feel intimidated? Would Alex skip the whole thing to get to the workouts faster?
Without real users moving through that flow, every onboarding decision was an educated assumption. If I could go back, I would have tested the onboarding with five real people before building anything else.
What's Next
If TrainUp were a real funded product, the first move would be simple — get it into real hands as fast as possible.
A free MVP with ads. Not because the design is unfinished, but because no amount of solo design thinking replaces hundreds of users with completely different goals, fitness levels, and lives.
Real feedback drives real iterations. That's how a good product becomes a great one.
If TrainUp were a real funded product, the first move would be simple — get it into real hands as fast as possible.
A free MVP with ads. Not because the design is unfinished, but because no amount of solo design thinking replaces hundreds of users with completely different goals, fitness levels, and lives.
Real feedback drives real iterations. That's how a good product becomes a great one.
TrainUp started as a personal problem. It became a product designed for everyone the fitness industry keeps forgetting. That's still the mission.