Which layout would you ship first?
Decision: Pending
ClassLink · Frost · Data viz sketches
Dashboards & layouts
Three layouts for one dashboard, using the color, type and motion rules from the Login Summary.
- Category
- Dashboards & dashboard-like layouts · 28 in the audit
- Representative
- Analytics+ Overview (live)
- Sketches
- 10
- Data
- Mock, from screenshots
- Status
- Draft · For feedback
- Updated
- 2026-10-20
00 · Representative
Analytics+ Overview
- What shipsFour stat cards act as tabs for one column chart, with a resource table below.
- What worksOne click changes the question; the cards double as the legend.
- What to improveEach card shows one number and no trend, four accent colors for four measures, and the table has no size cue.
Sketch A · Data density
One question at a time
Time Spent
240m
This Month
Digital Resources
67
This Month
Students & Staff
92
This Month
Logins
2,398
This Month
Students & Staff by MonthLast 12 Months
Digital Resources by UsageThis Month
NameTypeUnique UsersDaily Time / User
CanvasApp2,3649m
Google WorkspaceApps+2,3176m
Kahoot!App1,6049m
youtube.comDomain1,24913m
khanacademy.orgDomain1,1526m
SeesawApp1,1416m
Why
Keeps what ships, but each card carries its own trend and the table shows size.
Spec
- Cards in one centered row, act as tabs
- Micro columns on every card: peak dark, now mid
- Table bar = unique users, one blue
- Chart peak dark, rest light, labels on peak and now
Principle
Data density in a shared frame
Sketch B · Small multiples
Every measure at a glance
Time SpentThis Month
240m
Digital ResourcesThis Month
67
Students & StaffThis Month
92
LoginsThis Month
2,398
Digital Resources by UsageThis Month
Why
No click needed: four measures side by side, the same shape, one hue.
Spec
- Four panels in one centered row, one blue
- Own scale, peak and now labeled
- Hero 54/600 Barlow on the first panel, then 34/600 Barlow
- Ranked list with bars, no trophies
Principle
Small multiples
Sketch C · Narrative
The answer first
Students spent 38 minutes a day on devices in October, down from a 73-minute peak in January.
Digital resources
67
Students & staff
92
Logins
2,398
Most used: Canvas, 2,364 unique users
Why
Leads with the finding in a sentence, then shows the evidence.
Spec
- Headline 20/700 standout-text, key numbers in ink-900
- One chart with peak, low and now labeled
- Other measures as a centered card row
- Grows in once, when fully in view
Principle
Words and numbers together
Sketch D · Explore · Small multiples
Pulse tiles and bubbles
Digital Resources by UsageBubble area = unique users
Why
Each card carries a living wave and the apps become bubbles you can compare by size, so the page feels warm before it is read.
Spec
- KPI row centered, wave fills the card base
- Peak pinned with a ring
- Bubbles = unique users (area)
- Bounce in once, when in view
Principle
Small multiples, one visual language
Sketch E · Explore · Unit chart
A skyline of dots
Time Spent
240m
This Month
Logins
2,398
This Month
Average Time Spent Per Day1 dot = 5 minutes
Why
One dot is five minutes, so the month is something you count, and the days feel like a street.
Spec
- 1 dot = 5 minutes
- Peak darkest, now azure
- Drop in, column by column
- KPI row above, centered
Principle
Show the count, not the slice
Sketch F · Explore · Small multiples
Beads and tiles
Time Spent
240m
This Month
Digital Resources
67
This Month
Students & Staff
92
This Month
Logins
2,398
This Month
Average Time Spent Per DayBead size = minutes
Digital Resources by UsageTile area = unique users
Why
Months become beads on a string and apps become tiles, so size does the talking and nothing is a bar.
Spec
- KPI row equal tiles, hero 54/600 Barlow
- Bead size = minutes; peak starred
- Tile area = unique users
- Beads bounce, string draws once
Principle
Small multiples, one visual language
Sketch G · Explore · Unit chart
Fill-up jars
Time Spent
240m
This Month
Logins
2,398
This Month
Average Time Spent Per DayFull jar = 80 minutes
Why
A jar filling up is something a teacher gets without a legend, and the full one is the month to ask about.
Spec
- Jar level = minutes (full = 80)
- Peak starred, now azure
- Fill rises once, in order
- KPI row above, equal tiles
Principle
Show the quantity, not a scale
Sketch H · Explore · Small multiples
Bento board
Time Spent
240m
This Month
Digital Resources
67
This Month
Students & Staff
92
This Month
Logins
2,398
This Month
Time SpentLast 12 months
Students & Staff
92
10 people = 100%
Logins
2,398
Dot size = logins
Digital Resources by UsageSticker size = unique users
Why
Each measure gets its own shape in one tidy grid, so the page scans like a set of tiles instead of a wall of charts.
Spec
- KPI row equal tiles above
- Wave, people, dots, stickers: one form per measure
- Plum = Students & Staff
- Bounce in once
Principle
Small multiples, varied forms
Sketch I · Explore · Comparison
Podium
Time Spent
240m
This Month
Digital Resources
67
This Month
Logins
2,398
This Month
Digital Resources by UsagePodium height = unique users
Why
The top three apps stand on a podium, so rank and gap are clear before a number is read.
Spec
- Block height = unique users
- Avatar + name + count on each
- 4 to 6 listed beside it
- Blocks rise once
Principle
Show comparisons
Sketch J · Explore · Layering
Constellation
Time Spent
240m
This Month
Logins
2,398
This Month
Average Time Spent Per DayStar size = minutes
Why
Months are stars joined by a thin line: the brightest star is the month to ask about.
Spec
- Star size = minutes; peak and now labeled
- Night panel, white ink
- Line draws, stars bounce in
- KPI row above
Principle
Layering and separation
Rules in every sketch
One system
- Color
- Role hue · blue for quantity · status inks
- Status
- Icon + label badge, no dots, from the Frost status spec
- Type
- Frost v.03 roles: Inter, Barlow numerals 34+
- Form
- No donuts, pies or rings
- Motion
- Once, when fully in view
- KPI cards
- One horizontal, centered row
Feedback
Which one, and why?
Should the stat cards stay as tabs?
Decision: Pending