Five players, one draft, thirty seconds.
Cozy Draft is a real-time draft prep tool for League of Legends Clash and amateur teams. I took it from idea to a live release on my own: the research, the interaction design and the full-stack build. I also play jungle on the team that tests it.
A tool I needed, tested by the people sitting next to me.
Clash drafts happen fast, and five people have to agree on picks, bans and who plays what. Spreadsheets and Discord threads fell apart under that pressure. So I built the tool, and used every practice session as a playtest.
Drafting is a team sport, and the tools were built for one person.
In League of Legends Clash, a team of five drafts champions against another team before each game. Good drafts are prepared ahead: who plays which lane, which champions each player is comfortable on, and what to do if the other team takes your pick.
Amateur teams usually prep in shared spreadsheets and chat threads. That works until draft day, when everyone is in the lobby at once, the timer is running, and the plan lives in five different places.
My own team was the first test kitchen.
I play jungle on a five-player competitive roster, which gave me something most side projects don't have: the same five users, every week, under real pressure.
- Session-by-session playtesting. After each practice I turned what broke into UI and architecture fixes.
- Tied to the tournament cycle. Fixes had to land before the next Clash weekend, which kept the scope honest.
- Designer and developer in one head. When a fix needed a data-model change, I could weigh the UX gain against the build cost on the spot.
When the draft timer is running, every extra tap is a lost pick.The constraint behind every screen
Three real-time patterns that hold the draft together.
I applied the dense information design I'd used on enterprise fintech and healthcare tools to a very different table. The core is three multiplayer patterns:
Everyone in the lobby sees the same draft plan update as it changes. No refreshing, no "which version are you looking at?"
Each player keeps a personal champion pool with comfort ratings across all five roles. Teams inherit those pools, so prep starts from what people can actually play.
Players claim the role they're playing. Ownership is visible to the whole team, so nobody picks for a lane that's already taken.
2 lanes still open.
The live app also covers the quieter moments: an empty state that tells new players exactly what to do ("Join one with a lobby code below, or start your own crew"), a lobby code to join a team, a captain role for whoever starts a crew, and a light and dark theme for late-night scrims.
Then I opened the doors to five more teams.
My own roster could only tell me so much. The closed beta widened validation beyond one team's habits. I turned beta feedback into prioritized fixes and roadmap decisions, the same way I'd run a backlog at work, just with a lot more trash talk.
What building it taught the designer.
Every interaction has a price. Building real-time sync myself made me much more careful about which interactions are worth their complexity.
Dense is fine when the next action is obvious. The same rule that helped analysts at Cigna helps five players with a draft clock running.