Project Background
Designing for endless stories
Dungeons and Dragons (D&D) is a tabletop roleplaying game where players create a character, roll some dice, and make decisions as their characters in a growing world of fantasy and magic. Players can choose to talk their way out of a bad deal with pirates, hunt down the dragon terrorizing the village, solve mysteries in an abandoned manor, and just about any other situation that the players want to play in.
D&D is one of the few games where anything is possible, but, in a game world with a never-ending possibility of potential, where does a player even begin to think of starting a game or character? The thought can be overwhelming with over fifty official D&D content books, hundreds of races, classes, and subclasses, and the promise that you can tell endless stories.
Dungeons and Dragons is:
- A tabletop roleplaying game with a large amount of content
- A shared storytelling experience between all players
- Fun and exciting to play with friends
- Creative and inspirational with large fantasy worlds
- A shared storytelling experience between all players
- Fun and exciting to play with friends
- Creative and inspirational with large fantasy worlds
User/Competitive research
The key character creation tool that was evaluated was DNDBeyond.com, as a majority of users that would be interviewed had used the website before. Additionally, two other non-official sites (Dungeon Masters Vault and Fast Character) were analyzed, with both suffering from poor UI and the DND Beyond issues as well.
DND Beyond is now the official character creation tool for D&D and carries the content of all official books, custom content, and more.
Key Flaws of DNDBeyond:
- Overwhelming
- Mechanics first
- Poor background tools
- Characters feel like numbers
- Mechanics first
- Poor background tools
- Characters feel like numbers
Evaluating player needs
Five Dungeons and Dragons players of varying experience were selected from a total pool of fifteen to be interviewed in order to generate user stories.
While the statistical/game mechanics side of character creation is all but perfected by the DND Beyond character creation tool, it is clear that users desire more depth than just a name and associated numbers for their characters. It became clear what not to do when beginning the design of the character creation tool.
Players' current issues:
- Current character methods end up feeling feel flat and boring
- Feel restricted by roll table backstory methods, which give pre-written backstories randomly based on what a player rolls
- Feel overwhelmed by the amount of content that is available for D&D
- Lacks references to existing characters or stories that exist in general
- Feel restricted by roll table backstory methods, which give pre-written backstories randomly based on what a player rolls
- Feel overwhelmed by the amount of content that is available for D&D
- Lacks references to existing characters or stories that exist in general
User Personas
The New Player:
With minimal to no experience in D&D, new players receive most of their knowledge of D&D through word of mouth, pop culture references, or stumbling across other media sources.
The New Players' goals include:
- Create a character
- Begin playing the game
- Have fun with their friends
- Begin playing the game
- Have fun with their friends
The Experienced Player:
With a good amount of playtime and experience in the game, The Experienced Players' goals begin to shift towards increasing their satisfaction and enjoyment of playing D&D.
The Experienced Player's goals include:
- Create a personal character
- Add depth to characters so they feel real
- Explore more stories
- Add depth to characters so they feel real
- Explore more stories
The Advanced Player:
With experience running the game and playing it multiple times, The Advance Player aims to create worlds that enhance the storytelling aspects of the game.
The Advanced Players’ goals include:
- Create strong, believable characters
- Bring the game world to life for players
- Tell stories through character choices and backstory influences
- Bring the game world to life for players
- Tell stories through character choices and backstory influences
Brand Design
How might we questions:
- How might we ease the difficulty of creating original backstories for characters in dungeons and dragons?
- How might we create a personal feel to a character, without telling someone how to create it?
- How might we organize information in a clean and efficient way so that players of all experiences can have seamless usage?
- How might we suggest background elements without giving the exact history of a character?
- How might we create a personal feel to a character, without telling someone how to create it?
- How might we organize information in a clean and efficient way so that players of all experiences can have seamless usage?
- How might we suggest background elements without giving the exact history of a character?
High-level goals:
- Design a tool that players of all experiences can use comfortably and efficiently
- Help create personal character stories that feel real and alive, not one that dies with the name and numbers written on the paper
- Narrow the scope of official content and references so as to not overwhelm users
- Inspire collaboration in storytelling both on our site, and at the table
- Help create personal character stories that feel real and alive, not one that dies with the name and numbers written on the paper
- Narrow the scope of official content and references so as to not overwhelm users
- Inspire collaboration in storytelling both on our site, and at the table
Brand values:
The solution to the current character creation methodologies was referred to as “Assisted Autonomy”. This is the idea that The Soulfell Tavern should provide the scope, while the user defines what they want to see in their backstories.
The Soulfell Tavern emphasizes the following values:
- When a tool is accessible it allows users to create seamlessly
- When a brand is sincere they create a lasting connection with their users
- When a brand inspires they promote creativity within their user base
- When a brand is sincere they create a lasting connection with their users
- When a brand inspires they promote creativity within their user base
These values are necessary to establish the relationship many D&D users look for when creating their backstories, as the user research suggests they want to make more decisions that lead to real, personalized, and unique characters while still being loosely guided through the endless amount of content.
The key motifs that stuck out during the design stage included:
- Modern and accessible design
- Inspiring artwork and storytelling
- Ease of use and not overwhelming users
- Inspiring artwork and storytelling
- Ease of use and not overwhelming users
Font:
The font family used was Roboto, as it is minimal, accessible, and is used currently by DND Beyond.
Colors:
The final design colors were suited for a dark theme with the key colors being Granite Gray (#232528), Warlock Purple (#8B4BCC), and Gilded Gold (#A68C67).
Warlock Purple was chosen as an adjacent color to established D&D themes, as many warlock and magics from beyond the planes have purple essence to them, while Granite Gray was chosen to mirror the darker banner designs from DND Beyond which helped to create a feeling of familiarity for users. While early designs feature a blue that resembled the arcane magics, Gilded Gold was found to be a preferable tertiary color as it did not clash with design elements.
Imagery:
Images were pulled directly from Wizards of the Coast content, as they have an excellent community use policy for their material and their imagery inspires a plethora of stories for users who come across it. Images used through the site inspire our user base for their next great story.
User Testing and Prototypes
How The Soulfell Tavern works:
Players begin by selecting a reference point, either a D&D class, a general story archetype, or a reference from different comics, movies, books, etc. Characters then determine whether they are good/evil/neutral or lawful/chaotic/neutral.
Once all choices are made, characters then answer questions with their choices in mind to flesh out the backstory of their character.
Once all choices are made, characters then answer questions with their choices in mind to flesh out the backstory of their character.
With prototyping done, 3 rounds of moderated task-based user testing were performed to judge the following key design questions
- Can a user effectively navigate through the website
- Can a user effectively progress through the tool
- Can a user effectively communicate what each step of the process does
Guerrilla testing:
Initial tests were done with sketches in a prototyping application. Five users were asked to navigate through the tool and were asked for general feedback on how the site layout felt.
Users noted:
- Easy to navigate
- “Felt familiar”
- Straight-forward and minimal design
- “Felt familiar”
- Straight-forward and minimal design
Recommendations:
- Display selections more clearly
- Drop out/sliding boxes instead of large text walls
- Drop out/sliding boxes instead of large text walls
Lo-Fidelity wireframes:
Version 1 - Hi-Fidelity wireframes
Imagery and example text was filled into the designs, bringing further life to the design.
A background texture, uniform buttons, and an established color scheme were still not in full effect so initial designs in this version felt extremely flat and lacked a uniform look.
A background texture, uniform buttons, and an established color scheme were still not in full effect so initial designs in this version felt extremely flat and lacked a uniform look.
Version 1 feedback:
Pros:
- Clear navigation
- Easy interaction
- A decent understanding of the creation tool
- Clear navigation
- Easy interaction
- A decent understanding of the creation tool
- Cons:
- Colors are clashing
- Feels flat/undesigned in areas
- Still unclear on some of the creation tool
- Colors are clashing
- Feels flat/undesigned in areas
- Still unclear on some of the creation tool
Version 2 - Hi-Fidelity wireframes
The second version of the site brought some of the imagery to life and began to uniformly design buttons and layouts across all pages. Additional text was also written to better inform users of what they were doing at each step and how to use the tool.
Version 2 feedback:
Pros:
- The layout feels uniform and easy to navigate
- Increasing understanding of tool from users
- The layout feels uniform and easy to navigate
- Increasing understanding of tool from users
Cons:
- Color still clashes with the blue
- Still feels flat in some areas
- Still somewhat unclear near later sections of the tool
- Color still clashes with the blue
- Still feels flat in some areas
- Still somewhat unclear near later sections of the tool
Version 3 - Hi-Fidelity wireframes
The third version brought a more inviting landing page, with a cohesive and readable design that promotes the user to explore the site further. Button layout became well established with full usage of the Gilded Gold, and texture was fully added to create a more visually interesting backdrop. With all of these elements, The Soulfell Tavern feels more alive and visually interesting compared to previous models.
Version 3 feedback:
Pros:
- The layout feels extremely uniform and intuitive
- Users have a strong understanding of how the tool works
- Users are easily able to navigate
- The layout feels extremely uniform and intuitive
- Users have a strong understanding of how the tool works
- Users are easily able to navigate
Cons:
- Increase visual interest in a few areas
- Take away some navigation as to not overwhelm user
- Increase visual interest in a few areas
- Take away some navigation as to not overwhelm user
Conclusion:
This character creation tool has long been a dream to design, and getting the chance to bring life to it has been spectacular. Not only have I sharpened the User Interface and Experience skills I originally gained in college, but I additionally began to think about my small Dungeons and Dragons homebrew story as an actual product and story that could be shared with the larger community as a whole.
Key takeaway - User Interface:
Designing for an audience that is already familiar can be difficult, but by focusing on adjacent themes and designs that speak for themselves I found success in creating a product that felt complete.
Next time I would spend longer on navigational elements that are not the primary means of navigation, such as sidebars, footers, or other means.
Key takeaway - User Experience:
The most valuable lesson was that despite my knowledge of D&D, I took more away from user feedback than my own feedback.
I learned to focus on user stories and how different people interpret the tools and designs around them.
