Design Reference · v1.0
GymLeague — Screen Map
Complete route inventory and screen descriptions for the design team. Every screen, its URL, purpose, key UI components, and which role sees it. Use this as the source of truth when building Figma frames.
Jump to section
Auth & Public Screens
No login required. Entry points for all users.
Marketing entry point. Introduces GymLeague to visitors. Should include headline, value proposition, and CTA buttons to Login or Register.
- Hero section
- CTA → /login
- CTA → /register
Standard email + password login form. After login, user is redirected based on role: student → /student/home, instructor → /instructor/dashboard, admin → /admin/dashboard.
- Email input
- Password input
- Submit button
- Link → /register
Self-registration form for new users. Collects name, email, and password. Used when a person creates their own account (separate from invitation flow).
- Name input
- Email input
- Password input
- Submit button
Invitation acceptance page. The token in the URL identifies who was invited. User completes their profile (name, password) and is immediately admitted to the gym. Received via email link.
- Pre-filled email (from token)
- Name input
- Password input
- Accept invite button
Student Portal
Mobile-first experience. Bottom navigation bar with 6 tabs. Protected — requires login with role=student.
Dashboard overview for the student. Shows greeting, current streak (flame badge), league points this month, top-5 league ranking with progress bars, and a shortcut to today’s training plan.
- Greeting + name
- Streak flame badge
- Check-in QR button
- League points card
- Top 5 ranking list
- Today’s training shortcut
QR code scanner to check into the gym. Camera opens and scans the gym’s QR code to register the visit. Earns points toward the league. Critical daily-use screen.
- Camera viewfinder
- QR scan overlay
- Success/error state
- Points earned feedback
Monthly calendar view of the student’s training plan. Each day cell shows if there’s a workout scheduled. Tap a day to open a detail drawer/modal with exercises for that session.
- Month navigation (prev/next)
- Day grid cells
- Workout indicator dots
- Day detail drawer
- Exercise list per day
View the student’s assigned training plan(s) in detail. Shows exercises, sets, reps, and machine references for each training day.
- Plan name + description
- Day tabs or sections
- Exercise cards (sets × reps)
- Machine tags
Full league ranking for the current month. Shows all students sorted by points, with the viewer’s own position highlighted. Leaderboard-style screen with gamification emphasis.
- League name + period
- Full ranked list
- “You” highlighted row
- Points + progress bars
- 1st place gold styling
Catalog of available prizes the student can redeem or view. Shows prize name, description, points cost, and availability. Motivational screen tied to the points system.
- Prize cards/grid
- Points cost badge
- Availability status
- Redeem action
Chronological list of all the student’s past gym check-ins. Shows date, time, and points earned per visit. Useful for tracking attendance over time.
- Timeline/list of check-ins
- Date + time per entry
- Points earned per entry
- Empty state
Student’s own profile page. Shows name, email, avatar, league stats, and allows editing personal info. Also contains the logout action.
- Avatar / initials
- Name + email
- Stats summary
- Edit form
- Logout button
Social activity feed shared across roles. Students can see posts, cheer (like) others’ achievements, and compose new posts. Community engagement layer.
- Post composer
- Feed item cards
- Cheer (👏) button
- Timestamp
Instructor Portal
Desktop-first with sidebar navigation. Protected — requires login with role=instructor.
Instructor overview. Shows active student count, training plans count, recent activity, and quick-action buttons to create a new plan (manual or AI-generated) or view all students.
- Greeting header
- Stat cards (students, plans)
- Recent activity card
- Quick action buttons
All training plans created by this instructor. Grid or list view of plans with name, assigned student(s), and creation date. Entry point for managing plans.
- Plans list/grid
- Plan name + student
- Create new plan button
- Generate with AI button
- Empty state
Manual form to create a training plan from scratch. Instructor names the plan, selects a student, and adds training days with exercises (machine, sets, reps, rest).
- Plan name input
- Student selector
- Day builder (add days)
- Exercise form per day
- Machine selector
- Save button
Full view of one training plan. Shows all days and exercises. Instructor can edit, reassign, or delete the plan here. Also shows which student it’s assigned to.
- Plan header (name, student)
- Day sections with exercises
- Edit / Delete actions
- Calendar assignment panel
AI-powered plan generator. Instructor provides student profile info, goals, available days, and equipment. The AI returns a complete training plan which can be reviewed, edited, and saved.
- Student selector
- Goal / level inputs
- Days per week selector
- Generate button + loading state
- AI result preview
- Save generated plan
List of students assigned to this instructor. Shows name, email, and status. Clicking a student goes to their detail page.
- Student rows (name, email)
- Search / filter
- Empty state
Individual student profile as seen by the instructor. Shows the student’s info, assigned training plans, check-in stats, and streak. Shortcut to view the student’s training calendar.
- Student name + email
- Check-in stats
- Assigned plans list
- Streak info
- View calendar button
Monthly training calendar for a specific student, viewed by the instructor. Instructor can bulk-assign training days and see which workouts are scheduled on which dates.
- Month navigation
- Calendar grid
- Bulk assign panel
- Day detail drawer
Social feed shared with students and admin. Instructor can post updates, cheer students, and monitor community activity.
- Post composer
- Feed item cards
- Cheer button
Admin Portal
Desktop-first with sidebar navigation. Full gym management. Protected — requires login with role=admin.
Gym overview for the admin. Shows 4 key stats (active students, weekly check-ins, students with active streaks, at-risk students), the full league top-5 ranking, and a shortcut to AI training plan generation.
- Greeting + time-of-day
- 4 stat cards (2×2 grid)
- League top-5 ranking
- AI generate plan shortcut
Full list of all gym students. Shows name, email, status, and join date. Admin can search, filter, invite new students, and navigate to each student’s detail page.
- Students table/list
- Search + filter
- Invite student button
- Row actions (view)
Form to invite a new student by email. System sends an email with a /join/:token link. Admin fills in the student’s email and optionally their name.
- Email input
- Name input (optional)
- Send invite button
- Success confirmation
Full student profile from admin’s perspective. View check-in history, league points, assigned plans, streak data. Admin can also edit student details or manage their account.
- Student info header
- Stats (check-ins, points, streak)
- Training plans list
- Edit / deactivate actions
- View calendar button
Training calendar for a specific student, managed by admin. Admin can see and edit the student’s scheduled workouts month by month.
- Month nav
- Calendar grid
- Day detail drawer
All instructors at the gym. Admin can view, invite new instructors, and click into each instructor’s detail page.
- Instructors list
- Invite instructor button
- Name + email columns
Same invite flow as students but for instructors. Sends an email with a /join/:token link with instructor role assigned.
- Email input
- Name input
- Send invite button
Profile view of an instructor. Admin can see assigned students, training plans created, and manage the instructor’s account.
- Instructor info
- Assigned students list
- Plans count
- Edit / deactivate
All leagues (monthly competitions). Admin creates and manages leagues. Each league has a period (e.g. May 2025), status (active/finished), and a set of enrolled students.
- Leagues list
- Status badge (active/finished)
- Create league button
- Period dates
Full ranking for one league. Shows all enrolled students sorted by points. Admin can finalize the league, see winners, and manage enrollment.
- League name + period
- Full ranked list
- Winners podium (top 3)
- Finalize league action
Manage the prize catalog. Admin creates, edits, and removes prizes. Each prize has a name, description, points cost, and availability status.
- Prizes list/grid
- Add prize button
- Edit/delete per item
- Points cost field
All gym equipment/machines. Admin adds and manages the machines that are referenced in training plans and QR codes. Each machine has a name, muscle group, and optional photo.
- Machines list
- Add machine button
- Machine name + muscle group
- Edit / delete actions
Detail view of a single machine/equipment piece. Shows full info, associated QR code, and which training plans reference it.
- Machine info
- Muscle group
- QR code preview
- Related plans
Generate and manage QR codes for the gym. The main check-in QR is here, as well as machine-specific QRs. Admin can print or download QR images.
- Check-in QR display
- Machine QR list
- Download / Print button
- QR image preview
Same AI generation flow as the instructor version. Admin selects a student, provides goals and constraints, and the AI generates a complete training plan ready to save.
- Student selector
- Goal inputs
- Generate + loading state
- Plan preview
- Save button
Gym-wide settings. Includes academy name/info configuration and LLM provider settings (API keys for AI plan generation). Critical for initial gym setup.
- Academy name input
- LLM provider section
- API key input (masked)
- Save settings button
Social feed for the admin. Same component as student and instructor feed — admin can post announcements, cheer, and moderate activity.
- Post composer
- Feed item cards
- Cheer button
Layout Patterns
Two distinct layout shells used across the app. Design both as reusable Figma components.
Used by all student screens. Full-height, no sidebar. Fixed bottom navigation bar with 6 tabs. Page content scrolls between topbar and bottom nav.
Used by admin and instructor screens. Fixed left sidebar (240px) + scrollable main content. On mobile: sidebar slides in as a drawer over an overlay.
240px
Academy
name
Nav links
User info
+ Logout
Auth & Role Routing Flow
How users get to their portal after login.
Login flow
Invite flow
Unauthenticated guard
Designer Notes & Instructions
Key context for building the final Figma.
Key decisions & constraints
- → Student = mobile-first. All student screens are designed for phones. Bottom tab bar navigation. Max content width ~390px (iPhone-sized). The sidebar is never used for students.
- → Admin + Instructor = desktop-first. Left sidebar (240px fixed). Content fills remaining width. On smaller screens the sidebar collapses to a hamburger drawer.
- → Gamification is central. Streaks (flame 🔥), league ranks, gold/silver/bronze medals, progress bars, and points (pts) appear throughout the student experience. These elements should feel exciting, not clinical.
- → Language is Brazilian Portuguese. All UI copy is in pt-BR. Nav labels: “Alunos” (students), “Instrutores” (instructors), “Treino” (training), “Ligas” (leagues), “Prêmios” (prizes), “Aparelhos” (machines), “Perfil” (profile).
- → Typography references (current dev): Headers use Barlow Condensed (bold, uppercase, condensed). Numbers/data use DM Mono (tabular). Body text uses system sans-serif. These may change in final design — note the typographic hierarchy intent.
- → Current color references: Primary accent = “ember” (orange ~#F4632A). Gold for ranking highlights. Danger red for at-risk/errors. Info blue for neutral stats. These are placeholders — the palette will be redesigned by the team.
- → Check-in screen is critical. This is the most-used student screen daily. It opens a camera, scans a QR code, and gives instant feedback (points earned). It needs to be fast, clear, and delightful.
- → Calendar + Training Day Drawer. Both admin/instructor and student have a training calendar. The day-detail side is a Drawer component (slides from the right or bottom). It shows exercises with sets × reps × rest.
- → AI generation flow. Both admin and instructor have a “Generate plan with AI” screen. After the user fills in student goals, the AI streams back a plan. Design should include a loading/generating state with clear feedback before the result appears.
- → Error state + loading skeletons. Every data-fetching screen has skeleton loading states (pulse animation placeholders) and error banners. Please design both in Figma so engineering has specs.
- → 38 screens total. Suggested Figma organization: one page per role (Public, Student, Instructor, Admin), plus a Components page for shared UI, and a Layouts page for the two shell patterns.
Test Credentials
Academia FitPulse · All users share the same password: password · API: http://localhost:8080/api/v1