All projects
Web App

TrainUp — Fitness Coaching Platform

"Train with intent. Coached every step."

A dual-role coaching platform connecting personal trainers with their clients — featuring custom workout plans, adherence tracking, progress analytics and async messaging in one cohesive dark-themed product.

Role: UX/UI Designer & DeveloperCompleteFitnessSaaSDashboardMulti-role
Landing Page
Landing Page
View full page

Landing Page

OVERVIEW

Problem

Personal trainers manage clients across scattered tools — spreadsheets for plans, WhatsApp for check-ins, separate apps for progress photos. Clients lack visibility into their own programme and feel disconnected between sessions.

Goal

Design a unified SaaS platform where trainers can manage their full client roster and where clients get a clear, motivating view of their training — all in one product with a strong visual identity.

Outcome

A production-ready web app with two distinct dashboards: a trainer workspace for managing plans, tracking adherence and messaging clients; and a client portal for viewing workouts, logging progress and staying connected to their coach.

PROBLEM & STRATEGY

Problem

Personal trainers juggle 3+ separate tools — spreadsheets, WhatsApp, photo apps — to manage their clients. Clients, in turn, have no single place to see their programme, track progress or communicate with their coach.

UX Challenge

Building for two completely different users within one product without creating confusion or compromise. The trainer needs a management-heavy workspace with data density; the client needs a motivating, simple portal focused on their programme. Same product, opposite interaction models.

Strategy

I designed two fully separate dashboards with a shared visual language but distinct information architectures. Role detection at login routes each user to their own experience. The trainer workspace prioritises data visibility — adherence scores, client lists, plan builder — while the client portal leads with their weekly plan and progress, not admin tasks. A dark SaaS aesthetic unified both surfaces without flattening the role distinction.

Outcome

Trainers can manage their entire client roster, build plans and track adherence from one place — without switching apps. Clients open the platform and immediately know what to do that day. The adherence score surfaces as the central motivational metric for both sides, creating a shared language between coach and client.

KEY METRICS
20+

screens designed across trainer and client flows

2

distinct dashboards — one per user role

94%

adherence score tracked in real time per client

100%

responsive — dark-themed, desktop-first SaaS

TARGET USERS

Personal Trainer

Manages 2–15 clients simultaneously. Needs to build custom workout plans, monitor adherence, track progress photos, schedule sessions and send coaching messages — all without switching tools.

Client (Trainee)

Follows a structured training programme. Wants to see their weekly plan clearly, log workouts, track body metrics over time and message their trainer with questions or form check requests.

DESIGNED PAGES
UI DIRECTION
DESIGN PRINCIPLES
  • Role clarity — trainer and client flows are completely separate, each optimised for its audience
  • Data at a glance — key metrics (adherence, streak, volume) surface on the dashboard without drilling down
  • Dark SaaS aesthetic — deep navy + vibrant green creates a professional, energetic fitness brand
  • Progress visibility — weight trends, photo timelines and session logs make improvement tangible
  • Async coaching — messaging designed for thoughtful coach replies, not real-time chat pressure
  • Component consistency — 50+ shared UI primitives ensure visual rhythm across all screens
  • Motivating feedback — adherence thresholds use colour semantics (red / yellow / green) to prompt action
  • Mobile-friendly layouts — sidebar collapses cleanly, cards reflow for smaller viewports

Colour palette

Brand

#22c55ePrimary
#38bdf8Secondary
#ef4444Destructive
#94a3b8Muted FG

Surface

#0f172aBackground
#0b1220Sidebar
#111827Card
#1e293bMuted / Border

Status

#4ade80Success
#facc15Warning
#38bdf8Info
#ef4444Error

Charts

#22c55eChart 1
#38bdf8Chart 2
#a78bfaChart 3
#f59e0bChart 4
#ec4899Chart 5
TYPOGRAPHY & TECHNICAL SPECS

Aa

Primary / UI · Sans-Serif

Inter

400 Regular500 Medium600 SemiBold700 Bold

All UI text — headings, body, labels, buttons, navigation

H1 / Hero36px / 1.15 / 700 / ls −0.025em
H2 / Section30px / 1.15 / 600 / ls −0.025em
H3 / Card20px / 1.15 / 600
H4 / Label18px / 1.15 / 500

Train

Body / UI · Sans-Serif

Inter

400 Regular500 Medium

Paragraph text, descriptions, secondary labels

Body Large18px / 1.625 / 400
Body16px / 1.5 / 400
Body Small14px / 1.5 / 400
Caption12px / 1.33 / 400–500

94%

Monospace / Code · Monospace

JetBrains Mono

400 Regular500 Medium

Metrics, values, adherence scores, data labels

Stat / Large36–48px / 1.15 / 300
Data label12px / 1.33 / 400
Button / CTA14px / 1.5 / 500

Spacing System

4px

Base grid unit

4 · 8 · 12 · 14 · 16 · 20 · 24 · 32 · 40 · 48px

Border Radius

12px

Default card radius (--radius)

8px sm · 10px md · 12px lg · 16px xl · full pill

Motion

200ms

Default transition

150ms fast · 200ms normal · 300ms slow · 500ms slower

Accessibility

AA

WCAG 2.1 target

All text passes AA — dark surface with light text optimised throughout

FINAL SCREENS

Trainer — Dashboard

Active-client stats, adherence-tracked roster and upcoming sessions overview.

Fully designed

Client — Dashboard

Personalized home with adherence, weight, today's workout and plan progress.

Fully designed

Workout Plans

Client program cards showing weekly training days, phases and progress.

Fully designed

Progress Tracking

Body-weight chart, log-weight form and adherence history.

Fully designed

Session Calendar

Weekly grid of scheduled client session blocks across days.

Fully designed

Exercise Library

Filterable exercises by muscle, equipment and level with edit actions.

Fully designed
TWO ROLES, ONE PRODUCT

TrainUp serves two distinct user types — each with a completely separate dashboard tailored to their workflow. The trainer workspace is management-focused; the client portal is progress-focused.

Personal Trainer

Manage the full client roster, build custom workout plans from reusable templates, track adherence per client, schedule sessions, review progress photos and send coaching messages — all from one workspace.

Client (Trainee)

View the assigned weekly programme, log completed workouts, track body weight and measurements over time, upload progress photos with visibility controls and message the trainer directly.

DESIGN PROCESS
01

Discover

  • User interviews
  • Competitor audit
  • Problem framing
02

Define

  • Personas
  • User flows
  • Information architecture
03

Design

  • Wireframes
  • Visual design
  • Prototype
04

Validate

  • Usability testing
  • Iteration
  • Handoff
RESEARCH INSIGHTS

Key findings

3+ tools

is the average number of separate apps trainers use to manage clients — the core problem TrainUp solves.

2 roles

required completely separate navigation architectures — trainer and client workflows have almost no overlap.

Progress photos

emerged as the highest-value feature for client motivation — more than charts or session logs.

User voices

"I spend more time updating spreadsheets and sending WhatsApp messages than actually coaching. I need everything in one place."

Andrei, 32 — personal trainer

"I never know what I'm supposed to do this week until my trainer texts me. I want to just open an app and see my programme."

Mara, 26 — fitness client

LEARNINGS & NEXT STEPS

Key takeaways

  • Two-role products need clear entry-point separation — combined login with role detection avoids confusion
  • Adherence percentage is more motivating than raw completion counts — clients respond to the score
  • Progress photos need explicit consent UX — visibility controls (trainer-visible vs private) are a trust feature

Next steps

  • Usability testing with real trainers (5–8 participants)
  • Nutrition tracking module — currently a placeholder awaiting full design
  • Mobile app version for clients (workout logging on the go)
  • Trainer analytics — revenue, session volume, client retention over time
IMPACT & SUCCESS METRICS

TrainUp is a live production app — these are the KPIs designed into the product from day one to validate trainer and client engagement.

Adherence Tracked

94%

Live adherence score per client — the central metric trainers monitor daily

Screens Designed

20+

Across trainer and client dashboards — each optimised for its audience

Plan Build Time

< 5 min

Target time for a trainer to build a new client workout plan from scratch

Client Activation

≥ 80%

Clients who log their first workout within 48h of being onboarded

ACCESSIBILITY AUDIT

All colour combinations were verified against WCAG 2.1 AA standards on dark surfaces. The dark SaaS palette was specifically chosen to maintain high contrast throughout.

Contrast ratios

Aa

Body text on background

#f8fafc on #0f172a

19.3:1

AAA
Aa

Primary accent on background

#22c55e on #0f172a

6.1:1

AA
Aa

Muted text on card

#94a3b8 on #111827

4.8:1

AA
Aa

Heading on card

#f8fafc on #111827

17.4:1

AAA
Aa

Dark on primary button

#052e16 on #22c55e

7.2:1

AAA

Accessibility checklist

Keyboard navigation on all interactive elements

Focus-visible rings — outline-2 outline-offset-2 on all focusable elements

ARIA labels on icon-only buttons

Form fields with visible labels (react-hook-form + zod validation)

Error states shown in text, not colour alone

Touch targets ≥ 44×44px on mobile

Colour-blind safe palette — status communicated via text + colour

Reduced motion support for Framer Motion animations

Reduced motion is the next a11y item — Framer Motion has a useReducedMotion hook that will be wired in the next iteration.

DESIGNER'S REFLECTION

"TrainUp was the first project where I designed and shipped a full-stack product — not just screens, but a live application that real users interact with. The challenge wasn't the visual design; it was maintaining consistency across 20+ screens while keeping the design system coherent under development pressure.

Building the trainer and client flows in parallel taught me how a shared component library pays dividends — every StatCard, AdherenceBar and MessageBubble I built once appeared dozens of times across both dashboards. If I redesigned this, I'd spend more time on the mobile client experience — workout logging should feel as fluid on a phone as the trainer workspace does on desktop."

— Raluca Indrecan, UX/UI Designer

What I'd do differently

Start with a mobile-first approach for the client side

Usability testing with real trainers at wireframe stage

Design the nutrition module instead of leaving it as a placeholder

Explore onboarding variations — current flow could be shorter

Want to discuss this project?

Get in touch
All projects