Add a Feature to:
DnD Beyond
Introduction
D&D Beyond is a popular if not the most popular online recource for Dungeon and Dragons. Partnering with the D&D owners: Wizards of the West Coast as well as third party vendors D&D Beyond gives the user character creation and access via pay as you go for any resource that has been printed, consolidating it into one location instead of lugging loads of books.
The Problem
While D&D Beyond does have a new to the game online character creating option, it feels light on explaining the rules.
My project goal is to create a more persona driven approach with an emphasis on real world examples (what exactly does a 12 Constitution entail?).
Goals
Make character creation more about a persona development.
Use real world examples of the rules to help make the character more believable.
Have the user get what they are looking for in the creation, not feeling underwhelmed or disappointed.
Incentive to sign up for a subscription to create and use more characters.
Encourage in site purchases from the various vendors.
Roles
Researcher
UX Designer
UI Designer
Testing Cordinator
Quest begins
One on one interviews
I interviewed four participants one on one and two via survey.
Novice's often misunderstand what a class* can and can’t do.Half interviewed start with a class*, Then develop the persona and backstory as they build and play the character.The emphasis on backstory is important (one DM** asked for a backstory so they could incorporate personal elements into the campaign***).
2 out of 6 usually just make a super simple backstories because they struggle with the creativity involved
*Class is the profession of the character.
**DM = Dungeon Master. The person leading the campaign.
***Campaign is the adventure your characters partake in.
“My wizard found out really fast how not good she was with a rapier. ”
Define
StoryBoards
Working off of the data collected from the interviews I storyboarded two significant issues that were called out.
Selecting a class
Creating a backstory
Personas
Meet Kaylee and William.
Our novice adventurers!
Project goals
DND Beyond like any other company needs to make sure they are aligned with their users.
Technical Considerations were needed to help plan for the projects budget but also to see if any long term goals could be incorporated with other projects scheduled down the road.
Problem Statements
The goal is for novices using a persona driven approach instead of rules. Assisting with creativity to give their characters dimension and playability.
POV #1
I would like to assist with newer players to help them understand the rules so they can be independent and confident in character creation.
HMW #1
How can we encourage the new user and discourage them from wanting to play?
POV #2
I would like to give new players a sense of realism to add to their character.
HMW #2
How can we assist users who have an idea and want to put it to paper correctly
POV #3
I would like to help the new player be satisfied in their choices.
HMW #3
How can we help with making the player's creation as realistic as possible?
User Flows
User flow for Class Decider was a………...busy one! With the amount of classes available the right questions needed to be asked or the user is quickly heading down the wrong path.
Backstory Generator and Ability real world descriptions were also created just not shown here.
Design
Lo Fidelity
With an established style guide already existing I was able to concentrate more on the layout. I expect that some style guide updates will be needed as these are new features the guide may not have taken into account for.
Class decider feature and background generator was not as complicated as expected thanks to the user flow giving me visual path to navigate from.
Hi Fidelity
I skipped the Mid Fidelity, Hi Fidelity was such a minimal effort as well as to help make a walkthrough easier to understand for testers not familiar with the site.
I added a CTA for the Choose a Class Feature on the Choose a Class page.
I placed the CTA above the class tiles to help it stand out and not get lost on the page.
I wanted to keep the design and function of the feature as close to the site design and functionality as possible.
I started with a type of combat because the research pointed to this being the most common initial decision for players.
The copy was written for the user to understand what the expectation of their decision is and not stats and rules.
User testing
I had testers create a character named Skaakas the Half-Orc: Spell caster that primarily use a two handed battle axe
I gave the testers 3 tasks:
Figure out a class for your Skaakas.
Generate a backstory for Kaakas.
Edit the backstory and add a new tag and regenerate Skaakas’s backstory.
Chinks in the armor
The problem
The CTA didn’t stand out visually enough. Location was great, color wasn’t attention grabbing.
The solution
The site color styles were not very consistent. I opted for the green because it was one of the more consistent colors associated to CTA’s through out the site
The problem
Knowing what step you are in the process is in important. Originally I had it in the header of the page. It wasn’t near or similar in design to the overall character building menu already on the site.
It wasn’t intuitive for the user to look for a seperate type process indicator. Additionally it didn’t match the overall site design.
The solution
Adding a separate process menu below the main menu keeps the design consistent and intuitive for the user.
The problem
When you finally decide on Skaakas’s class …Ranger, the button is at the bottom of the page, a rather long page.
Testers were not sure if the class was automatically selected or a confirmation was needed.
The solution
Moving the Select Class button “above the fold” of the monitor made it noticeable and accessible. Placing below the brief class description added to a natural flow of events on the page.
Quests end
Lessons Learned
Every project has it’s own set of challenges. Even with a design system in place it was a bit of challenge finding consistent design patterns. It took a bit of research to pick up the more consistent patterns before I could proceed into the Hi Fidelity designs.
Originally I was thinking this feature a completely independent path from current character builder. The research told me the approach of embedding into the character builder would be wiser approach in terms of accessibility as well as cost and time in development.
Final thoughts
I really enjoyed researching and developing this project. Outside of developing my UX/UI skillset I picked up a couple of great ideas for playing the game as well! I would love to show this to DnD Beyond development team, I feel it would be a welcome addition to their site.
