User Experience Design Case Study
By Catie Leary
D&D Character Companion
In this case study, I walk through a D&D character sheet app I designed for a User Experience Design course I took at General Assembly Atlanta in Fall of 2018. Please feel free to contact me with any questions. I love talking about UX almost as much as I like talking about D&D!
What is dungeons & dragons?
Dungeons & Dragons is a group roleplaying game that uses pen, paper, and dice.
D&D dates back to the 1970s, and its game mechanics are the basis for most modern roleplaying video games. You “level up” with experience points, and your successes andfailures in combat or other actions are determined by (1) random dice rolls, and (2) ability/skill points that modify those dice roll numbers.
There are two distinct ways you can play D&D:
Regular players create and manage a character (i.e. Elf Wizard or Human Thief) that they play throughout a game campaign.
Gamemasters organize and run the campaign — guiding players through the narrative, facilitating encounters, etc.
The Problem
Paper character sheets can become messy and unorganized over long D&D campaigns, which can result in inaccurate data and a confusing leveling up experience for players.
My Objective
Create a digital character sheet app that streamlines character management while preserving the analog “spirit” of tabletop roleplaying games.
User Research
Before diving into user research, I established four goals I intended to accomplish during this phase:
Identify the challenges of traditional character sheet management
Compare the pros and cons of digital character sheet management technology
Identify workarounds people have incorporated into their character management
Identify desirable features of a potential digital character management app
As I conducted my user research and interviews with D&D players, I immediately began to notice common threads of frustration and wants. This allowed me to synthesize their user goals.
Defining User Goals
Secondary User Goals
Maintain library of game-related documents & files
Players often keep a copy of the Player’s Handbook with them during sessions — either in book form or PDF form. For those that primarily use a PDF copy, it’d be convenient to have it located right within an app for easy reference.
Allow for discreet in-game communication.
A GM I interviewed said they often must send texts or paper notes when asking a player for secret game-related info.
Preserve the integrity of analog gameplay.
Users expressed that what drew them to D&D is being able to use their imagination and connect with others. One user also said it’s fun to play and collect dice.
Primary User GoalsCreate a cleaner character management experience.
Multiple users expressed that leveling up characters, documenting new items, & taking notes gets more complicated over the course of a campaign as the paper sheet becomes more crowded. They erase & replace old stats & change inventory items frequently, which can “bore literal holes” in the paper.
Streamline the leveling up process.
Provide more space for inventory notes.
Interviewee: “Sometimes I would add a cool item to my inventory but not have space on the sheet to write details about it. So at a session months later, I’m like ‘wait what’s this? What does it do??’ I completely forgot I had it and what it does!”
Acknowledging Assumptions
One insightful lesson I learned from the user research process was about checking my own assumptions. Due to my own personal experiences as a D&D player, I made a minor assumption prior to user research that everyone I spoke to would want a 100% digital character sheet experience — no paper at all. Why? Because a paperless character sheet experience was something that personally seemed appealing to me.
However, several of my users expressed that a good feature to have would be an “Export” button that allows them to export their character information in a compatible form-fillable PDF that could be printed off before every game session and then updated manually in the app after each session. Because of this insight, I decided that adding an “Export” feature to my product would be a smart idea to meet those users’ needs.
Comparative Analysis
D&D is a wildly popular roleplaying game, and I am not alone in my endeavor to improve the user experience of the paper character sheet. There are many iterations
Feature Comparison Matrix
Comparing User Interfaces
Personas
Kayla, the player
Kayla, 33, is a busy mom whose love of video games inspired her to give D&D a try. After a year of playing with her group once a month, she’s come to realize that she needs a cleaner, more efficient way to maintain her D&D character sheet.
Not only is her current paper character sheet a mess (eraser holes, coffee stains, crinkles), but updating her information is tedious and confusing. This is especially true when she has to level up her character.
Leon, the GM
Leon, 28, is a gamemaster who started playing Dungeons & Dragons when he was in high school. He loves getting theatrical during D&D, and really dislikes to break the 4th wall!
To avoid breaking character and better immerse his players in his campaign, he would benefit from having access to private in-game messaging, document sharing, and real-time access to all of the character sheets for players in his game, so he doesn’t have to interrupt the natural gameplay.
Minimum Viable Product
By evaluating the most pressing user needs and goals for our two personas, I was able to identify the six core features that would be necessary for a minimum viable product.
Design PHASE
User Flows & Sitemap
There are two distinct user flows:
The player, who may only view their own character sheet.
The dungeon master (DM), who is able to view all character sheets within a game.
Based on these user flows, I developed a basic sitemap of the key screens within the app:
Based on these user flows, I developed a basic sitemap of the key screens within the app:
With my user flows and sitemap fleshed out, I transformed rough, hand-drawn prototypes into refined wireframes.
Rough Sketch > Lo-Fi Wireframe > Hi-Fi Wireframe
A Selection of Annotated Wireframes:
After further refining my wireframes, I compiled it all together in InVision as a high-fidelity prototype:
user testing & Usability Shifts
Throughout the prototyping process, I conducted several user tests, which yielded important usability shifts in the final prototype. Below are the two most critical usability shifts I implemented.
Toggling between games
Some players are involved in multiple games, so being able to toggle between those games is key. The original low-fidelity prototype did not have a path for this, so it was created for the high-fidelity prototype.
Simplifying the Spells screen
While users tested the Spells screen of one of my earlier wireframe prototypes, it became abundantly clear how messy it was to set it up in this way — both in terms of aesthetics and usability. I remedied this in the final prototype with a design that is much more simple, clean, and intuitive to use.
Looking to the Future
The following features would be explored in future iterations of this app:
A tool for creating characters in-game, instead of manually filling in fields or uploading PDFs
Ability for the GM to distribute experience points, items, & gold to players’ character sheets