RuleMancer
Teaching Dungeons & Dragons, one bite-sized quest at a time.

My role
End-to-end UX/UI Designer
Timeline
14 weeks
Tools
Figma · Miro
Case study
Overview
Dungeons & Dragons invites players into imaginative worlds, but learning the rules can be an intimidating first quest. Rulebooks run more than 300 pages and rarely show when or how a rule applies. Practicing is difficult without an existing group.
I designed RuleMancer, a mobile learning app for newcomers, regular players exploring more complex mechanics, and veterans who want to teach others. The experience combines two complementary ways to learn:
Learning Modules. Short, quiz-based lessons that introduce rules and mechanics without walls of text.
Adventure Paths. Story-driven, choose-your-own-adventure scenarios that let players practice when and why a rule applies.
The goal was to help people learn at their own pace, build sustainable learning habits, make informed character choices, and feel confident joining a group. Business goals included acquisition, engagement, retention, and potential premium features or partnerships.
01 / Research
Understanding the learning curve
I conducted four remote user interviews, each lasting about 30 minutes, and synthesized the findings through affinity mapping. Participants were in their mid-to-late 20s. Most had played D&D and other tabletop role-playing games for seven to eight years, played weekly together, and usually played digitally.
I asked how they learned, which resources helped, which rules still caused trouble during play, and what would have made the experience easier. I wanted to understand both the initial learning barriers and how players remember and apply rules.
Four recurring insights
Complexity persists. Every participant mentioned difficulties with spellcasting and multiclassing, regardless of experience.
Rules need context. Participants wanted concrete examples and tactics for spells and abilities. Missing context led to confusion during combat.
Learning happens beyond the book. Most learned from Actual Play shows, other players, forums, or videos. Only one mentioned the official Player’s Handbook.
Confidence takes time. Some participants needed years of play before feeling comfortable. One described gaining confidence after roughly three years and some experience as a Dungeon Master.
One participant tried five or six groups before finding one that stuck. These stories highlighted the same gap: players need context and practice, not just more information. That insight led directly to Adventure Paths.

Interview findings organized by experience, learning, finding a group, and pain points.
02 / Define
Designing for three kinds of player
I translated the research into personas, points of view, how-might-we questions, storyboards, and feature priorities. Three personas became a reference throughout the design process:
Ben, the brand-new player. Excited by actual play shows like Critical Role and Dimension 20, but intimidated by the rules. He needs help creating a first character and learning the basics without overwhelming choices.
Kelly, the regular player. Ready to try multiclassing after a few years of play. She needs clear guidance on combining class abilities and managing multiple spell lists.
Milo, the experienced player. Wants to teach new players interesting builds. They need a better way to explain rules, share tactics, and communicate synergies.

Ben, Kelly, and Milo represent different experience levels and learning needs.
A clear structure for learning and practice
Card sorting, sitemap diagrams, and user flows helped shape the app. The final structure centers on four areas in a bottom navigation bar: Home for daily XP, streaks, side quests, and achievements; Learn for Learning Modules; Adventure for Adventure Paths; and Profile for levels, progress, leaderboards, and achievements.
Three core flows guided the wireframes and later usability tests: orienting to Home and Profile, completing a Learning Module quiz, and completing an Adventure Path.
03 / Design
From rules to approachable interactions
I began with mid-fidelity wireframes to establish structure and flow. Learning Modules explored multiple-choice questions, image selection, and matching. Wrong answers offer a soft landing: Try Again or Review Topic, with a route back to the relevant lesson instead of a hard failure.
Adventure Paths put the same principles into a story. Each choice shows its skill check and modifier, and a digital dice roll resolves the outcome. The interaction teaches mechanics through the kind of decisions players make at the table.

Mid-fidelity wireframes explored the learning journey and different question types.
Building a warm, adventurous identity
Four brand values guided the visual design and writing: adventurous, encouraging, imaginative, and rewarding. Lessons became quests; mistakes received supportive language; storytelling sat alongside mechanics; and progress became something tangible to celebrate.
For the logo, I developed ten sketches and narrowed them to three concepts through feedback. Digital iteration, palette tests, and size tests refined the finalists. The "Compass Crest" was selected as the final logo.

Logo development moved from sketches to digital concepts, then color and scale tests.
The palette balances vibrant and earthy tones for a warm, playful fantasy feel. Fraunces headings and Karla body text support the app’s identity. Tabler icons provide clean lines and simple shapes, with a customized profile icon for personalization.
Bringing the system together
The final design deliverables included high-fidelity wireframes, an interactive prototype, a logo, a style sheet covering type, color, and buttons, and an icon library. Peer feedback and iteration helped the separate elements become a cohesive experience.

High-fidelity screens connect the home dashboard, learning, adventure, and profile experiences.
04 / Test & iterate
Testing clarity, confidence, and visual feedback
I ran remote usability tests with four participants using the high-fidelity prototype. Sessions lasted about 15–20 minutes and covered the three core flows: navigating Home and Profile, completing a Learning Module quiz, and completing an Adventure Path.
The study focused on whether the visual design supported clear navigation, whether icons and feedback states communicated their meaning, and whether the experience reflected the brand values.
What worked
100% task completion in this four-person study. Every participant completed every task with minimal prompting. False clicks occurred only on non-functional prototype buttons.
Clear navigation and feedback. Participants understood the tab bar, icons, color coding, and feedback states without explanation. The quiz format was quick and understandable.
A strong fit for D&D. The choose-your-own-adventure format was praised for teaching mechanics, and most participants described the visuals as rustic or cottagecore, reminiscent of classic D&D books.
What needed to change
Distracting motion. Three of four participants found the quiz’s bounce transition disorienting; one said it made them dizzy.
Clutter and ambiguity. Some post-choice Adventure Path screens had too many text blocks and buttons, and the home achievements panel needed clarification.
Accessibility gaps. A second review revealed poor contrast in some colors and interface elements, which could make them difficult for players with visual impairments to see.
Turning feedback into revisions
Quieter transitions. Replaced the bounce with a push transition and a clean dissolve between similar screens.
More legible feedback. Adjusted colors for better accessibility and added clearer selected-answer indicators.
Focused completion screens. Separated Congratulations and Rewards into a dedicated screen to reduce clutter and make unlocks clearer.
A more consistent rhythm. Made spacing more uniform across the interface.

Post-test iterations clarified progress, selected answers, spacing, and rewards.
05 / Outcome & reflection
The research revealed that players struggle not only with what the rules are, but with when to use them. RuleMancer responds with short Learning Modules and story-driven Adventure Paths. In the four-person usability study, all participants completed all tasks, and the Adventure Path concept received particular praise.
The main challenges were compressing a 300-plus-page rule set into approachable lessons, making feedback playful without becoming distracting, and keeping a distinctive fantasy palette accessible. Testing revealed motion issues I would not have found on my own. It also reinforced that accessibility checks belong early in visual design, not at the end.
As a D&D Game Master myself, I’m most proud of the Adventure Paths. Designing a scenario to teach as well as entertain brought together my interests in interaction, storytelling, and game design. The project also demonstrates my end-to-end process: interviews and synthesis, personas, wireframes, original branding, high-fidelity UI, and testing that led to documented revisions.
What comes next
Broader validation. Test with a larger, more varied group, including complete beginners and people with visual impairments. Revisit the style sheet for full WCAG compliance and evaluate whether daily streaks suit learning D&D.
Multiple rule sets. Add modules for the differences between the 2014 and 2024 fifth-edition rules, with a choice of which to learn.
Archetype Paths. Replace subjective difficulty levels with character archetypes so players can explore the play style they want.
Social learning. Explore comparing progress, sharing content, and forming learning groups with real tabletop groups.

Hi-fidelity wireframes covering the home screen, Learning Module, quiz states, Adventure Path, and profile

Final style sheet, icon list, and component library
