User Interfaces for Character Creation in D&D

Background

Dungeons and Dragons (D&D) is a classic tabletop roleplaying game that engages a group of friends into an imaginative realm of adventure. Players immerse themselves through the lives of their self-made heroes as they decide their path in this new, fantasy world. The core gameplay of D&D revolves around these choices the players make — as their experiences tell the story.

The Problem

The introduction of D&D into mainstream pop-culture sees the arise of new players looking to play, but no current tools to cater towards them.

Player choice is inherently an issue towards new-coming and casual players, specifically in character creation, whereas the player is overwhelmed with decisions to make before they can embark on their adventure.

Racial proficiencies, class spells, attribute points, skills — such vast quantities of information warrant the player to carry a copy of the Player’s Handbook to refer back to at all times. The time it takes to create a character even with assistance can take hours at a time.

The complexity and lack of distinction between choices while creating a character serve as a barrier to entry and hinder the new user experience overall.

A character sheet, used for logging information about your hero and his or her abilities. Overloaded with blanks of information, it is very intimidating to new players.

Solution & Who’s This For —

The goal is to create a mobile interface that serves as onboarding for new players. Streamline the character creation process by minimizing the time spent referring to information in The Player’s Handbook while maintaining a diversity of options the player can undertake in creating a hero.

The main audience this targets is the growing amount of newer players in D&D 5e that are willing to be introduced to the game and learn its fundamentals. They don’t necessarily care too much about optimizing a character for “maximum efficiency” — they’d rather spend more time having fun and playing with their friends.

Visual concept of how to better introduce players to D&D and the idea of “class fantasy”.

Current Goals

  • Guide the player on how to create a character in an intuitive manner.
  • Be able to introduce unfamiliar terms as they come along in the process.
  • Minimize visual clutter and focus on decision-making.
  • Make user selection feel responsive and impactful.
  • Focus on “class fantasy” and the picture as a whole versus smaller parts.
  • Allow the user to not be reliant on the Player’s Handbook for reference.
Mid Fidelity Screens in Adobe XD

Process

Using Adobe XD as a prototyping tool (check out the prototype here), my design focuses on one stage of the character creation process at a time, following a linear path for the user to follow.

Basic user interaction during character creation

It takes inspiration from “software wizard installers” and their ease of use for the user to make progress by clicking a button. A minimal interface along with a simple call-to-action at the bottom of each screen provides the user something intuitive so that they can focus on their own decisions. Several iterations were required to guide the user’s attention and interactions to the main points of information.

It was also designed in mind that most users would have little to no familiarity about roleplaying games in general. There are plenty of tags, and descriptions for important terms and vocabulary such that the user should never feel lost or dissuaded by jargon.

Several stages of iteration for the “Choose a Class” screen before arriving at the current mockup (right).

Challenges and Looking Forward

The major challenge is that currently there are no systems in place that focus on roleplaying games for a mobile interface. For a game that has recently risen to such popularity, there is a surprising lack of tools besides online forums and experienced players to help newcomers get started.

So far I’ve made many screens and a basic visual prototype. But the process of character creation for Dungeons and Dragons is long, complicated, and arduous.

I will be focusing my future efforts on polishing animations and micro-interactions in InVision Studio to give weight to user actions. My hope is that as I continue developing on this prototype that is serves as a model for future applications to come.

Have any questions?
Feel free to comment below or contact me at mylesdomingo@berkeley.edu