# 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: manipulation` to 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: high` media 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: manipulation` prevents 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.*