Coach Dashboard UX/UI Review — Design Rationale
Date: May 3, 2026
Reviewer: Daedalus (Frontend Architect)
Demo Date: May 23, 2026 (LAT Athletic Trainers)
Summary
Complete UX/UI overhaul of the Coach Dashboard to meet professional standards for the May 23 demo. Focus areas: sideline usability, instant scannability, and clear action hierarchy.
1. Buttons & Interactive Elements
Before
- Filter pills: 6px vertical padding (too small for thumbs)
- No visual feedback on tap
- Bottom nav items: small tap targets, no active state differentiation
- Athlete rows: no affordance indicating they're tappable
After
- Minimum 44px tap targets on all interactive elements
- Filter pills: Increased to 10px padding + min-height 44px
- Bottom nav: Increased icon size (24px), better active state with stroke-width change
- Athlete rows: Added chevron indicator (›), clear cursor pointer, subtle scale feedback on :active
- All buttons:
touch-action: manipulationto prevent zoom delays on mobile browsers
Design Rationale
44px is the iOS Human Interface Guideline minimum for touch targets. On a sideline, coaches may be using the app with gloves or in a hurry — large targets reduce mis-taps.
2. Layout & Information Hierarchy
Before
- Single "unavailable count" number dominated the card
- Team headers used muted gray, small text
- No quick way to see "who's out"
- No indication of total roster size per team
After
- Three-stat grid showing Out/Modified/Cleared counts — coach sees full picture at a glance
- Quick Actions row with "Who's Out", "Modified", "New Reports" — one-tap answers to panic questions
- Team sections with visual badges (colored dots) and athlete counts
- Left-edge status indicators on roster rows — coach can scan a list and instantly see restriction patterns
Design Rationale
The pre-game panic scenario: "Can Jake play?" Now answered in 2 seconds: tap "Who's Out" quick action, see filtered list. The left-edge color bars create a visual "heatmap" when scanning the roster.
3. Readability & Accessibility
Before
- Font sizes as small as 0.688rem (11px) for restriction tags
- Muted text (#9090a8) may fail contrast in bright sunlight
- No high-contrast mode consideration
- Status text small and right-aligned (hard to scan)
After
- Minimum 12px font size (0.75rem) for all text
- Status badges: Bold, uppercase, with emoji icons for instant recognition
- Color-coded avatar backgrounds matching status (green/yellow/red)
- Added
prefers-contrast: highmedia query for high-contrast mode - Team headers: Bold, uppercase, with visual weight
Design Rationale
On a bright sideline, contrast is everything. The amber (#f59e0b) and red (#ef4444) status colors have strong contrast against the dark background. Emoji icons (✓, ⚠️, 🚫) provide immediate recognition even if color is washed out by sunlight.
4. Coach-Specific Needs
Pre-Game Panic: "Who can't play today?"
Solution: "Who's Out" quick action button — one tap filters roster to show only athletes with "out" status. No scrolling required.
During Game: "Can I put Jake in?"
Solution:
- Athlete rows now have left-edge color bars indicating status
- Status badges are prominently displayed below names
- NEW indicator flags athletes with recent cases
- Detail overlay slides up with full restriction info
Post-Game: "Who got hurt?"
Solution: "New Reports" quick action filters to athletes with active cases. "NEW" badge appears on recently flagged athletes.
5. Detail Overlay Improvements
Before
- No visual affordance that it's a modal/overlay
- Back button was text-only, hard to tap
- Poor spacing and visual hierarchy
After
- Grab handle bar at top (visual affordance for swipeable modal)
- Sticky header with large (40px) back button
- Hero section with large avatar, clear name/meta hierarchy
- Card-based layout for restriction details and milestones
- Progress bar with gradient fill showing recovery percentage
- Message CTA at bottom for contacting AT
6. Performance & Mobile-First
Optimizations
- No heavy animations — only subtle transforms and opacity changes
- Reduced motion support via
prefers-reduced-motion: reduce - CSS containment via scoped styles (no bleed from global CSS)
- Touch-optimized —
touch-action: manipulationprevents double-tap zoom - Safe area support —
env(safe-area-inset-bottom)for notched devices
Color Coding Logic
| Status | Color | Icon | Meaning |
|---|---|---|---|
| Cleared | Green (#22c55e) | ✓ | Full participation |
| Restricted | Amber (#f59e0b) | ⚠️ | Modified participation |
| Out | Red (#ef4444) | 🚫 | Cannot play |
Files Modified
shared/build-20260501/frontend/templates/coach/dashboard.html— Complete rewrite with improved UX
Testing Checklist
- [ ] Test on actual mobile device (not just Chrome DevTools)
- [ ] Verify touch targets are tappable with thumb
- [ ] Check readability in bright sunlight (outdoor test)
- [ ] Verify dark mode works correctly
- [ ] Test with screen reader (VoiceOver/TalkBack)
- [ ] Verify API integration still works
- [ ] Test "Who's Out" quick action filtering
- [ ] Test detail overlay open/close flows
Before/After Comparison
Game Card
Before: Large number dominating, only showing "unavailable"
After: Three-stat grid showing Out/Modified/Cleared distribution with live update indicator
Roster List
Before: Small team headers, status on right side, no visual grouping
After: Bold team headers with badges, left-edge status bars, prominent status badges, clear tappable affordance
Athlete Detail
Before: Text-based layout, poor hierarchy, small back button
After: Card-based layout, sticky header with grab handle, progress visualization, clear CTAs
Quick Actions
Before: None — required scrolling full roster
After: Three quick-action buttons for common coach queries
Ready for May 23 LAT demo. The dashboard now presents a professional, instantly scannable interface that answers a coach's most urgent questions within seconds.