Preserve identity
Navy, indigo, white surfaces, semantic colors, and the exact existing gradient remain. We redesign hierarchy, composition, icons, typography, and interaction—not the palette.
Approved direction · implementation plan
One product system. Two working tempos.
Wodie Club keeps the friendly athlete experience and gives organization managers the denser operational workspace they need. The redesign changes the visual grammar and information architecture while preserving product behavior and Spanish copy.
302direct Material icon uses
176locally created radii
129feature-level Containers
8controlled delivery slices
Operational desktop
Meta-inspired scopes, filters, predictable tables, bulk actions, and persistent organization context for managers and coaches.
Focused mobile
Apple-inspired restraint: readable titles, strong content focus, layered navigation, large touch targets, and one clear next action.
Two tempos, one system
Manager views are denser. Athlete views breathe more. Both use the same tokens, icon semantics, state language, feedback, and component contracts.
Responsive equivalence
Compact layouts may reorganize information, but they cannot hide a capability available on desktop. Every action gets an intentional compact location.
Progressive migration
No giant rewrite. Each slice is mergeable, testable, and visually complete. Routes, providers, authorization, and domain behavior remain stable.
SystemTokens, icons, components
ShellRole-aware navigation
JourneysManager then athlete
ProofAccessibility and visual QA
Baseline: plan against
origin/main. Pull request #42 only finishes safe error mapping and should merge independently; the redesign must preserve those messages and error boundaries.Slice 01 · design contract
Make visual decisions once.
Strengthen the existing theme and primitives into a complete Wodie Club system before touching feature screens.
Acceptance
- The exact AppBackground gradient remains unchanged.
- Controls, surfaces, overlays, states, and motion have named tokens.
- New feature UI uses no arbitrary radii, shadows, or colors.
- Shared primitives work at 390, 768, 1280, and 1440px.
PR 1 — Wodie Club foundation
Theme tokens, Phosphor icon adapter, component gallery, shared state components, and contract tests.
Theme tokens, Phosphor icon adapter, component gallery, shared state components, and contract tests.
1
Token taxonomy4/8/12/16/24/32 spacing; 10px controls; 12–14px surfaces; 16px large panels; pills only for badges and compact filters.
2
Typography rolesInter/Manrope-style neutral sans hierarchy: page title, section title, table header, body, metadata, and numeric emphasis. Avoid gratuitous uppercase.
3
Surface hierarchyBackground → working surface → section → selected state → action. Borders structure content; shadows are reserved for floating overlays and focus.
4
State languageReusable empty, loading, error, offline, success, warning, and permission-denied patterns with safe Spanish copy.
5
Responsive primitivesPage frame, toolbar, data row/table, filters, action menu, form section, dialog/sheet, metric strip, status badge, and contextual banner.
6
Motion tokens140ms feedback, 200ms content transition, restrained easing, no decorative entrance cascades, and reduced-motion support.
Locked palette and gradient
#1C2340
Navy
Navy
#5C6BC0
Indigo
Indigo
#FFFFFF
Surface
Surface
#EEF0F8
Lavender
Lavender
#D8DEE9
Border
Border
0 / 45 / 100%
Gradient
Gradient
Icon contract
○Phosphor RegularDefault navigation and actions
●Fill selectivelySelected navigation only
＋Label actionsIcons alone only when universally clear
!Semantic stabilityOne symbol per meaning everywhere
Slice 02 · information architecture
One role-aware shell.
Replace the independent athlete, desktop, and organization navigation models with one destination contract and intentional layouts per viewport.
Desktop · ≥1200Persistent workspace
ContextWodie + active box at the top
Primary spacesRole-based destinations, visible and grouped
Working headerScope, title, filters, primary action
AccountProfile, box switcher, role transitions
Tablet · 720–1199Compact workspace
RailIcon + tooltip destinations
Context headerActive box remains explicit
Adaptive bodyTwo columns where useful
OverflowSecondary actions in labelled menus
Mobile · <720Focused navigation
Top barCurrent context and account
Bottom tabsFour most-used role destinations
MoreComplete labelled destination list
ActionsSticky primary or contextual menu
Acceptance
- Every authorized destination is reachable at every viewport.
- No duplicate bottom navigation or shell ownership.
- Coach and manager capabilities derive destinations from permissions.
- Box switching never loses role or active organization context.
- Keyboard focus, selected state, labels, and tooltips are explicit.
1
Destination modelOne source of truth for icon, selected icon, label, route, role, permission, and compact priority.
2
Unified shellPage frame and navigation adapt without changing the route hierarchy or feature state.
3
Context switcherActive box, alternate memberships, manager/coach context, and athlete context become understandable and accessible.
4
Responsive matrix testsRole × width × destination coverage for athlete, coach, manager, and platform admin.
PR 2 — Unified responsive shell
Destination contract, Phosphor navigation, responsive sidebar/rail/bottom tabs, account menu, and parity tests.
Destination contract, Phosphor navigation, responsive sidebar/rail/bottom tabs, account menu, and parity tests.
Slices 03–04 · organization workspace
Faster operations, less card chrome.
Managers and privileged coaches get a scan-friendly workspace: compact filters, explicit scopes, structured rows, predictable batch actions, and state that reads at a glance.
Acceptance
- Classes and WODs are equally discoverable on desktop and mobile.
- Dense data uses rows/tables on desktop and semantic cards on compact screens.
- Primary, secondary, and destructive actions have stable locations.
- Permission-disabled actions explain why; they do not silently disappear.
- All existing creation flexibility and authorization behavior remain intact.
PR 3 — Daily operations
Overview, classes, WOD programming, coach WOD access, attendance, and scheduling dialogs.
Overview, classes, WOD programming, coach WOD access, attendance, and scheduling dialogs.
PR 4 — People and revenue
Athletes, coach permissions, plans, GoCardless connection, billing, booking rules, and settings.
Athletes, coach permissions, plans, GoCardless connection, billing, booking rules, and settings.
3A
OverviewToday’s operational state first: next classes, attendance exceptions, unpublished WODs, plan/payment attention, then summary metrics.
3B
ClassesDate scope, capacity, coach, WOD status, attendance state, quick edit, duplicate, cancel, and attendee access.
3C
WOD programmingWeek/day scope, structured block preview, state, quick actions, bulk upload, programs, and fully responsive creation/editing.
4A
Athletes and staffSearch, membership/role state, permission grants, status transitions, details, and safe destructive confirmation.
4B
Plans and billingPlan comparison, status clarity, gym-owned GoCardless connection, action history, and recovery guidance.
4C
SettingsBox identity, booking rules, tracks, notifications, and connected services grouped by task—not as one long form.
Slices 05–06 · athlete workspace
Today first. Progress second.
Athlete screens should feel calmer and more personal than the manager workspace while sharing its component system and interaction rules.
Acceptance
- The next useful action is obvious on every primary screen.
- Booking, waitlist, cutoff, cancellation, and credit consequences are visible before confirmation.
- Long workout results wrap and group correctly at every width.
- Progress data is legible without turning every metric into a card.
- Organization, plan, billing, and notification state read as one membership journey.
PR 5 — Training day
Calendar, class detail, WOD, booking overview, result entry/history, and leaderboard.
Calendar, class detail, WOD, booking overview, result entry/history, and leaderboard.
PR 6 — Progress and account
Personal records, timer, profile, organization discovery, membership, plans, notifications, and payment results.
Personal records, timer, profile, organization discovery, membership, plans, notifications, and payment results.
5A
Calendar and classesNext class emphasis, compact date navigation, clear availability, booking state, WOD preview, and consequence-aware actions.
5B
WOD and resultsReadable structured blocks, intent-based hierarchy, result composition rather than a single unbounded line, notes, level, and leaderboard path.
5C
BookingsUpcoming first, cancelled notices separated, weekly progress subordinate, and recovery actions when membership or payment blocks booking.
6A
ProgressRecords, trends, and timer share consistent numeric typography, filters, empty states, and result save feedback.
6B
MembershipActive box, plan, renewal/payment state, cancellation policy, and organization discovery become one coherent account story.
6C
Profile and preferencesPersonal details, memberships, notifications, bookmarks, and account actions use progressive disclosure instead of one oversized page.
Slices 07–08 · system completion
Polished means predictable.
Finish the redesign by standardizing auth, forms, overlays, feedback, accessibility, responsive behavior, and visual regression coverage—not by chasing isolated screenshots.
Auth, forms, and feedback
- Login and registration identity
- Shared dialog/sheet decision rules
- Field grouping and inline validation
- Snackbar/banner/result-state hierarchy
- Loading, empty, error, offline, and denied states
- Destructive confirmation language
Accessibility and visual QA
- WCAG AA text and control contrast
- 44×44 minimum interactive targets
- Keyboard order and visible focus
- Semantics and meaningful labels
- Text scaling to 200%
- Reduced motion and screen-reader checks
Viewport and platform proof
| Gate | 390 mobile | 768 tablet | 1280 desktop | 1440 wide |
|---|---|---|---|---|
| Navigation parity | Required | Required | Required | Required |
| No RenderFlex overflow | Required | Required | Required | Required |
| Golden screenshots | Key journeys | Key journeys | Key journeys | Manager tables |
| Keyboard/focus | External keyboard | Required | Required | Required |
| Native validation | Physical iOS + Android | Where supported | Web reference | Web reference |
PR 7 — Forms and system states
Auth, dialogs, sheets, validation, notifications, empty/error/loading states, and reduced-motion behavior.
Auth, dialogs, sheets, validation, notifications, empty/error/loading states, and reduced-motion behavior.
PR 8 — Accessibility and visual regression
Golden harness, viewport matrix, semantic audit, keyboard/focus, text scaling, contrast, and native parity checklist.
Golden harness, viewport matrix, semantic audit, keyboard/focus, text scaling, contrast, and native parity checklist.
Execution model
Eight slices. One acceptance contract.
Each slice produces a reviewable, deployed preview. Foundations land before feature migrations; manager and athlete work can then progress without re-inventing visual rules.
Tokens, icons, primitives, states, motion.
Unified responsive and role-aware shell.
Overview, classes, WODs, attendance.
People, permissions, plans, billing, settings.
Calendar, booking, WOD, results, leaderboard.
Progress, timer, profile, organization, membership.
Auth, forms, overlays, feedback and motion.
Accessibility, visual tests and native parity.
Per-PR evidence
- Before/after at 390, 768, and 1280
- Navigation/action parity checklist
- Focused widget and golden tests
flutter analyzeand full tests- Cloudflare Worker preview URL
Product invariants
- No authorization or billing behavior changes
- No WOD creation flexibility regression
- Spanish operational copy preserved
- Existing safe errors retained
- Gradient unchanged
Final definition of done
- All routed surfaces migrated
- No width-only hidden capabilities
- No known overflow at the viewport matrix
- One icon family and semantic map
- Accessibility gates pass
Beads structure
Create one redesign epic with eight child issues matching these PR slices. Each child carries its screen inventory, acceptance criteria, viewport evidence, dependencies, and review link. Close the old “polish” framing; this is a new system-level redesign.
Review cadence
Approve the foundation/component gallery first, then review each deployed vertical slice in the reference web client. Validate iOS and Android after shared Flutter surfaces stabilize, with native-specific exceptions documented rather than silently diverging.
Risk control
Decompose the largest presentation files while migrating them, but do not combine repository/domain rewrites with visual PRs. Protect WOD creation, booking consequences, role permissions, GoCardless state, and result formatting with focused regression tests.
Recommended starting point: merge PR #42 independently, create the redesign epic, then begin PR 1 with the component gallery and Phosphor icon mapping. Do not restyle feature screens before the foundation is reviewable.