Demo spec — Dashboard before/after ("Penny" budgeting app)

Single self-contained interactive HTML file: demo.html in this folder. On-screen artifact for Act Four of the dashboards script: BEFORE and AFTER home screens of a fictional budgeting app, two iPhone frames side by side (stack on mobile).

Layout

Soft neutral page background (calm mint-tinted warm grey — money app, but friendly; distinct from the navy sleep app and coral running app of the other demos). Two phone frames (~390×844, status bar 9:41). Labels: "BEFORE · 11 numbers, feedback about the worker" / "AFTER · 6 widgets, feedback about the work".

The app

"Penny" — personal budgeting. Inside-screen aesthetic: light warm background, deep-green primary (#0E7A5F-ish), amber accent, rounded cards, inline SVG icons only.

BEFORE screen (the overload pattern from real money apps — dense but believable, not cartoonish)

Top to bottom: - Red banner: " OVER BUDGET: –$63 " (shame state) - "This month" card: $2,140 in / $2,203 out / balance $1,274.87 / budget left $312 / daily avg $73.43 — five numbers, equal weight - Live ticker row: "LIVE · Starbucks –$6.40 · 2m ago" (updates every few seconds cycling through 3-4 fake transactions — real-time noise) - Category grid: Dining $412 / Transport $181 / Fun $208 / Bills $890 (four more numbers) - Confetti toast (animates in on load): " AMAZING! You logged expenses 3 days in a row!!" - Savings goal bar: "Vacation fund — 4%" (tiny progress, glaring) Total distinct numbers above fold: 11+. No hierarchy, three mental models (cashflow, budget-remaining, categories).

AFTER screen

Top to bottom: - Hero: "Safe to spend today" with one big number "$42" (calm, largest element) - Velocity chip directly under hero: "↓ $118 less than last week" (green, small trend sparkline) - Task card (replaces shame banner — same fact, task-framed, neutral): "Dining is $63 over. Move $50 from Fun budget?" with one-tap button "Move $50" (tapping it visibly resolves the card into "Done — Dining balanced." and updates the hero to $48 — the next-action loop made real) - Informational confirmation line (replaces confetti): "3 days logged — your spending picture is now accurate." - Weekly rollup card: "This week: $486 · smoothed trend" with a small 7-point line chart (NO live ticker) - Savings goal ring with a framing toggle demonstrating the Koo & Fishbach rule: a small segmented control "New user | Committed" — in "New user" state the ring labels "$120 saved so far"; in "Committed" state, the SAME ring flips to "$380 to go". (This toggle is the teaching device — annotate it.) Total: 6 widgets, one number each, clear hierarchy.

Annotation layer

"Show annotations" toggle (default ON). Numbered pins matching Act Four order: 1 the anchor (11 numbers → 1 hero), 2 the delta chip, 3 shame → next action, 4 confetti → competence info, 5 live ticker → weekly rollup, 6 the goal framing flip. Pin cards cite ONLY these stats, verbatim: - More than 38% of 607 feedback effects were negative (Kluger & DeNisi 1996 meta-analysis, 131 papers) - Velocity feedback d = .55 vs .28 without; feedback with the correct next step d = .43 (Kluger & DeNisi moderator table) - Praise: d = .09 — the near-zero row of the moderator table (Kluger & DeNisi 1996) - A visible page counter cut voluntary continuation from 48.5% to 27.3% (Etkin 2016, Experiment 6) - Less frequent feedback beat constant feedback in noisy environments (Lurie & Swaminathan 2009) - To-date framing motivates uncertain users; to-go motivates committed ones (Koo & Fishbach 2008) - Our audit (n=76 top-app screens, Aug 2026): 34% of consumer home screens lead with a single hero metric; only 7% show red/negative framing; 42% of SaaS dashboards show 9+ numbers above the fold

Footer

"Built for the Build With Kris video 'Your Dashboard Is a Feedback Intervention' — sources in the video description." Scoreboard: BEFORE — numbers above the fold: 11 · worker-focused widgets: 3 | AFTER — numbers above the fold: 6 · worker-focused widgets: 0.

Craft bar

Fully self-contained, system fonts, inline SVG (including the sparkline and ring — draw them as real SVG paths), responsive, premium. The "Move $50" interaction and the New user/Committed toggle MUST work. Page chrome adapts to prefers-color-scheme; screens stay light.