Dead by Daylight — Survivor Gauntlet
A live challenge tracker built for Twitch streamer Zerbs — designed, built, and shipped in 2 days
Opportunity
A Twitch streamer running a 52-survivor Dead by Daylight challenge was managing progress manually with an OBS image overlay. It worked, but it was difficult for the streamer and audience, added admin mid-stream, and had no way to handle failure states.
The Team
Solo — design and build by Mayur Soneji
Wins
- Shipped in 2 days from idea to live on stream
- 24,236 views on the debut VOD
- Chat erupted on reveal — unprompted design compliments within seconds
- Zerbs retired the OBS overlay permanently
Two Tools Doing One Job
Zerbs had a challenge: escape the fog in Dead by Daylight with all 52 survivors, one at a time, selected randomly. It was a great content format — high stakes, lots of variety, the kind of thing a community could follow across multiple streams.
The tooling behind it was held together with string.
The Outcome
A fully functional, production-grade challenge tracker — live on stream, branded to the game, with real-time progress tracking, checkpoint mechanics, and a completion ceremony. Built entirely by one designer with no dedicated developer.
Scroll to find out how I did it
The Problem
He was running two completely separate systems to manage the challenge. First, a wheel spinner to randomise which survivor to play next:
The randomiser wheel — a generic Streamlabs spin wheel with all 52 survivor names. Functional, but with no connection to the tracker and no way to exclude already-completed survivors automatically.
Then a separate OBS overlay — a static image of the survivor roster that he'd draw a cross over when one was completed:
The OBS completion tracker. A green X drawn manually over a completed survivor portrait. Attempts tracked as a plain text overlay in the bottom left. A failed trial meant manually un-marking survivors by hand.
Two tools, no connection between them, all managed live while also playing a game in front of an audience. The problems compounded:
No Memory
The wheel had no memory. Completed survivors stayed on the wheel — Zerbs had to mentally filter them out or risk spinning a name he'd already done.
No Failure State
The tracker had no failure state. A failed trial resets progress to the last checkpoint. Un-marking crosses in OBS mid-stream is not a smooth experience.
All Manual Admin
Every spin, every completion, every reset — handled by hand, live, with chat watching.
The content format was strong. The infrastructure around it wasn't.
The Design Brief
One clear goal: replace both tools with one purpose-built product — and make the tracker part of the entertainment, not just the admin. That meant it needed to do four things well.
Combine & Connect
Merge the randomiser and tracker into one experience. Automatic exclusion of completed survivors. No mental filtering required.
Legible at a Glance
A grid of all 52 survivors — immediately readable, updating in real time. Viewers should understand the challenge without explanation.
Handle Failure
The checkpoint/rollback mechanic is core to the challenge. Failed trial = automatic rollback to last checkpoint. One click, not manual editing.
Belong in the Game's World
DBD's visual identity — dark, atmospheric, slightly horror-tinged. The design needed to feel native to that world, not generic.
Design Decisions
The Aesthetic
DBD's visual language is fog, darkness, and dread — with survivor portraits as the primary visual asset. I leaned into this: deep void backgrounds, ember particles, a blood moon atmosphere layer, and red/orange accents that echo the game's colour palette. The survivor portraits do the heavy lifting. Everything else supports them.
The goal wasn't to replicate DBD's UI — it was to make something that felt native to that world while being purpose-built for a stream overlay context.
The Randomiser
The selection mechanic needed to feel like an event, not a dropdown. I built a roulette animation that cycles through survivor portraits at speed before slowing to a lock — with a gold border, confetti, and a brief celebration moment when the selection lands. On stream, this becomes a shared moment between Zerbs and chat. Everyone watches to see who gets picked.
The Checkpoint System
When Zerbs fails a trial, the tracker automatically rolls back to the last checkpoint (set at every 10 escapes). Survivors completed since that checkpoint return to available status. This happens in one click — no manual editing, no OBS fiddling. The failure state is part of the design, not an edge case.
The Ascension Ceremony
When all 52 survivors are completed, a full-screen ceremony triggers — each completed survivor "ascends" through the fog in sequence, with golden particles, ambient light beams, and a final "Challenge Complete" moment. It was designed to be a stream event in itself: something chat would react to, screenshot, and clip.
How It Was Built
This project was built using AI-assisted development with Kilo Code — but "AI-assisted" is worth unpacking.
Architecture
Writing agents.md and context.md to give the AI a clear model of what we were building and why. Directing every structural decision.
Design Ownership
Every visual choice, interaction pattern, and UX detail was mine. The AI wrote code to spec — the spec came from me.
Technical Problem-Solving
Browsers can't write to the filesystem, so persistent state required a server-side API route. Worked through the architecture, then debugged the implementation directly.
I wasn't just prompting and accepting output. I was in the code, not just reviewing screenshots. When things broke — saving state, tracking progress, the API layer — I debugged with AI as a collaborator, not a replacement.
The result: A production-grade Next.js/TypeScript application — component architecture, server-side persistence, animation library, responsive layout — shipped in 2 days. That's only possible when a designer can direct a build at this level of specificity.
The Launch
The tool went live on Zerbs' stream without announcement.
Zerbs' reaction the moment the tracker appeared on stream. Chat visible on the right. 24,236 views on this VOD.
The first moment viewers saw it, chat reacted immediately:
"OH WOW"
"omg wowww"
"FIREEEEE"
"THATS SICK"
"SO ORGANIZED"
"W to whoever made that"
"oh wow graphic design is her passion"
24,236 people watched that VOD. The OBS overlay never came back.
What This Project Is Really About
The other case studies on this portfolio show design work done within a team — with developers, PMs, and stakeholders. This one is different.
Survivor Gauntlet is what happens when a designer can also build. The gap between "I have an idea" and "it's live in front of 24,000 people" was two days. No handoff, no sprint planning, no waiting for dev capacity. Just a problem, a user, and the ability to close the distance between them.
That's what AI-assisted development makes possible — and it changes what a designer can do.
What's Next
Survivor Gauntlet started as a single-user tool running off a local file. The next version is a public web product — rebuilt with a proper database backend so any gamer can run their own challenge.
That's a meaningfully different design problem. The original tool had one known user, one challenge format, and one context (Zerbs' stream). A public release means:
Multi-Tenant
Multiple concurrent streamers and gamers running different challenges simultaneously, each with their own isolated progress state.
Cross-Device Persistence
A streamer should be able to open their tracker on any machine and pick up exactly where they left off.
Public Challenge URLs
Viewers could follow along on their own device, not just watch the stream overlay.
Onboarding for Unknown Users
Zerbs knew the tool because I built it with him in mind. New users won't have that context.
The core product is the same. The design scope is considerably larger.
Escaping the Fog
A Twitch streamer needed a better way to track a Dead by Daylight challenge. Two days later, 24,000 people watched the result live. No handoff, no sprint planning, no waiting for dev capacity — just a problem, a user, and a designer who could build the answer.
Fan-made project. Not associated with Dead by Daylight or BHVR.