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.
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.
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.
INITIAL TEAM SOLUTION:
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.
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.
FINAL TEAM SOLUTION:
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 https://lmring.github.io/DOTW/index.html