portfolio cover orb ponderer.png

The DnD Character Creator

Overview

The DnD Character Creator is a web-based application that aims to simplify the character design process into a few clicks without limiting the customization capabilities.

 

This was part of a group project for the CSS 478 Human-Centered Design course . The objective of the project is to identify a collaborative scenario and improve the experience.

Role

UX Designer

Visual Design, User Research, Testing

Project Period

January - March 2022

Context

As the pandemic led to an increase of remote activities, so did Dungeons and Dragons. However, the sudden shift to a remote experience significantly changed the game experience due to several game mechanics being designed for on-hand experience.

In this project, I was primarily the UX designer that made sure the project includes experiences suitable for beginner DnD players. Since I had experience with the Lean UX process and minimal experience with DnD, I was able to question and clarify design decisions from an unfamiliar DnD user's perspective.

Learning About Our Primary Users

We conducted a google form survey that targeted users who have played DnD before and used Roll20 before. The aim is to identify the pain points when playing DnD and any downsides for utilizing a popular online DnD tool compared to an in-person experience.

The overall survey had 22 questions that covered 4 main topics which were:

  • participant's general demographic information

  • General DnD experience

  • Specified questions for either DM and/or Player role

  • Opinions on Roll20

What Were the Problems?

After conducting a user research survey, a few common pain points we learned from 26 respondents are:

  • Planning and setting up the game is the least enjoyable part of the experience

  • Trying to develop a worthwhile backstory to fit the world created by the DM

  • Lengthiness of combat

  • Roll20 website lacking certain UI optimization

Our Primary Goals

The primary issues we addressed in this project are:

  • How do we simplify the character creation process?

  • Is there any method to make it easier to create a character's backstory?

  • What online DnD experience can be improved or simplified?

Our Target User/ Persona

After conducting the surveys and understanding our project direction, I created an updated persona that is more suitable for our target audience. 

The main changes are:

  • Updating player experience from "Novice DnD player" to "Experienced DnD Player" The reason for the change is because most of our participants are veteran DnD players/ DMs with experience ranging between half a year to 40+ years. Not to mention the use case of the end product is tailored specifically for online DnD users.

  • Frustrations and Goals were updated since we gather more information on real player experience.

  • The background info was changed to include context adjusted to user proficiency and relevant DnD playstyle.

  • Including more DnD related data such as how long they've played DnD and what type of user they are (player vs DM)

Updated Proto persona
Updated Proto persona

New persona after conducting surveys and gathering more user research data.

press to zoom
Proto Persona
Proto Persona

Old persona based on initial my own perception of a potential DnD user

press to zoom
Updated Proto persona
Updated Proto persona

New persona after conducting surveys and gathering more user research data.

press to zoom
1/2

User Journey Map

To further explore the target audience, we created a user journey map to organize the experiences a DnD player would go through in a typical DnD session along with the mood and feeling to emphasize potential thoughts and feelings of the users.

The areas that stood out are:

  • most frustration points in the game setup & encounters column

  • improvement opportunities are focused on the setup & encounter process

My area of focus in this assignment was the thoughts and feelings a user may experience. I modified the aesthetic to not only make the information easier to digest but also clarify the mood through colors and sticker emotes.

All of these factors influenced the design direction which led to the focus on improving primarily the setup process.

journey map part 1
journey map part 1

press to zoom
journey map part 2
journey map part 2

press to zoom
journey map part 1
journey map part 1

press to zoom
1/2

The Prototype

After researching and learning about the users, our group ended up creating a character sheet generator that simplifies the setup process to a few simple clicks.

The current design is able to:

  • select what character features to randomize

  • A basic template to get a character backstory started

  • An action page to simulate dice rolls for certain actions/ scenarios

  • output relevant character info based on specific race and class

  • A single demonstration of a background illustration/ image banner based on character characteristics

For the prototyping section, I was in charge of adding visual assets to prepare the prototype for the usability test scenarios. As for the creation of the prototype, our primary coder/ UI designer, Sav, built the whole website from scratch with her coding experience and vast knowledge of different DnD races/ class characteristics.

The Usability Study

In the usability study, the team created a test to see what advantages and disadvantages the current prototype build has for current DnD players with several years of experience. In the 6 case studies, the concepts and scenarios we used to gather data are:

  • (pre-study questions) general questions on participant's Dnd experience/ playstyle

  • (scenario 1) Exploration of the prototype with no context and first impressions

  • (scenario 2) Series of tasks to create a specific character build

  • (scenario 3) Encounter scenario utilizing action page's features

  • (scenario 4) Exploring the backstory building feature

  • (post-study questions) Follow up questions on overall prototype experience

The Findings

The final result of the study was a high percentage of participants finding the prototype easy to use and satisfied with the simple character creation process. However, there are still certain parts of the prototype that the participants aren't satisfied with yet. 

 

The general areas for improvement are:

  • backstory feature wasn't helpful to half of the participants

  • participants desired the ability to save, load, and export the character builds

  • participants pointed out areas to improve webpage navigation and certain UI elements

  • Participants noted that there aren't enough customizations for certain character details and aesthetic

What I learned From this Project

DnD is a complex yet rewarding process that requires users to invest a lot of time to create the story they desire. Due to the complex nature of dense details and diverse selection of fantasy elements used to create the immersive experience, it becomes a skill that can't be easily made into a mass-produced template that retains its unique qualities. Although there won't be a tool that completely satisfies all the user's requirements and playstyle, certain repetitive common practices can still be simplified to make the setup process easier.

From the project development, I learned that DnD heavily emphasizes storytelling as the foundation that makes the experience immersive. Along with the story-rich content, I learned that DnD contains a lot of game mechanics that require a lot of active participation that makes the experience life-like in some ways. The level of immersion depends on the number of details and how well the character acts as its own entity. But even with high levels of immersion, the game will always be incomplete without the involvement of friends that join you in the journey. 


As for takeaways that relate to the project, I learned that:

  • The level of immersion and depth of detail for the persona will determine the amount of insight for potential future issues

  • Not all features are considered universally useful

  • DnD heavily depends on the individual's preference and cannot be completely simplified

  • Even without prior knowledge of how DnD works, the basics will naturally be picked up as long as I actively communicate and collaborate with my teammates

  • having a full team that actively works together significantly boosts the productivity speed

  • Ask questions even if it sounds like common knowledge. You never know what kind of ideas or new insight it might bring.