ClassLink · Frost · Data viz sketches

Quadrant & scatter

Three ways to compare apps on use, outcomes and cost, for two apps or two hundred.

Category
Quadrant & scatter · 1 in the audit
Representative
Insights Cost Insights
Sketches
10
Data
Mock, from screenshot
Status
Draft · For feedback
Updated
2026-10-20

00 · Representative

Insights Cost Insights

Current screen
  • What shipsFour KPIs with colored top rules, a quadrant with tinted corners, and a cost table.
  • What worksThe quadrant names a decision for each position: keep, expand, review, evaluate.
  • What to improveFour tinted quadrants use status colors for non-status; two apps leave a big empty plot; the table repeats what the plot says.

Sketch A · Less ink

A quiet quadrant

Usage vs. OutcomesDot area = annual cost
0%0%25%25%50%50%75%75%100%100%Expand accessKeep and scaleEvaluate needReview alignmentMathQuestLingoLearnLicense utilizationStudents improved

Why

The meaning is in the corner words, so the tints and the legend can go.

Spec

  • Axes 0 to 100, crosshair at 50%
  • Corner words in 12/600 ink; no tint
  • Dot area = annual cost; one blue
  • Labels on the dots, no legend

Principle

Erase non-data ink

Sketch B · Dot plot

Two dots per app

Usage vs. OutcomesThis Year
LingoLearn35%61%$8,500MathQuest75%62%$22,0000%50%100%
Licenses usedStudents improvedAnnual cost

Why

It reads the same decision, and it still works with 200 apps.

Spec

  • Hollow = licenses used · filled = students improved
  • Gap is the story; rows sorted by gap
  • Annual cost at the right edge
  • Shape and fill, not hue, tell them apart

Principle

Show the comparison

Sketch C · Density

A table that draws

Total Annual Spend
$30,500
Avg Utilization
55%
Unused Spend
$11,025
Strong ROI Apps
1
App-by-App Cost SummaryThis Year
AppAnnual costUtilizationStudents improvedUnusedRead
MathQuest$22,00075%62%$5,500Keep and scale
LingoLearn$8,50035%61%$5,525Expand access
Tick marks 50%.

Why

A row already holds cost, use, outcome and waste; small bars make it scannable.

Spec

  • KPIs in one row, all 34/600 Barlow so $30,500 clears the card padding
  • Bars with a 50% tick for use and outcome
  • Unused spend as a plain number
  • Read keeps the decision in words

Principle

Tables that draw

Sketch D · Explore · Layering

Used and unused spend

Usage vs. OutcomesSolid = used spend · dashed = unused
Expand accessKeep and scaleEvaluate needReview alignment0%0%50%50%100%100%MathQuest$5,500 unusedLingoLearn$5,525 unusedLicense utilization

Why

The bubble shows what the school paid for and how much of it sits idle, inside the quadrant.

Spec

  • Solid = used spend, dashed = unused
  • Quadrant tints, named in text
  • Labels on the marks
  • Bounce in

Principle

Layer, do not separate

Sketch E · Explore · Unit chart

Coin stacks

Total Annual Spend
$30,500
Avg Utilization
55%
Unused Spend
$11,025
Strong ROI Apps
1
Cost per Improved Student1 coin = $5
$24.44MathQuest$60.71LingoLearnSimilar improvement,about 2.5x the cost.

Why

Cost per improved student becomes a stack of coins, so "2.5 times the cost" is visible.

Spec

  • 1 coin = $5
  • KPI row centered above
  • Coins drop in
  • Direct labels on both stacks

Principle

Show the count

Sketch F · Explore · Layering

Pins on a map

Usage vs. OutcomesPin size = annual cost
Expand accessKeep and scaleEvaluate needReview alignment0%0%50%50%100%100%75% used62% improvedMathQuest35% used61% improvedLingoLearn

Why

Each app is a pin on a map, with drop lines to the two numbers that placed it.

Spec

  • Pin size = annual cost
  • Drop lines to both axes, values labeled
  • Quadrant names in text, tints neutral
  • Pins drop in once

Principle

Layer, do not separate

Sketch G · Explore · Comparison

Slopegraph

Total Annual Spend
$30,500
Avg Utilization
55%
Unused Spend
$11,025
Strong ROI Apps
1
Usage vs. OutcomesEach line = one app
Licenses usedStudents improvedMathQuest 75%MathQuest 62%Outcome trails use by 13 pointsLingoLearn 35%LingoLearn 61%Outcome beats use by 26 points

Why

One line per app, from how much it is used to how much it helps, so the gap is the story.

Spec

  • Left = licenses used, right = students improved
  • Gap stated in words
  • KPI row above, equal tiles
  • Lines draw once

Principle

Show comparisons

Sketch H · Explore · Comparison

Report cards

App report cardsThis Year
MathQuestKeep and scale
Licenses used75%Students improved62%
$22,000 a year · $5,500 unused
LingoLearnExpand access
Licenses used35%Students improved61%
$8,500 a year · $5,525 unused
5 stars = 100%

Why

Teachers know report cards: five stars for use, five for outcomes, and the decision in a pill.

Spec

  • Stars: 5 = 100%, partial stars clipped
  • Decision in a pill, text not color
  • Cost and unused spend as a note
  • Stars bounce in

Principle

Show comparisons

Sketch I · Explore · Layering

Race lanes

Usage vs. OutcomesFlag = licenses used · runner = students improved
MathQuestUsed 75%Improved 62%Outcome trails use by 13 pointsLingoLearnUsed 35%Improved 61%Outcome beats use by 26 points0%50%100%

Why

A flag marks how much is used and a student runner marks how much it helps, so the gap is the distance between them.

Spec

  • Flag = licenses used
  • Runner = students improved
  • Gap stated in words
  • Flags and runners pop in

Principle

Layer, do not separate

Sketch J · Explore · Small multiples

Decision board

Usage vs. OutcomesThis Year
Students improved: high → low
Expand access
Low use, strong outcomes
LingoLearn
35% used · 61% improved · $8,500 a year
Keep and scale
High use, strong outcomes
MathQuest
75% used · 62% improved · $22,000 a year
Evaluate need
Low use, weak outcomes
No apps here
Review alignment
High use, weak outcomes
No apps here
License use: low → high

Why

Four cards name the four decisions, and each app sits in the one that fits, with its numbers beside it.

Spec

  • 2 by 2 cards, neutral tints
  • Axes named in words
  • Empty quadrants say so
  • Hover gives the decision

Principle

Small multiples

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?

Quadrant, dot plot or table?

Decision: Pending

Do we lose the four decision names?

Decision: Pending

← Design crit overview