Trevor Ariza Cup: A Live Draft Night Tracker
Eight mates, one lounge room, a fantasy basketball draft. How do you make the night feel like an event, with the board on the TV and every pick made from a phone, when you have one day to build it?
Built on 9 October 2026. Draft night was 10 October. Every number on this page comes from the finished draft.
Role
Product designer, directing a team of coding agents
Timeline
Planned and built on 9 October 2026. Used live on 10 October.
Platform
Web app on Cloudflare Workers. A TV, eight phones, one laptop.
THE BRIEF
Our league drafts in person. For years that meant one person at a laptop on the ESPN site, reading picks out while everyone else squinted at their own phones and asked “is he gone?” The draft is the best night of the season and the software made it feel like admin.
I wanted the board up on the TV for the whole room, each person picking from their own phone, a clock that put a bit of pressure on without ever picking for you, and a look that made people laugh when it came up on the screen. The constraint was the date: I started planning on the Friday and the draft was the Saturday.
What had to be true on the night
- Live everywhere: a pick on one phone shows on the TV and on every other phone within a second.
- Nobody left out: someone without a phone, or with a dead battery, can still be drafted for from the laptop.
- Nothing blocks a pick: a player missing from the list gets a manual entry rather than a stalled room.
- Survives the real world: phones that sleep, Wi-Fi that drops, a wrong tap in round one.
DESIGN
Three surfaces, three distances
The same draft is seen from three metres away on a TV, from a phone held in one hand, and from a laptop by the person running the room. Each one is a different screen with a different job, and the design decisions came from the distance first.
The board, for the TV
Who is on the clock, how long they have, and who just got taken, readable from the couch. The grid shows the snake. The last pick gets a reveal with an announcer line in the NBA Jam voice, because that is the one moment the whole room looks up.
The phone, for each person
One-handed. Search and position filters, a queue you build while you wait, and a confirm sheet that makes it impossible to draft the wrong player by accident. When someone takes a player from your queue, you get told.
The Control Panel, for me
A Windows 95 control panel, played straight. Upload the player CSV, add the teams, set the order and the clock, then run the night: start, pause, undo, pick for anyone without a phone, add a player who is not on the list.
NBA Jam meets Windows 95
The brief said “fun, 90s”. I took that to two specific places. The board and phones borrow from the NBA Jam arcade cabinet: court black and purple, hot orange and teal, chunky outlined numerals, a pixel font used only for labels, a faint scanline overlay that stays still. The settings page is a Windows 95 Control Panel with bevelled buttons and a title bar, because a control panel is what it is. The joke only works if it is played straight.
Every pick gets an announcer line from a bank of about thirty, weighted so none repeats within five picks. Picks far from their ranking get a STEAL or a REACH. The first pick gets “WITH THE FIRST PICK!” and the last gets “MR. IRRELEVANT!”. It cost about an hour.
Motion, rationed
I decided what to animate before anything was built, using one rule: animate the moments the room is watching, keep everything that repeats every pick short, and never animate search or filtering. The pick reveal punches in with a strong ease-out and the announcer line slams over it. The clock changes colour under ten seconds, shakes at zero, and counts up in overtime. A taken player collapses out of the list in 200ms. Everything has a reduced-motion version, and nothing animates except transform and opacity so a five-year-old laptop driving a TV stays at 60fps.
BUILD
One day, six agents, one spec
I am a product designer, not a programmer. I build with Claude Code as the driver. For this project I wrote the spec first: the three views, the data model, the WebSocket messages, the motion table. Then I split the work by file ownership and ran six coding agents in parallel, two at a time, each owning a slice: the server and draft engine, the component kit, the board, the phone, the Control Panel, and sound. My job was the brief, the boundaries, the review, and the taste.
The stack is one Cloudflare Worker with a single Durable Object holding the whole draft in SQLite. It is the database and the live coordinator in one: every phone and the board hold a WebSocket to it, and every pick fans out from there. React and the motion library on the front. No accounts: an admin PIN and a join link.
The rehearsal
On the Friday night I ran a full mock draft on my own Wi-Fi with the TV, the laptop and my phone, picking for twelve fake teams. That is where the join link idea came from: the private links I had built were correct and nobody would ever find them in the chat again.
THE NIGHT
Eight teams, thirteen rounds, ninety seconds on the clock. The numbers below are read straight from the draft record.
8
teams in the room
104
picks made live
88 min
from first pick to last
39 s
median time per pick
7 of 8
joined on their own phone
16
picks the admin made for someone
16
picks that ran past the clock
0
players missing from the list
Left: six picks away, queue open. Right: a pick landing on the board, with the buzzer and the announcer line.
What the numbers say
The median pick took 39 seconds against a 90 second clock, so the clock was never really the constraint. Sixteen picks went past it, usually a deliberation out loud, and the overtime counter did its job as a nudge. Sixteen picks were made from the laptop for people who were in the room without a phone on them, which is exactly the case the “pick for” control existed for. Nobody needed the manual entry. The draft took 88 minutes end to end.
WHAT THE ROOM SAID
“That draft board was so good! It made draft day run smoothly, no A4 notes and people asking to borrow each other's devices. It even allowed for two team owners to join remotely. Absolute hit mate 👏”
WHAT BROKE
On the morning of the draft I swapped the player rankings for a set matched to our league's category scoring. The import replaced the player table, and because every queue pointed at a player ID, every queue that people had built the night before went with it. One person noticed and asked. The fix was small: the import now remembers each queue by player name and rebuilds it against the new IDs. The lesson was bigger: a data refresh is a user-facing action, and I had treated it as a developer one.
The other finding came from the join link. Release, which frees a team so the right person can claim it, originally left the wrong phone connected. It could quietly reclaim the seat. Now release rotates the token and kicks that phone. Both of these came out of using the thing, not reviewing it.
DECISIONS
- One link for everyone, not one per person: The first version gave every person a private link. That is safer, and it is also the kind of thing that dies in a group chat. It became one join link where you tap your team name. A team locks to the first phone that claims it, and I can release it from the Control Panel if someone taps the wrong one.
- A timer that never auto-picks: The clock is social pressure, not a rule. At zero the buzzer goes, the board shakes, and the number counts up into overtime. Nothing gets picked for you. Sixteen picks went over on the night and none of them caused an argument.
- Undo, and picking for people: Neither was in my original brief. Both got used. A draft tool without undo is broken at the centre, because someone will fat-finger a pick in round one.
- Animate one moment, not every moment: The pick reveal is the only animation with any flourish. Everything that repeats every pick is short and functional, and search never animates at all. If everything celebrates, nothing does.
- What got cut: Drag to reorder the queue, a lottery reveal for the draft order, per-person walk-up music, and most of the list and toast motion. Draft night was the next day. A plain draft that works beats a gorgeous one that breaks in round three.
OUTCOMES
The draft ran start to finish on the tool with eight people who had never seen it, seven of them on their own phones. All 104 picks went through it, and the final rosters came out of its export.
What I would take into any product: decide the distance before the screen, ration motion to the moment that matters, and rehearse with real devices before real people. And the thing I keep relearning: the features that saved the night, undo and pick-for, were the ones nobody asked for.
Live at draft.studioprisoner.com, reset between seasons.