TTRPG Companion App Concept
Summary
4
Project phases, moodboards to mockups
1
Full design pivot
3
Final concept screens
For my Visual Design Fundamentals final at CCAD, I designed the full visual and design system for a TTRPG companion app concept, from moodboards through color and typography exploration to a component set and finished mobile screens. The concept is aimed at the problem that probably ends more campaigns than anything in a rulebook—scheduling—along with the bigger idea of a "one-stop shop" for campaign management.
My early designs leaned hard on a dark, color-heavy fantasy look, and a semester of weekly critiques (plus the design just not working the way I wanted it to, accessibility especially) eventually pushed me to pivot back to a "safe" design, saving the strong contrast for user controls.
The final screens received positive feedback, and the design system behind them is already the foundation for a couple of new projects I'm working on now. Check out the full story below!
Design Process
Background
Anyone who has spent time in tabletop RPG groups knows the hardest part of a campaign usually isn't the rules; it's getting the whole party in the same place at the same time, week after week. Scheduling was the primary problem I wanted to design around. From there, the concept grew into a "one-stop shop" for campaign management: sessions, characters, and the party's table talk in one app instead of spread across multiple platforms.
The course side of the brief was to build a design system and visual language across half of the semester, with each project acting as a phase: moodboards, then color and typography, then a component set, then final screens. The subject was our choice, and I picked TTRPGs because I've spent many years in gaming communities and have used various products in this industry. The stakes, at least for me, were that I had never done visual-system work at this depth before, and the work went in front of the class for design critique about every week.
Chapter 1: Moodboards
To start, I had never made a moodboard like this before; truthfully, I didn't understand the purpose yet. It took plenty of revisions before I came to something I was finally happy with: a direction I called "Traditionally Magical," dark and ornate with deep reds and golds, pulling inspiration from medieval culture and popular fantasy media.
Side Quests: Colors, Typography, Weights
The middle of the semester was the side quests. I iterated on the palette swatch by swatch, leaving myself notes on the canvas as I went, and reading them back now is basically a diary of the color system figuring itself out.
The colors eventually landed somewhere between fantasy atmosphere and actual usability. Typography settled on Cormorant Unicase for titles, which has a high x-height and spaced capitals to feel like a storybook while staying legible, paired with Roboto for headers and body text, designed to keep the reading experience up to date. Late in the process, I updated the callout text to Roboto as well over an accessibility concern, which I think was an early sign of where the whole design was heading.
Chapter 2: Component Set
The component set was the start of something good, but it was relying too much on color to do the design's job. I also spent too much of that phase focusing on detailing rather than wireframing, so I was polishing screens I hadn't structured yet. That was the wrong order.
The Takeaway
Wireframe first, decorate second. Polish spent on an unstructured screen is polish you end up redoing.
Relying too much on color
Because the work went through critique just about every week, the problems didn't stay hidden for long. Part of it was the critique feedback itself, and part of it was me watching the design wasn't working the way I wanted it to, with accessibility being the biggest problem (the dark theme and the contrast the interface needed were not getting along). Eventually, I accepted that I needed to pivot to a "safe" design.
The realization that came with the pivot was that the genre already had the answer: tabletop games have run on paper for decades, and paper is about as accessible a reading surface as there is. Going back to paper roots for the design's base meant I could save the strong, contrasting elements for the things that actually needed attention: the user controls.
Chapter 3: The Boss Battle
The final phase was about simplifying. I stripped the designs back, corrected the spacing errors left over from earlier phases, and rebuilt the screens on a light, paper-inspired background with dark type, while keeping the high-contrast red and teal accents for user controls and navigation.
The three screens that carry the concept show where the "one-stop shop" idea ended up:
• The 'Sessions' screen puts the party's upcoming games front and center, since scheduling is the reason the app exists in the first place
• The 'Characters' screen keeps skills and key information readable at a glance
• The party chat logs dice rolls directly into the conversation, so the table talk and the game mechanics live in the same thread instead of separate apps
What's Next
Reusing the design system
Already the foundation for new projects — the system built during this course is moving forward and being enhanced for new work.
The design system is already the foundation for a couple of new ideas I'm working on now, which I didn't expect to get out of a fundamentals course. For the concept itself, the obvious next step would be to design the remaining screens for a real product and get a prototype in front of real players. A semester of critique can tell you a design is cleaner, but it can't tell you whether a party would actually run its campaign on it.
In the end, I learned a lot from this project, probably more from the pivot than from anything that went right the first time. Going forward, I'm almost always starting with structure first and letting color do its job later.