Project detail
Episode Guessing Game
Episode Guessing Game
Episode Guessing Game
What started as a personal trivia habit (guessing which season and episode a Breaking Bad episode belonged to, based on the title alone) turned into two fully built-out episode guessing games, designed to match each TV show's color palette, each with its own scoring system and progress tracker.
UI/UX Design & AI-Assisted Coding
The Spark
I was testing my own knowledge of Breaking Bad by naming an episode title and guessing its season and episode number. It was fun enough that I wanted to actually play it, not just do it in my head. But once I built the simplest version - a title, a guess, and a "correct" or "incorrect," I ran into a real design problem: a running tally tells you how well you're doing, but not what you actually know. Three correct and one incorrect halfway through season 2 doesn't tell you which episode tripped you up, or whether your season 4 knowledge is even weaker.
Building it with AI
I built the game logic, front end, and back end using AI-assisted development (ChatGPT and Google Gemini), so I wasn't splitting my attention between implementation and design. Every hour I didn't spend on implementation was an hour I spent on the part that actually mattered: what the grid should track, how the color-coding should work, whether the layout could flex between two completely different visual identities. AI handled the how. I stayed focused on the what and the why.
The Spark
I was testing my own knowledge of Breaking Bad by naming an episode title and guessing its season and episode number. It was fun enough that I wanted to actually play it, not just do it in my head. But once I built the simplest version - a title, a guess, and a "correct" or "incorrect," I ran into a real design problem: a running tally tells you how well you're doing, but not what you actually know. Three correct and one incorrect halfway through season 2 doesn't tell you which episode tripped you up, or whether your season 4 knowledge is even weaker.
Building it with AI
I built the game logic, front end, and back end using AI-assisted development (ChatGPT and Google Gemini), so I wasn't splitting my attention between implementation and design. Every hour I didn't spend on implementation was an hour I spent on the part that actually mattered: what the grid should track, how the color-coding should work, whether the layout could flex between two completely different visual identities. AI handled the how. I stayed focused on the what and the why.
Giving each show its own voice
Breaking Bad and Friends couldn't share a visual identity and still feel authentic to either one. Breaking Bad's version leans into the show's clinical, high-contrast palette (green accents on black, sharp edges). Friends' version borrows the show's own rainbow wordmark treatment and a warmer, boxier layout. Same underlying game engine, two completely different personalities on top of it, which meant the layout itself had to flex. Once I added the tracking grid, the single-column game card felt cramped, so I moved to a two-panel layout (game controls on the left, full episode grid on the right) so the grid had room to read like a map instead of a cramped afterthought.
Outcome
The final product runs both shows end-to-end with no repeats, a persistent per-episode tracking grid, high score and last-played history, and a layout that adapts to each show's identity while sharing one underlying structure. The build itself was AI-assisted end-to-end, which freed up the time to focus on the design decisions above rather than the implementation details.
What I'd take into the next project: A raw score is the easy metric to build first, but it's rarely the most useful one to show a user. The extra step, asking "what does this number actually fail to tell someone?", is usually where the real design decision is hiding.
Designing a memory, not just a score
The counter format was hiding the most useful information: which episodes you actually know.
My first version showed a live "Correct: 3 | Incorrect: 1" count, updating after every guess. It worked, but it was disposable. The moment you moved to the next title, you lost any sense of where your knowledge was thin. For a game built around a 5-season, 62-episode show, that felt like the wrong feedback loop. Trivia isn't just about a final score; it's about pattern recognition, the "oh, I always mix up mid-season-2" kind of insight.
The fix was to make the grid the memory, not the counter.
I designed a persistent grid: one cell per episode, organized by season (columns) and episode number (rows), the same mental shorthand fans already use ("S2E7"). Every cell starts gray. Guess correctly, and that episode turns green permanently. Guess wrong, and the actual episode lights up red, so instead of just being told you were wrong, you can see exactly where in the timeline you got confused. The grid persists across the whole session, so by the finale you're not looking at a score; you're looking at a map of your own knowledge: green pockets where you're strong, red clusters where you're not.
That single change reframed the whole product: it stopped being a quiz with a tally and became a knowledge tracker with a game wrapped around it.
Designing a memory, not just a score
The counter format was hiding the most useful information: which episodes you actually know.
My first version showed a live "Correct: 3 | Incorrect: 1" count, updating after every guess. It worked, but it was disposable. The moment you moved to the next title, you lost any sense of where your knowledge was thin. For a game built around a 5-season, 62-episode show, that felt like the wrong feedback loop. Trivia isn't just about a final score; it's about pattern recognition, the "oh, I always mix up mid-season-2" kind of insight.
The fix was to make the grid the memory, not the counter.
I designed a persistent grid: one cell per episode, organized by season (columns) and episode number (rows), the same mental shorthand fans already use ("S2E7"). Every cell starts gray. Guess correctly, and that episode turns green permanently. Guess wrong, and the actual episode lights up red, so instead of just being told you were wrong, you can see exactly where in the timeline you got confused. The grid persists across the whole session, so by the finale you're not looking at a score; you're looking at a map of your own knowledge: green pockets where you're strong, red clusters where you're not.
That single change reframed the whole product: it stopped being a quiz with a tally and became a knowledge tracker with a game wrapped around it.
Giving each show its own voice
Breaking Bad and Friends couldn't share a visual identity and still feel authentic to either one. Breaking Bad's version leans into the show's clinical, high-contrast palette (green accents on black, sharp edges). Friends' version borrows the show's own rainbow wordmark treatment and a warmer, boxier layout. Same underlying game engine, two completely different personalities on top of it, which meant the layout itself had to flex. Once I added the tracking grid, the single-column game card felt cramped, so I moved to a two-panel layout (game controls on the left, full episode grid on the right) so the grid had room to read like a map instead of a cramped afterthought.
Outcome
The final product runs both shows end-to-end with no repeats, a persistent per-episode tracking grid, high score and last-played history, and a layout that adapts to each show's identity while sharing one underlying structure. The build itself was AI-assisted end-to-end, which freed up the time to focus on the design decisions above rather than the implementation details.
What I'd take into the next project: A raw score is the easy metric to build first, but it's rarely the most useful one to show a user. The extra step, asking "what does this number actually fail to tell someone?", is usually where the real design decision is hiding.
View Other Projects
View Other Projects
Contact
Let's Get in Touch
Contact
Let's Get in Touch
Contact