A 10-week project to enhance the experience of players new to the game Dungeons & Dragons. I worked with a partner (Jodie Lim, who also did all the artwork) to research, design, and create a website that reworks the imposing Player's Handbook into an accessible, beginner-friendly format.

Our "trailer" that shows the concept and features of our website, Dragons on Training Wheels

We began by observing several Dungeons and Dragons gameplay sessions and interviewing both the players and the Dungeon Masters (the leader of each session). We observed one digital game composed entirely of experienced players and one physical game that included experienced, somewhat experienced, and new players. We interviewed a new player, an experienced player, and a somewhat experienced Dungeon Master.

Full list of user needs developed after observations and interviews

From our observations and interviews, we developed a list of user needs (such as an easy way to reference spells and an easy way to understand character statistics) and our point of view: "More players would enjoy D&D and current players would have their experience enhanced if the game was more easily accessible." We decided to focus on creating a website for new players because they seem to be an under-served community when it comes to Dungeons and Dragons resources.

A chart of existing D&D resources and how they are targeted, including a character builder and a dice roller

We went on to create storyboards, paper prototypes, and digital mockups of our planned design so that we could get feedback from stakeholders before moving on to actually coding the website. Through this process of stakeholder feedback and heuristic evaluation from other designers, we decided to focus on a "storybook" style website that explained the basics of the entire game rather than simply explaining the character sheet.
Storyboard showing that DOTW is simpler than the D&D Handbook
Storyboard showing that DOTW is a good introduction for new players
Paper prototype with card style
Paper prototype with popup style
Early Digital Wireframe
We then began to create our website. Below are the first and final iterations of several aspects of the website: the homepage, the header, a menu page, and a content page. I also coded searchable catalogs for weapons, armor, and spells using JSON databases, and created a character sheet save system using local storage. We developed a "story sheet" text-only version of D&D's confusing-looking character sheet, also shown below.
Early homepage prototype with buttons below cards
Final homepage with all buttons as illustrated cards
Early header prototype with separate buttons
Final fixed header with menu view
Early attributes page prototype with poor information hierarchy and color scheme
Final attributes page with clear information hierarchy and consistent color scheme
Official D&D 5E character sheet
DOTW's "Story Sheet" that simplifies the necessary information
After completing our website to a usable state, we conducted several rounds of user testing. In the first round, we had users give a qualitative evaluation of the entire website. In the second round, we created two versions of the homepage and conducted both another qualitative in-person evaluation and an online round of A/B testing with 195 user sessions.

Changes implemented after qualitative user testing. 

Homepage Version A (simplified)
Homepage Version B (complex)

A/B testing results showing lower bounce rate for Version A but longer session time for Version B

We concluded that the simpler page drew users in but may have confused them, while the more complex page informed users but may have deterred them. For our final version, we created a "middle ground" homepage that kept the simple feel of the original homepage while still including some text to let users know what subpages are under each category. The final website is viewable at

Final version of the homepage

Back to Top