Led end-to-end UX and visual design for Iron Diner’s live action game system
Iron Diner is a live‑action multiplayer game set inside a physical 1950s diner, where players complete real actions under time pressure and watch their results play out across a network of connected digital screens.
The game is built around a simple but technically complex idea: a physical cup becomes a data point. Players carry RFID-chipped cups through the diner, collecting ingredients at physical stations. Every cup tap triggers a live update across three screens at once — the station screen, the solo player screen, and the ensemble display showing each team's progress. Two competing teams. Three rounds of five minutes. One shared system with no room for error.
Led a team of three UX designers and owned system‑level experience design, including the design system and the ensemble screens — two 60" televisions that serve as the visual command center for each team.
Scope:
3 screen types designed simultaneously
2 brand identities unified within one design system
Metrics to follow post-launch
Three different screen sizes. Two teams. One physical space. Zero margin for confusion.
The challenge wasn't designing three separate screens — it was designing one coherent system that happened to live across three screens. Every time a player collected an ingredient, three different displays needed to respond instantly and correctly. A station screen confirming the action. A solo player screen, tracking their team's progress. Two 60" ensemble displays — one per team — each serving as the visual command center for everything happening in the room. One wrong signal anywhere and the whole experience falls apart.
This wasn't a typical digital design problem. Most interfaces exist in one place and respond to one person at a time. Iron Diner required a shared information model — a single source of truth that could translate across screen sizes, player roles, and a physical environment where the real action was happening away from the screens entirely.
To find the right references, I looked beyond traditional UI. Digital games like Overcooked showed how teams process shared information under time pressure. Escape rooms showed how physical spaces can drive digital feedback — and how players instinctively read their environment for cues when stakes are high.
Two competing teams also meant two brand identities had to coexist on the same display — each team needed to feel distinct without the screen becoming visually chaotic. And with no prior launch data to reference, every design decision had to be grounded in research, iteration, and a deep understanding of how players would move through the space.
The hardest part wasn't any single interface. It was the invisible connective tissue holding them together.
Overcooked
A fully digital multiplayer game with the same core makeup as Iron Diner: teams, timed rounds, and recipes to complete. Used as a reference for how ensemble gameplay communicates shared goals and time pressure on screen.
Coffee Rush
A physical, competitive board game where each player has their own board. Informed how players track their own progress independently while still competing in a shared space.
Merge Cooking
A mobile game where players complete recipes for points, with bonus scoring for high-priority orders. Informed how to visually signal ingredient requirements, progress indicators, and point incentives to players at a glance.
The wireframes didn't just show the screens — they revealed the system.
Before anything could be designed, the system had to be understood. As a startup founder, Anthony focused on bringing his vision to life, so we kept our process lean and stayed aligned through email exchanges and sprint check-ins. Our team took what he shared and translated his vision into design decisions in FigJam.
What made this project different from anything I've designed before was that it wasn't just a digital experience. A physical cup becomes a data point — a player places it on a station, and three screens must respond simultaneously. So before we could wireframe anything, we had to answer one question:
When do all three screens need to say the same thing, and when does each one need to tell its own story?
The ensemble player needs the full recipe picture. The solo player needs to track teammates and guide them to the right stations. The station player needs one thing: did my ingredient count?
These early wireframes were how we started testing those answers — exploring layout, hierarchy, and what information belonged where before committing to visual design. I shared them with gamers I knew to gut-check whether the screens made instinctive sense under pressure, and consulted with developers to understand how layouts would actually render on 60" displays.
Ensemble screens: Early layout exploration showing side-by-side TVs as the clearest format for two competing teams, confirmed through gamer feedback.
Solo player screen: Early layout exploration showing recipe priority queue, cup tracking, and completed ingredients. Design by Zoe Chang.
Station Screens: Icon explorations for the station screen covering ingredient categories, error states, and cup detection. Designs by Simi Kohad.
From structure to screens — designing for pressure
The ensemble screens were the visual command center — two 60" TVs showing recipes, scores, timers, and team progress, all readable from across the room. two 60" TVs showing recipes, scores, timers, and team progress, all readable from across the room. Anthony wanted to see how the UI would hold up against a live environment, so I mocked up the screens with a background image to test visual clarity in context. The solo player and station screens supported different moments in the game.
Players aren't sitting at a desk — they're moving through a physical space, carrying cups, working under a five-minute timer. Everything on screen had to register at a glance from across the room.
The high-priority recipe needed to stand out immediately. Added ingredients needed a clear confirmation. Error states — missed ingredients, unfulfilled orders — had to be obvious without stopping the game. Static screens can't communicate any of that, so animation handled the state changes: an ingredient locking in, a recipe completing and cycling out, a streak building.
Two competing teams also meant two brand identities sharing the same display — each team needed to feel distinct without the screen becoming chaotic.
Building brands that share a stage, a system, and a story
Anthony had a full backstory for each diner — Rossi's Family Diner and Milk & Melody weren't just team names, they were characters. I needed to translate that into two visual identities that felt distinct on their own screens but still read as one cohesive game when the two 60" displays sat side by side.
I started with what Anthony gave us — the personality of each diner, the 1950s retro feel he wanted — and explored color and typography directions that could carry that personality while staying accessible. Every color choice had to meet WCAG AA contrast requirements, especially on large-format screens where lighting conditions aren't always predictable.
From there, I built out the component library — UI indicators, ingredients (icon designs by Simi Kohad), header modules, and patterns — giving all three designers a shared set of pieces to work from across screen types.
Future testing through soft opening
Stakeholder feedback
The two brand identities read as distinct without clashing
Recipe hierarchy made sense at a glance
Ensemble displays held the full game state without feeling overwhelming.
Development handoff
Figma files and components were handed off to developers
The game is heading to a soft opening in Philadelphia in April
Tracking post launch
How will players actually move through the space?
Will the information hierarchy hold up under real-time pressure?
How will the feedback animations land when the room is loud, and the timer is running?
These answers will shape the future of Iron Diner.