Designing Systems for Immersion
UX Design | Game Design | Interface Design | Worldbuilding | FoundryVTT Development
Overview
This case study covers a series of interactive modules I've been building for FoundryVTT—an open-source virtual tabletop platform used to run and customize tabletop RPGs like Cyberpunk RED.
I've been running a long-form Cyberpunk campaign, and over time I found myself designing tools to solve real friction points for both GMs and players. What started as small macros became full-fledged, immersive systems built to improve storytelling, clarity, and overall player experience.
Each module has its own use case, but together they form a toolkit for enhancing immersion, supporting complex character dynamics, and making the ruleset more enjoyable to engage with.
The Problem
FoundryVTT is powerful, but out-of-the-box it's not always intuitive—especially when you're juggling narrative, rules, math, and interface clarity.
I wanted to design systems that solved these common problems:
- Tracking complex relationships between NPCs and players
- Spending points to level up without doing manual math
- Making fashion and style feel meaningful in-world
- Simplifying confusing subsystems like netrunning
- Adding flavor and character through interfaces that reflect the tone of the setting
- Maintaining narrative continuity between game sessions
My Role
This was a solo design and development effort—concepting, designing, coding, and testing everything myself. I worked in Foundry's macro system (a mix of JavaScript and HTML), with supporting tools like TailwindCSS, Font Awesome, AI-assisted Vite builds, and good old-fashioned trial and error.
I also playtested everything with my home group, so user feedback came directly through gameplay.
Module Breakdown
🧠 Relationship Tracker
A dynamic way to manage NPC interactions and player alliances.
This tool allows players and GMs to track their relationship scores with key NPCs, scaling from -100 (deep enemy) to +100 (trusted ally). Each character can be tagged (e.g., "Rival," "Family," "Lover"), color-coded by category, and annotated with personal notes.
Problem Solved: Players were constantly forgetting names or why an NPC mattered. This made relationship arcs visual, trackable, and narratively clear.
🔧 IP Spend Interface
A visual system for skill progression and point allocation.
In Cyberpunk RED, leveling up skills requires improvement points (IP), and the cost structure gets tricky. I designed a floating interface that gamifies this process with skill icons, current levels, and costs in a sleek, cyberpunk-styled window.
Problem Solved: Players no longer had to fumble with charts or ask "wait, how much is this?" every session.
👗 Style Checker App
An immersive wardrobe interface that gives fashion real in-game impact.
This was my way of making style and clothing more than just a description. Players can open an app that analyzes their fashion breakdown and see how it plays in different districts, with style power factoring in clothing cost and hidden gear detection.
Problem Solved: Gave players a reason to think about what their characters wear—and how it affects how the world sees them.
📬 Messaging Interface App
A cyberpunk-styled email system for in-character communication between sessions.
This app allows GMs to send immersive, in-character messages to players outside of gameplay, helping the world feel alive even when the session isn't running. It uses real in-game dates and times and integrates with the Simple Calendar module.
Problem Solved: Helps maintain narrative continuity between sessions, keeping players connected to the story with world updates, missions, and character insights.
💻 Netrunning System
A gamified JRPG-style hacking experience (Work in Progress).
Netrunning is often the most confusing and isolating part of Cyberpunk gameplay. I'm building a turn-based system where players ascend a virtual tower of floors, with visual enemy chases, floor branches, and combat styled like a classic JRPG.
Problem Solved: Make netrunning fun, not a rulebook check. Let players experience it as its own mini-game with visual stakes.
Features & Technical Details
All of these modules include:
- Functional UI prototypes with embedded logic and JavaScript event handling
- Visual styling meticulously crafted to match the cyberpunk setting's aesthetic
- Backend admin tools and debugging commands for troubleshooting and updates
- Integrated chat logs and confirmation dialogs that maintain gameplay clarity
- Tooltips, animations, and iconography for improved UX and learnability
- Data persistence using Foundry's built-in database structure
Design Process
Problem Identification
Each module began with observing actual pain points during gameplay. I took notes on where players got confused, what mechanics they avoided due to complexity, and which aspects of the game they wished had more depth.
UI/UX Planning
For each module, I sketched interfaces that would simplify complex actions while maintaining the cyberpunk aesthetic. This involved mapping user flows, deciding on visual metaphors that fit the world, and considering the technical constraints of FoundryVTT's framework.
Development & Testing
I built each module using JavaScript, HTML, and CSS within Foundry's API framework. This involved iterative testing with my player group, collecting feedback after each session, and making adjustments for usability and functionality.
Iteration & Refinement
Based on play testing, I refined each interface—adjusting colors for readability, adding tooltips for clarity, and improving animations for feedback. The goal was creating systems that felt like natural extensions of the game rather than add-ons.
Technical Challenges
Building these modules presented several technical challenges that required creative solutions:
Data Persistence & Synchronization
One of the biggest challenges was ensuring data persisted between sessions and synchronized correctly across all players. I had to build custom data structures that interfaced with Foundry's database while maintaining performance.
UI Consistency
Creating interfaces that felt cohesive with both Foundry's default UI and the Cyberpunk setting required developing a consistent design system of colors, typography, and interactive elements that worked across all modules.
Performance Optimization
Some features like the Style Checker's social media feed required careful optimization to avoid slowing down gameplay.
I implemented lazy loading and pagination to keep interfaces responsive even on less powerful systems.
Cross-Module Integration
Getting my modules to work with other popular Foundry
add-ons required building flexible hooks and API endpoints
that could communicate with external systems
without breaking functionality.
Outcomes & Impact
Project Gallery
Interface examples and design elements from across the modules:
Reflections & Learnings
Building these modules taught me a lot—not just about JavaScript, but about interaction design in high-pressure, social spaces:
Immersion isn't just visuals—it's clarity, feedback, and feeling like your choices matter within a cohesive digital experience.
Through the development of these interfaces, I discovered that a well-designed tool can make invisible systems feel tactile and fun. The best ideas often emerged from watching someone get excited about a feature I hadn't even emphasized during playtesting.
Key Takeaways
- Designing for tabletop games requires a unique blend of UI design, game systems thinking, and emotional storytelling
- User feedback is most valuable when observed in action rather than simply collected verbally
- Visual consistency dramatically improves learning curves for complex systems
- Successful UX in gaming contexts balances efficiency with maintaining the fantasy and mood
- Even small interface improvements can significantly impact overall user enjoyment
What's Next
All these modules are functional but ongoing—I'm always tuning and expanding them as our campaign grows. Future goals include:
- A user-friendly export system so other GMs can use these tools
- More animated feedback and theming customization
- A new reputation system that builds on the relationship tracker
- Deepening the Garden Buzz simulation to reflect player choices
- Expanding the messaging interface to include secure channels and data encryption mechanics
This project is less about a finished product and more about how I approach systems thinking, immersion, and experience design in interactive storytelling environments.