A ranked list that moves without explanation is a black box. The Studio never asks a partner to trust a number —
it shows the behavioral evidence behind every placement, makes volatility legible so teams can tell healthy learning
from a real problem, and walls off a simulation sandbox where nothing can reach the live member experience.
◆ SIMULATED values are always shape- and label-marked, never live.
WIREFRAME — Screen 0 / Overview · The Studio
Shared workspace home · sets the mental model and routes to the
three jobs · M3 navigation rail (desktop) / bottom nav (mobile)
Understand why titles surface, see whether personalization is behaving as expected, and safely
test changes before they ship — in one shared workspace.
One sentence of positioning, then straight into the three jobs. No marketing.
System pulse — 4 metric tiles
At-a-glance read on the personalization system before
a partner dives in. Frames the product's value: clarity, stability, safe iteration.
Titles tracked
1,284
across 6 audience segments
Stability index
Healthy
94% of rows within expected volatility
Needs a look
3
rows flagged as a possible real shift
Open simulations
◆ 2
sandbox only — none touch production
Three jobs — workspace entry cards (M3 elevated cards)
? Explain
JTBD 1 — "Why did this title surface for this
audience?"
Trace any placement back to the behavioral signals behind it.
~ Health
JTBD 2 — "Is the system behaving as
expected?"
Tell healthy learning from a real problem before you react.
◆ Simulate
JTBD 3 — "What happens if I change this?"
Test ranking changes in a sandbox. Stage an experiment — never ship blind.
Live mini-demo strip — "see it work" teaser
One title's explanation reveals on click — proves the
"shows its work" promise on the home screen before the partner commits to a workspace.
[ "Midnight Atlas" · #3 for Thriller fans · US →
click "Why?" → signal bars animate in ]
WIREFRAME — Screen 1 / Explain · Why this title surfaced
The legibility core of the product · pick a segment + title, get the
signal-by-signal evidence behind a placement · primary detail view
Ranked #3 in row "Because you watched documentaries"
● EXPLAINEDConfidence: High12.4k plays in segment
State uses shape + label, never colour alone (accessibility).
Signal breakdown — what drove this placement
Each signal is a contribution bar: right of centre =
pushed the title up, left = held it back. Every bar expands to the raw behavioral evidence.
Completion rate
finished, in
segment
+ strong
[expanded] 73% completion across 12,400 plays · row average 58% ·
this is the single biggest reason it ranks where it does.
Hover engagement
browse interest
+ moderate
Skip rate (first 30s)
early
drop-off
− holds it back
Negative contribution is shown to the LEFT and outlined, never as a
green/red colour swap.
Recency / freshness
+ moderate
Artwork CTR◐ PROVISIONAL
thin evidence
Honest uncertainty: artwork variant has < 500 impressions in this
segment, so it's marked provisional rather than scored as fact.
Plain-language explanation
The one paragraph a partner can paste into a Slack
thread to align a room in 10 seconds.
"Midnight Atlas surfaces at #3 for Thriller fans mainly because completion rate in this segment is
well above the row average. It's held back slightly by a higher-than-typical skip rate in the first
30 seconds. Artwork CTR is still provisional — too few impressions to count yet."
Actions
Primary CTA hands off to Screen 3 with this title pre-loaded.
Sticky right column on scroll
Explanation + actions stay visible while the partner scans the signal bars.
WIREFRAME — Screen 2 / Health · Is personalization behaving as expected
Shifts focus from a single placement to system behavior over time ·
the honesty layer — tells noise from a real shift, and admits when it isn't sure
Scope selector
Watching:
Window:
Rank-over-time chart + volatility band
A title's rank plotted over the window. The shaded band
is the expected-volatility envelope; inside the band = normal learning, outside = worth a look.
[line chart · rank inverted (lower = better) · grey band =
expected volatility · markers on "what changed" events]
Verdict — honest classifier
● HEALTHY LEARNING
Movement is inside the expected band. The system is exploring and
self-correcting — no action needed.
Confidence: High
◐ STABILIZING
Recent dip is narrowing each day. Likely settling — check again in
48h before acting.
Confidence: Medium
⚐ WORTH A HUMAN LOOK
Drop is outside the band and not recovering. This reads like a real
shift, not noise — but the cause is ambiguous, so the Studio won't guess.
Confidence: Low — routed for review
Three example states shown side by side; live screen shows the one that applies.
Confidence is a first-class label, never hidden.
What changed — annotation timeline
Correlates rank movement with known events so volatility
has a candidate cause instead of a mystery.
When
Event
4d ago
Artwork variant B rolled out
9d ago
New title added to row
16d ago
Seasonal demand spike (genre)
Actions
WIREFRAME — Screen 3 / Simulate · Test a ranking change safely [SIGNATURE]
The signature interaction · drag signal weights, watch the ranking
reorder live, see predicted impact · a hard PRODUCTION ↔ SIMULATION wall — you cannot ship from here
◆ SIMULATION SANDBOX Nothing on this screen touches the live member experience.
Persistent, always-visible boundary. The only forward action is "Stage as experiment"
(below) — there is no "Ship" button by design.
Signal weights — M3 sliders
Drag a weight; the simulation column on the right
recomputes and reorders. Weights drive a real weighted score, not a canned animation.
Weights normalize to 100. A "weights total = 100" check
gates the run, same pattern as a rubric.
Predicted impact — computed live
Engagement Δ
◆ +2.1%
projected, sandbox
Diversity index
◆ 0.71
−0.04 vs baseline
Member-experience risk
◆ Low–Med
rises if diversity collapses
Every number carries the ◆ SIMULATED mark — none of these are live metrics.
The only forward action
"Stage" opens a confirm sheet: this routes the proposal to experimentation
review with the weights + predicted impact attached. It never edits production ranking directly.
● PRODUCTION — frozen baseline
What members actually see right now. Read-only.
#
Title
Score
1
The Quiet Quarter
0.81
2
Saltwater Kings
0.77
3
Midnight Atlas
0.74
4
Origin Unknown
0.69
5
Paper Lanterns
0.66
6
Last Train North
0.61
◆ SIMULATION — live, reorders as you drag
Recomputed from your weights. Rank-change badges
show movement vs production. Rows animate (FLIP) into new positions.
#
Title
Score
Δ
1
Midnight Atlas
◆ 0.83
▲2
2
The Quiet Quarter
◆ 0.80
▼1
3
Saltwater Kings
◆ 0.76
▼1
4
Origin Unknown
◆ 0.70
—
5
Last Train North
◆ 0.64
▲1
6
Paper Lanterns
◆ 0.63
▼1
Two columns are always side by side so "what's live" and "what's hypothetical" can
never be confused — the wall is spatial, not just a label.
WIREFRAME — Screen 4 / Impact · What this change would mean
Debrief after a simulation is staged · summarizes the proposal
honestly and closes the loop back to the team's decision
Proposal summary card
Staged: "Lift completion weight on the documentaries row"
What changed
From (production)
To (proposed)
Completion weight
30
◆ 40
Skip penalty
15
◆ 20
#1 title for segment
The Quiet Quarter
◆ Midnight Atlas
Projected engagement
baseline
◆ +2.1% (predicted)
Diversity index
0.75
◆ 0.71 (watch this)
Honest framing: the diversity dip is flagged, not buried. This is a proposal for review,
not a result.
These are the studio's reasons-to-exist, restated as measurable outcomes.
Next
SHARED — State legend & routing model
State legend — shape first, colour second
Glyph
State
Meaning
Where it appears
●
EXPLAINED
Evidence-matched, high confidence
Explain, Health
◐
PROVISIONAL
Thin evidence / low volume — shown, not hidden
Explain, Health
○
AWAITING
Not yet computed for this segment
Explain
◆
SIMULATED
Sandbox value — never live
Simulate, Impact
⚐
WORTH A HUMAN LOOK
Ambiguous — routed for review rather than guessed
Health, Impact
Same accessibility discipline as Criterion: state never depends on colour alone, and
every accent-as-text colour must clear WCAG AA in both light and dark themes.
Wireframe notes — for Figma reference
Target visual system is Material Design 3: navigation rail (desktop) / bottom nav bar
(mobile), M3 surface roles + tonal elevation, M3 sliders, segmented buttons, filter chips, and the M3
type + shape scales. This wireframe is structure only — no M3 styling applied.
The signal-breakdown row (Screen 1) is the primary interaction unit — each signal is a card with a
contribution bar and an inline "See the evidence" expander, never a bare table row.
Contribution direction uses position + outline (right/filled = positive, left/outlined = negative),
never a green/red colour swap — accessible and theme-safe.
Screen 3 keeps PRODUCTION and SIMULATION columns side by side at all times — the boundary is spatial,
reinforced by the persistent sandbox banner and the ◆ glyph on every simulated value.
There is deliberately no "Ship" or "Apply to production" control anywhere. The only
forward path out of a simulation is "Stage as A/B experiment", which routes to human review.
"Reset to production baseline" is always available in Simulate — in-session undo, same role as
Criterion's "Restore original".
Confidence is a first-class label (High / Medium / Low) on every verdict and provisional state — the
product is more trusted because it admits what it isn't sure of.
Plain-language explanation (Screen 1, right column) is copy-to-clipboard — it's the artifact partners
paste into a thread to align a room quickly; it is the JTBD "explain it to stakeholders" made literal.
Right columns are sticky on scroll across Explain and Health so the explanation/verdict stays in view
while scanning evidence.
Theme + environment chips live in the top app bar; the live build syncs theme with the parent
case-study page via postMessage (light / dark / auto).
The mini-demo on Overview reuses the real Explain signal-bar component at small scale — one component,
two placements — so the home teaser can't drift from the real screen.