Trainer Dashboard · Layout Review
Three layout directions
These are interactive HTML mockups exploring how the trainer dashboard could be restructured. Each represents a distinct layout thesis — not a colour or font tweak, but a different approach to hierarchy and spatial organisation.
What we're solving
The current dashboard has four layout problems we're trying to address across these variations:
- Stats are small right-aligned numbers tucked into the masthead — easy to miss on a quick scan
- Four equal-weight action buttons with no visual hierarchy — "Approve Logbooks" looks the same as "Levels Guide"
- The 3:2 grid puts two unrelated panels (Approvals + Notifications) in the same column, making priority unclear
- Panel headers are tiny uppercase labels — they contribute nothing to spatial rhythm or visual anchoring
★ Latest
Variation 2 — Command Strip · v2
Complete reimagination. Dark command strip with commanding 34px stats. JetBrains Mono for clinical data. Refined three-column layout with icon badges replacing coloured top borders. First-class button hierarchy.
Open redesign →
EARLIER EXPLORATIONS
Variation 1
Triage-First
Stats get their own full-width KPI bar. The primary action becomes a hero card. Alert banner stays above the grid. Pending Approvals owns the wide column; Alerts + Notifications stack on the right.
Variation 2
Command Strip
Title + stats + primary CTA collapse into a single horizontal strip. Three equal columns replace 3:2. Critically, Alerts move to column 1. Coloured top borders signal urgency before reading.
Variation 3
Sequential Sections
Columns abolished. Single 860px column with numbered sections by urgency: ① Attention → ② Pending → ③ Updates. CTAs live inside their sections. Built for focused check-ins, not monitoring.