Gym Platform App Prototype

Step 1 · User experience analysis

Who uses the app, and what they come to do

Members use it most often, so their path through the app gets the most care. Trainers need fast approvals between sessions. The owner checks the gym's numbers and the queue of items that need a decision.

Member

Goals

Find a coach with the right expertise
Book sessions without calling the desk
See body and strength progress

Key tasks

Check sessions left on the trainer package
Request an InBody test and follow its status
Message the coach on Telegram
View invoices

Design response

Package balance is the first thing on Home
Booking runs the eligibility checks before submit
Status timelines replace "pending" guesswork

Trainer

Goals

Run the day's sessions on time
Keep clients renewing
Know what they'll be paid

Key tasks

Mark sessions complete or no-show
Approve or reject InBody requests
Validate PRs
Spot low package balances

Design response

Today view with one-tap session outcomes
Approvals tab with a badge count
Earnings broken into base, sessions and sales

Owner / admin

Goals

Know the gym's state at a glance
Keep trainer profiles accurate and safe
Get invoices delivered and paid

Key tasks

Clear the attention queue
Approve and publish trainer profiles
Resend failed invoice emails

Design response

Four headline numbers, then the alert list
Inline approve and publish on the overview
Delivery failures shown on the invoice row

Core interaction logic: the member journey

Browse trainer profiles and verified special-case experience
Activate or get assigned a trainer package and trainer
Member or admin requests an InBody test
Assigned trainer approves the request
Test Assessment is scheduled and completed
Results become the body profile and shape the plan
Member books sessions, completes workouts
PRs are tracked while the trainer package is active
Trainer reviews progress and updates the next plan

PR gating. PR creation needs an active trainer package, an assigned trainer and a trainer-led workout. Past PRs stay read-only after expiry.

InBody approval. No Test Assessment is scheduled until the assigned trainer approves. Rejections carry a reason the member sees.

No native chat. "Message" buttons hand off to Telegram. Email covers members who don't connect it.

Non-medical wording. Special-case labels show a verified badge and a disclaimer that they are training experience, not treatment.

Which platform does what

Area	Mobile app	Web admin portal
Who	Members, trainers, the owner checking in on the go	Owner and organisation admins at a desk
Members & packages	Member sees own package and sessions left	Full member list, filters, package and eligibility management
Trainer profiles	Members browse; trainers draft their own	Moderation queue, wording checks, publish / unpublish
Bookings	Book a slot; trainer marks complete or no-show	Weekly calendar for all trainers, manual booking, conflicts
InBody	Member requests; trainer approves or rejects	Whole pipeline, sync failures, manual result entry
Invoices	Member views own invoices	Create, issue, resend, track delivery and payment
Payroll	Trainer sees own earnings and statements	Ledger, overrides, approve period, export
Communication	Notifications and Telegram handoff	Templates, delivery log, Telegram settings
Users & access	Sign in, accept invitation, connect Telegram	Organisation setup, invitations, role access

Step 2 · Product interface planning

Information architecture

One app, three tab sets chosen by role at sign-in. Tabs hold the things people do every day. Less frequent screens sit one push away (invoices, notifications, InBody detail), so no tab bar has more than five items.

Member · 5 tabs

Home home.html
- Notifications · notifications.html
- InBody status · inbody.html
Trainers trainers.html
- Trainer profile · trainer-profile.html
Book booking.html
- Confirmation sheet
Progress progress.html
- InBody tests · inbody.html
Profile profile.html
- Invoices · invoices.html
- Notification settings
Before sign-in
- Sign in · login.html
- Connect Telegram · onboarding-telegram.html

Trainer · 4 tabs

Today trainer-today.html
- Session outcome: complete / no-show
Clients trainer-today.html#clients
- Package balance warnings
- Telegram handoff
Approvals trainer-approvals.html
- Approve sheet: schedule assessment
- Reject sheet: reason
- PR validation
Earnings trainer-earnings.html
- Commission ledger
- Monthly statements

Owner / admin · 4 tabs

Overview admin-overview.html
- Attention queue
- Integration health
Members admin-overview.html#members
- Expiring and low-balance packages
Invoices admin-invoices.html
- Delivery status, retry, resend
Trainers admin-overview.html#review
- Profile review and publish

Payroll approval, the full calendar and reports live in the web portal.

Web admin portal · sidebar navigation

Sign in web/login.html
Overview
- Dashboard · web/dashboard.html (M8)

Operations
- Members · web/members.html (M2)
- Trainers · web/trainers.html (M3)
- Bookings · web/bookings.html (M4)
- Training & InBody · web/training.html (M5)

Finance
- Invoices · web/invoices.html (M8)
- Salary & commission · web/payroll.html (M7)
Settings
- Telegram & email · web/communication.html (M6)
- Users & access · web/users.html (M1)

Every page uses the same layout: a fixed sidebar grouped by job, a top bar with global search and branch switcher, then summary numbers before tables. Detail opens in a side panel instead of a new page, so admins keep their place in long lists.

Step 3 · High-fidelity UI design

Design language

Follows the iOS Human Interface Guidelines: large titles, grouped inset lists, bottom sheets and a translucent tab bar, with 44 pt minimum touch targets. Navy and teal from the blueprint carry the brand. Status colours keep iOS meanings and are darkened so text stays readable.

Colour

navy
#13293D

brand
#0B7A75

brand-light
#14B3A9

ios-bg
#F2F2F7

ok
#1E7B3A

warn
#9A4E00

bad
#C4122B

info
#0A5BC4

Type · SF Pro (system)

Large title34 / bold

Title20–22 / bold

Headline17 / semibold

Body and list rows15–16 / regular

Footnote13 / regular

Section label12–13 / semibold

Falls back to Manrope where SF Pro isn't installed.

Device & components

Screen	393 × 852 pt
Display corner radius	55 pt
Status bar / Dynamic Island	54 pt / 126 × 37
Nav bar	44 pt
Tab bar incl. home indicator	49 + 34 pt
Touch target minimum	44 × 44 pt
Card / grouped list radius	20–22 / 16 pt
Screen side margin	16–20 pt
Primary button	50 pt, radius 16
Web portal canvas	1440 px, fluid
Web sidebar / top bar	248 px / 64 px
Web font	Manrope + Plex Mono

Step 4 · HTML prototype

Screens

Member app 11 screens

Trainer app 3 screens

Owner app 2 screens

For developers

Files and handoff

Every screen is a complete standalone HTML page. Open app screens at 393 px wide and portal pages at desktop width. Both platforms share the same colour tokens. Each file repeats its Tailwind theme in tailwind.config, so you can lift it into a tailwind.config.js as is. In the portal, the sidebar and top bar are identical on every page: build them once as a layout component.

index.html                     entry · iframes only
images/                        Unsplash photos (local)

app/                           iOS app · 393 × 852
  login.html                   M1 sign in
  onboarding-telegram.html     M1 Telegram + consent
  home.html                    M2 M4 M5 member home
  trainers.html                M3 directory + filters
  trainer-profile.html         M3 member-facing profile
  booking.html                 M4 slots + checks + sheet
  progress.html                M5 plan, InBody chart, PRs
  inbody.html                  M5 request status timeline
  notifications.html           M6 in-app / email / Telegram
  profile.html                 M1 M2 account + links
  invoices.html                M8 member invoices
  trainer-today.html           M4 M2 sessions + clients
  trainer-approvals.html       M5 InBody + PR approvals
  trainer-earnings.html        M7 commission + statements
  admin-overview.html          M8 M3 owner on the go
  admin-invoices.html          M8 delivery + resend

web/                           admin portal · 1440 px
  login.html                   M1 sign in
  dashboard.html               M8 overview + alerts
  members.html                 M2 list + detail panel
  trainers.html                M3 profiles + moderation
  bookings.html                M4 weekly calendar
  training.html                M5 InBody pipeline
  invoices.html                M8 invoicing + delivery
  payroll.html                 M7 statements + ledger
  communication.html           M6 templates + log
  users.html                   M1 setup, invites, roles

Stack

Tailwind CSS 3.4.17 (play CDN). Swap for a compiled build in production.
Font Awesome 6.5.2, SVG/JS build
Vanilla JS for chips, segmented controls, sheets and toasts. No framework.
Each interactive element is a real button, a or form control with a label

Not built yet

Dark mode for the app screens
Group class booking flow (the segmented control is in place)
Workout set logging form

Photos

Trainer, member and gym photos are from Unsplash and are free to use under the Unsplash License. They're stored in images/ so the prototype works offline. Replace them with your gym's own photos before launch.

Sample data

Names, amounts and dates are examples. The gym name is a placeholder: [Your Gym].

A mobile app for the gym floor, a web portal for the front office

Who uses the app, and what they come to do

Member

Goals

Key tasks

Design response

Trainer

Goals

Key tasks

Design response

Owner / admin

Goals

Key tasks

Design response

Core interaction logic: the member journey

Which platform does what

Information architecture

Member · 5 tabs

Trainer · 4 tabs

Owner / admin · 4 tabs

Web admin portal · sidebar navigation

Design language

Colour

Type · SF Pro (system)

Device & components

Screens

Files and handoff

Stack

Not built yet

Photos

Sample data