Partnering with Dungeons and Dragons as well as third party vendors, D&D Beyond gives the user access via pay as you go for any resources, consolidating it into one convenient location.
DnDBeyond
DnDBeyond
D&D Beyond is a popular if not the most popular online recource for Dungeon and Dragons.
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.
DnDBeyond
D&D Beyond is a popular if not the most popular online recource for Dungeon and Dragons.
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.
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?).
D&D Beyond has a new to the game online character creating option, it feels rules understanding intensive during creation.
My project goal is to create on persona driven by 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.
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 Coordinator
Goals
Make character creation more about a persona development.
Use real world examples of the rules.
Have the user get their hero created.
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 Coordinator
Quest begins
Quest begins
One-on-one interviews
One-on-one
interviews
“My wizard found out really fast how not good she was with a rapier. ”
— Veronica is talking about the life choices of El'dra, her deceased elven wizard.
“My wizard found out really fast how not good she was with a rapier. ”
— Veronica is talking about the life choices of El'dra, her deceased elven wizard.
“My wizard found out really fast how not good she was with a rapier. ”
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
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.
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.
*Class is the profession of the character.
**DM = Dungeon Master. The person leading the campaign.
***Campaign is the adventure your characters partake in.
— Veronica is talking about the life choices of El'dra, her deceased elven wizard.
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
The emphasis on backstory can be important (one DM** asked for a backstory before the campaign starts***).
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.
*Class is the profession of the character.
**DM = Dungeon Master. The person leading the campaign.
***Campaign is the adventure your characters partake in.
Story boards
Working off of the data collected from the interviews I storyboarded two significant issues that were called out.
Working off of the data collected from the interviews I storyboarded two significant issues that were called out.
Personas
Kaylee - Newbie Ranger
Kaylee:
Newbie Ranger
Age: 26
Occupation: ER Nurse
Experience: Started playing bi-weekly two weeks ago.
Age: 26
Occupation: ER Nurse
Experience: Started playing bi-weekly two weeks ago.
“I’m inspired by movies, podcasts and books. Not all heroes are best suited for their adventures, weaknesses are just as interesting than strengths.”
“I’m inspired by movies, podcasts and books. Not all heroes are best suited for their adventures, weaknesses are just as interesting than strengths.”
“I’m inspired by movies, podcasts and books. Not all heroes are best suited for their adventures, weaknesses are just as interesting than strengths.”
Needs
Pain Points
To better understand the attributes rules.
To fit the right class and race for my character.
Being able to create a character by myself.
To better understand the attributes rules.
To fit the right class and race for my character.
Being able to create a character by myself.
Kaylee is very creative and is looking for ways to independently comprehend some of the rules. She would also like a better way to approach what class would be best for her ideas.
Kaylee is very creative and is looking for ways to independently comprehend some of the rules.
William - Budding Barbarian
William:
Intro Barbarian
She would also like a better way to approach what class would be best for her ideas.
Age: 31
Occupation: Network Security Engineer
Experience: Started 2 months ago. Plays 2 -3 times a month.
Age: 31
Occupation: Network Security Engineer
Experience: Started 2 months ago. Plays 2 -3 times a month.
“I’m a bit stat driven and honestly not as creative as others in the party.”
“I’m a bit stat driven and honestly not as creative as others in the party.”
Pain Points
Needs
Pain Points
Help with creativity for backstory.
To develop a personality character.
Understand the alignment options.
Help with creativity for backstory.
To develop a personality character.
Understand the alignment options.
Kevin takes a more strategic approach to building his characters. Getting the most out of each one. While combat is sound, the personality and backstory he struggles with leaving him a bit disengaged in the non comabt events.
Pain Points
Kevin takes a more strategic approach to building his characters. Getting the most out of each one. While combat is sound, the personality and backstory he struggles with leaving him a bit disengaged in the non comabt events.
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.
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
Problem
statements
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#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#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#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#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#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#1
I would like to help the new player be satisfied in their choices.
HMW#1
How can we help with making the player's creation as realistic as possible?
POV#1
I would like to help the new player be satisfied in their choices.
HMW#1
How can we help with making the player's creation as realistic as possible?
POV#1
I would like to help the new player be satisfied in their choices.
HMW#1
How can we help with making the player's creation as realistic as possible?
POV#1
I would like to help the new player be satisfied in their choices.
HMW#1
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
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
Design
Low fidelity
Class selector
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.
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.
Background generator
Class decider feature and background generator was not as complicated as expected thanks to the user flow giving me visual path to navigate from.
Class decider feature and background generator was not as complicated as expected thanks to the user flow giving me visual path to navigate from.
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
Class selector
Background generator
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 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.
Background generator
Background
generator
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.
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
User testing
Skaakas the Holf-Orc
Skaakas the Half-Orc
Skaakas
the Half-Orc
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 Skaakas.
Edit the backstory and add a new tag and regenerate Skaakas’s backstory.
I had testers create a character named Skaakas the Half-Orc: Spell caster that primarily use a two handed battle axe.
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 Skaakas.
Edit the backstory and add a new tag and regenerate Skaakas’s backstory.
I gave the testers 3 tasks:
Figure out a class for your Skaakas.
Generate a backstory for Skaakas.
Edit the backstory and add a new tag and regenerate Skaakas’s backstory.
Chinks in the armour
Chinks in
the armour
Problem #1
Solution #1
The CTA didn’t stand out visually enough. Location was great, color wasn’t attention grabbing..
The CTA didn’t stand out visually enough. Location was great, color wasn’t attention grabbing..
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
Solution #1
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 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
Problem #2
Solution #2
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 separate type process indicator. Additionally, it didn’t match the overall site design.
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 separate type process indicator. Additionally, it didn’t match the overall site design.
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 separate type process indicator. Additionally, it didn’t match the overall site design.
Adding a separate process menu below the main menu keeps the design consistent and intuitive for the user.
Adding a separate process menu below the main menu keeps the design consistent and intuitive for the user.
Solution #2
Problem #3
Solution #3
Solution #3
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.
When you finally decide on Skaakas’s class …Ranger, the button is at the bottom of the page, a rather long page.
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.
Testers were not sure if the class was automatically selected or a confirmation was needed.
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.
Moving the Select Class button “above the fold” of the monitor made it noticeable and accessible.
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.
Placing below the brief class description added to a natural flow of events on the page.
Quests end
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..
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.
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.
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 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 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.
I would love to show this to DnD Beyond development team, I feel it would be a welcome addition to their site.
I would love to show this to DnD Beyond. I feel it would be a welcome addition to their site.
6419 mansion Blvd.
Pensauken, 08109
New Jersey (It's called pork roll!)