Gateways Creative: Designing a Physical-Digital Interactive Experience
Defined the interaction framework for a physical–digital immersive gaming experience, aligning spatial behavior with real-time UI feedback. Simplified complex gameplay systems to enhance usability and player coordination.
Client:
Gateways Creative
Category:
Interaction Design, Game UX, Spatial Interfaces
My Role:
UX & UI Design
UX Strategy for High-Friction Asymmetric Gameplay
Gateways Creative is a live-action, asymmetric ghost hunting experience set inside a 1930s haunted study. A single player takes control of the mansion's ghosts via a trackball, radio dial, and distraction book, while a team of hunters works together around a spinning séance table using light emitters and vacuums to reveal, stun, and capture ghosts before their hearts are destroyed.
Designing for this setup meant addressing the stark friction between a digital ghost controller console and a physical séance table with shared artifacts. I focused on making the ghost controller dashboard cohesive, ensuring that the trackball, radio commands, and distraction controls felt intuitive under time pressure while the hunters' projected wall display kept gameplay readable in a dark room.
THE Context
Project Overview
Gateways Creative needed a ghost controller interface for their asymmetric multiplayer haunted mansion game. The solo player controls ghosts from a dedicated control room while a team of hunters gathers around a séance table to hunt them using light emitters and vacuums.
THE CHALLENGE
Design Challenges
Players needed to feel powerful as the ghost controller, but the information overload of managing ghost positioning, heart defenses, and army commands simultaneously created decision paralysis. Three core challenges emerged:
01 - Information Architecture
How to present real-time ghost positions, heart status, and hunter activity on a single controller screen without overwhelming the solo player under deep urgency.
02 - Asymmetric Balance
Creating two opposing gameplay layouts — a physical séance table with light emitters and vacuums vs. a digital ghost control console — that feel structurally balanced and fair.
03 - Atmospheric Immersion
Maintaining a pure gothic horror aesthetic with weathered interfaces while ensuring absolute UI clarity and modern readability.
game mechanics
Gameplay Core Interaction Loops
With the interaction loops mapped, I traced each player type through their complete journey — hunters coordinating around the séance table and the ghost operator managing their console — to identify where the interface needed to support critical decisions.
Hunter Loop
Flash-stun ghosts by charging and releasing light emitter buttons
Vacuum stunned ghosts using the two suction artifacts on the séance table
Defend hearts projected on the walls from ghost attacks until time runs out
Ghost Loop
Trigger fake whispers and portrait rattles using the distraction book
Destroy hearts on the walls by directing ghosts to covertly attack them
Escape vacuum range when detected by repositioning the Boss Ghost
player experience
Player Experience by Role
Three interfaces mapped across both roles, ensemble hunters and the solo Ghost Writer:
01
Ensemble Player User Flow
Maps the ensemble hunters' ghost encounter from first detection to complete capture. Traces how hunters coordinate around the spinning séance table — aiming crystal balls, telescopes, and scepters at wall sections to reveal ghosts, then stunning and vacuuming them.
02
Gothic Window Display Flow
Details the projected wall display visible to ensemble players through the physical gothic window prop. Shows hearts, active power-ups from bookshelf enchantments, and round timer — a passive display, not a directly controlled interface.
03
Controller Room Player User Flow
Deconstructs the solo player's ghost control console: positioning the Boss Ghost via trackball, commanding the ghost army via radio dial, and triggering distractions via the book's push buttons to mislead the ensemble hunters.
Ensemble Player User Flow
A ghost encounter from first detection to capture, with decision points and retry loops mapped at each stage.
Gothic Window Display Flow
A cinematic power system visualized through a gothic window display that reflects the player's current state.
Controller Room Player User Flow
Solo player steps from the controller room perspective.
1. INSTRUCTION
Instructions
The operator watches a brief instructional video explaining how the control system works, what buttons do, and how to manage the haunt experience.
2. WAIT
Wait for Players
After instructions, the system enters standby mode. The operator waits until players enter the room and the game session begins automatically.
3. HAUNT
Haunt & Escalates
Small pop-ups with instructions appear on screen for 3 seconds then disappear. An info icon optionally appears alongside each instruction.
4. FINAL
Heart Captured
A ghost attacks a heart and the heart counter increases. A 'Heart Captured!' message appears at the center of the screen.
visual design system
Core Color Palette
A structured palette combining 1930s gothic horror tones with highly visible gameplay indicator colors for hearts, ghost health, and emitter states.
Aubergine Plum
#4A0D7A
Base Canvas & Dark UI Frames
Crystal Lilac
#C9A8E8
Secondary Copy & Description Labels
Haunted Amber
#E8A020
Accents, Borders & Active States
Spectre Green
#2BD67B
Stamina Elements & Success States
Ruby Crimson
#C91B3A
Health Meters & Critical Damage
Phantom Dark
#0A0E1A
Primary Canvas & Deep UI Backgrounds
typography
ROLE
SPECIMEN
FONT FAMILY
Chapter / Level Header
THE HAUNTED MANSION
New Rocker / 32px
HUD Panel Title
PLAYER INVENTORY
Libre Baskerville Bold / 20px
Lore & Descriptions
A polished metallic key that emits a faint, green ghostly glow.
Libre Baskerville Regular / 14px
character design
Character Sprites
Gothic minion sprite sheets and boss character poses integrated into the game UI viewport frame. Characters include the Pirate Captain, Egyptian Pharaoh, and Cold Climber, each with idle, combat, and special attack poses.
Pirate Captain
Rusty anchors, visual ectoplasm trails, and special sweep attack.
State: idle and aggressive sweep
Egyptian Pharaoh
Golden sarcophagus armor, localized blinding sandstorms.
State: combat defensive stance
Cold Climber
Frozen thermal patterns, freezing room traps, slowing hunter velocity speeds by 40%.
State: frost spell manifestation
physical space
Designing within a real space
Designing for this experience required considering physical layout, visibility, and interaction flow alongside digital UI.
REFLECTION
Key Learnings
Designing for asymmetric multiplayer in physical spaces requires balancing information density with atmospheric immersion. The biggest insight was that the ghost controller and hunter interfaces needed to feel like they belonged to the same world while serving completely opposite gameplay goals. Physical space constraints directly shaped every digital interface decision.
Related Projects
