Personal-Training Platform — Three Roles, 700 Frames
A 500-page client specification turned into one coherent product.
A three-role personal-training platform — trainer, client and an admin back office — encoding real strength-and-conditioning methodology rather than a generic workout list. I turned a client specification of more than 500 pages into a coherent 700-frame product across three role surfaces and three wired prototypes, on a design system of 448 components and 60 variant sets built with no vendor kit and twelve semantically named colour roles. It was approved and handed to development; the build did not complete, so nothing here says it launched.
- Role
- Sole product designer
- Timeframe
- Mar 2024 – Dec 2024
- Stack
- Figma
- Evidence
- Design file
Sole product designer translating an exhaustive 500+ page strength-and-conditioning specification from a Universidade de São Paulo (USP) physical education teacher into a 700-frame, 3-role platform (Personal, Aluno, Admin). Engineered the only from-scratch design system in the Sagitta portfolio (448 components, 60 variant sets, 12 semantically named color styles, and named Shadow Cards elevation, with zero Untitled UI), plus 119 manually unrolled full-height handoff screens in Telas do Protótipo.
Agency engagement at Sagitta spanning eight months of sustained delivery (March to December 2024). The client, a personal trainer and PE professor at USP (Universidade de São Paulo), provided exhaustive domain rules covering PAR-Q medical screening, advanced periodization (GVT, Rest-Pause, Drop Sets, RIR), and dual-mode photo/video assessments. Juan owned the entire product, prototypes, and style system alone; marketing landing pages were authored separately by João Chagas.
Translating 500 pages of sports science into a 3-role platform
- 700
- frames designed across trainer, student, and admin surfaces
- 448
- bespoke components built from scratch with zero vendor kits
- 500+
- pages of technical sports science specification translated
- 119
- full-height screens manually unrolled in Telas do Protótipo for dev handoff
Fitness coaching platforms frequently degenerate into generic exercise lists and static timers. In contrast, Pro Personal was commissioned by a physical education professor and researcher at Universidade de São Paulo (USP), who delivered an exhaustive, 500-page specification detailing clinical screening, periodized training cycles, and neuromuscular fatigue adaptations. My role was to absorb this deep domain corpus and architect an intuitive digital ecosystem without compromising the rigor of the underlying exercise physiology.
Domain modeling: periodization, clinical screening, and adaptive fatigue
The platform structures three dedicated role workflows (Personal, Aluno, Admin) with granular domain mechanics:
- PAR-Q Health Screening with Admin Maintenance — Full modeling of the Physical Activity Readiness Questionnaire with trainer evaluation views (visualiza-sim / visualiza-não) and back-office CRUD allowing administrators to add, modify, or deprecate clinical screening questions.
- 12-Step Pre/Post Workout Questionnaires — Multi-stage daily check-ins (Questionário pré treino 1–12 and pós treino 1–5.2) evaluating sleep quality, perceived soreness, and mental readiness before session start.
- Adaptive Fatigue Warning Logic — A dedicated 11-frame warning architecture (DiaCansado/AVISO) that dynamically intercepts the athlete's workflow when elevated fatigue scores are logged, prompting load reductions or recovery sessions.
- Advanced Strength Periodization UI — Purpose-built UI tagging and session generation for 11 strength methodologies: Drop Set (DS), German Volume Training (GVT), Rest-Pause (RP), Reps in Reserve (RIR), Cluster Sets (CS), Paused Reps (PC), and 3/7 protocols.
- Comparative Body Tracking — Multi-angle physique assessments supporting side-by-side photo comparison (Comparação de fotos), video movement uploads (input_uploadvídeo), and annotated trainer feedback loops.
- Complete Brazilian Subscription Lifecycle — End-to-end checkout covering Credit Card, Pix, and Boleto, coupled with active subscription management, plan upgrades, and explicit cancellation flows.
Zero vendor primitives: a 448-component system built from scratch
Pro Personal is the sole project in Sagitta's entire agency catalog built 100% from scratch with zero Untitled UI or imported vendor templates. Across 448 components (388 variants over 60 base component sets), every single element was authored in Portuguese domain terminology: Timer Circle, input_uploadvídeo, OpçõesSelect, buttonSave, and Estado=Ativo, Tipo=Notificação. The file defines 12 semantically named color styles (Purple 1–4 Primary, Black Primary, Grey Primary, Background #FAFAFA, stroke #EBEBEB) and a named Shadow Cards elevation style, backed by a comprehensive 61-frame Style Guide page.
Developer empathy in practice: the 119-screen Telas do Protótipo
To make the prototype usable across 50 functional sections, I engineered a dedicated prototype component layer (NavBarProtótipo, MenuNavBarProtótipo, NavItemProtótipo, BottomMenuProtótipo) and threaded approximately 20 sticky-note annotations with implementation logic directly into the canvas. When the assigned developer reported that Figma's fixed-height viewports hindered his ability to inspect full-page vertical layouts, I manually duplicated and unrolled all 119 screens to full height on a separate page named Telas do Protótipo. This eliminated the developer's inspection friction at personal time cost, exemplifying practical, low-friction handoff commitment.
I spent two years designing products that never shipped because no-code builds couldn't execute them. Pro Personal was approved and loved by the client, but the build layer broke. That frustration is the exact reason I learned to code: now I hand over designs I can build myself.
The catalyst for full-stack design engineering
Pro Personal represents the highest standard of UX depth and UI craft in my early agency work, and its ultimate outcome shaped my entire career. Watching a client celebrate an approved 700-frame platform only for a no-code development stack to fail during implementation proved that interface design without technical execution power leaves products vulnerable. This project is the origin of my transition to design engineering, ensuring that complex software specifications are matched by hardened, code-level execution.
Evidence
Formally approved during client validation on 2024-11-08 with high praise for interface clarity and domain fidelity across seven recorded checkpoints. The project was handed off to engineering, but Bubble no-code development limitations stalled the implementation and prevented public deployment. The frustration of watching an approved, 700-frame design system fail to reach production became the definitive catalyst for Juan's transition into full-stack design engineering.