Internal preview of the BOS Academy screens being designed for Phase 1A (Assessment Path for new hires). These are HTML mockups — visual references for what the real app will look like once the autonomous build implements them. They don't connect to anything; nothing here is the running app.
Two layout patterns are in use. Two-column (locked for Mockup 1) splits the screen into a read pane and a write pane. Full-width (locked for Mockups 2–4) puts a single work card across the whole content area and uses internal grids to organize it. Both patterns share the same stepper, topbar chips, sidebar, and calm-note conventions, so screens stay visually consistent regardless of layout. Mockups 2–4 are designed phone-first — resize your browser to under ~600px to see the hamburger drawer, compact stepper, and stacked content kick in.
The workspace a new hire on paid trial sees from Day 1 through the end of the 10-day path. Locked layout: horizontal stepper at the top, then a 50/50 read/write split — left is the brief and source files (read mode), right is the submission form (write mode).
Auto-assembled at end of week 1 and week 2 of the Assessment Path. Scores the new hire across the 11-skill Internal Assessment rubric grouped Filter / Baseline / Craft, with composite-score diagnostics. Dayna reads this to make the hire / no-hire call. The 11-skill rubric is wide — Full-width is the right pattern.
Dayna's view of an in-flight hire. Phase 1A minimal: see the new hire's progress through the Assessment Path, the latest auto-tracked telemetry, and the actions available at the current day. Full Manager Dashboard with compliance grid, Quest assignment, content authoring, and Kudos activity ships in Phase 1B.
The post-conversion handoff. Even though Track 2 ships in Phase 1B, designing this now lets the autonomous build understand the assessment-to-Learning-Track transition and the contrast in tone — the Assessment Path is calm and ungamified; the Learning Track is where XP, badges, streaks, and Quests turn on.