UX & UI DESIGN

Interactive Onboarding for Dungeons & Dragons Beyond.

  • Project Type Concept extension and redesign of existing application
  • My Role User Research, Wireframing, Prototyping, Interface Design
  • Tools Used Adobe XD, Photoshop, Illustrator, Figma, Google Sheets and Surveys

Dungeons & Dragons (D&D) is a cooperative roleplaying game, where players work together to explore a narrative adventure set in a fantasy world. This project proposes an extension and redesign of the existing D&D Beyond mobile application, with the goal of creating a more engaging and interactive onboarding experience to help ease new adventurers into the world of Dungeons & Dragons.

FEATURE OVERVIEW

Personalized and engaging onboarding to lower the barrier of entry for new adventurers.

After launching the questionnaire from the home page spotlight, the user only needs to answer 3 short questions in order to filter content for their onboarding experience based on their previous knowledge and current interests relating to game mechanics.

The core game mechanics made easy to grasp.

Once the questionnaire is completed, the user is presented with their personal onboarding guide, containing 1 to 6 different content chunks, based on how they responded to the 3 questions. These can be done in order or at choosing and can either be read through or taken in through an interactive walk-through depending on how the user likes to learn.

Play through or read through.

Playing through the guided walk-through content allows players to experience more realistic interactions as they would happen in a real session of D&D, or, If you are more of the reading type, you can quickly read through the summary of each lesson on your own pace. Whichever option you choose, the overall content you're viewing or interacting with would be for the most part the same.

PROCESS OVERVIEW

Why is it needed?

Initial Observation: Adoption in popular media.

Ever since the initial publication of D&D in 1974, the game has maintained a niche following and a carried a 'nerdy' stigma, the combination of which resulted in a overall limited growth in player-base. In the last 10 years, D&D has received a substantial amount of attention from popular media and has been featured in many well known movies and TV shows. Throughout this time, 'nerd' culture has seemingly become embraced by more mainstream culture, in large part due to positive portrait in popular media as mentioned above. Thus this stigma no longer plays a significant part in limiting the approachability and popularity of Dungeons & Dragons, and has in fact, skyrocketed its popularity over the last 4-5 years.

Stranger Things
2016

Big Bang Theory
2013

Community
2011

Google Trends of 'Dungeons & Dragons', recorded as percentage of its peek value.

Observation #2: High barrier to entry for newcomers to roleplaying games.

The latest edition of Dungeons & Dragons (5th edition) has made great efforts to make the game more approachable to new D&D players, however, the beginners guide is still over 50 pages long. Even though most of the content in the guide isn't critical to be able to play your first session, someone who is seeking a relatively easy path to getting to play their first session will likely feel overwhelmed and walk away thinking the barrier of entry is much higher than it really is.

Perceived Learning Journey for Beginner.

Ideal Learning Journey for Beginner.

The Assumption

Newcomers to Dungeons & Dragons are more likely to learn the rules and mechanics of the game from a friend who is already experienced rather than engaging with the official reading material which may seem unapproachable.

The Opportunity

How might we harness the benefits of 'learning from a friend' in order to provide an easy and engaging on-boarding experience and help ease a new adventurer into the world of Dungeons & Dragons?

Confirming our assumptions

To confirm our initial assumption and seek further insights into the topic, I created a short survey targeted at experience D&D players which was focused on exploring how they first learned about the game and what steps they took to familiarize themselves with the mechanics and prepare for their first session. I used Google Surveys to create the survey itself and handle the responses, posting it to pages and boards dedicated to Dungeons & Dragons on platforms including Facebook, Reddit, Discord, and others. Within 24hrs we had received 310 responses and due to the initial time constraint of the project, the survey was taken offline to begin working through the responses.

53%

of responders learned about the core mechanics of Dungeons & Dragons from an experienced friend.

16%

of responders went to the official website to find out more about Dungeons & Dragons after hearing about it.

40%

of responders found the existing official resources to be complex for incoming players.

Understanding the user

User Interviews

The information we gleamed from our initial survey left us with a more directed list of questions to further explore the potential pain points and opportunities throught the onboarding process of D&D.

Empathy Maps

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eleifend eget justo et tincidunt. Aenean interdum pulvinar neque at lacinia.

Needs Statements

Nunc vitae dui ex. Pellentesque congue et erat nec sodales. Donec luctus dapibus augue id placerat. Duis imperdiet mattis faucibus. Suspendisse eu sagittis arcu, sed fringilla elit. Quisque non urna dui.

User Journey

Nulla massa quam, pharetra lacinia porttitor vitae, finibus dapibus lorem. Nullam eget tellus est. Duis dapibus tellus in est ullamcorper hendrerit. Proin hendrerit odio vel tortor fringilla sollicitudin.

Personas

Integer augue metus, auctor non libero non, blandit tempus felis. Morbi ultricies lacus quis nulla euismod tempor. Nulla sagittis dictum gravida. Ut dignissim metus in metus mollis, quis imperdiet lorem posuere.

Design Process

The initial design

Integer augue metus, auctor non libero non, blandit tempus felis. Morbi ultricies lacus quis nulla euismod tempor. Nulla sagittis dictum gravida. Ut dignissim metus in metus mollis, quis imperdiet lorem posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eleifend eget justo et tincidunt. Aenean interdum pulvinar neque at lacinia.

The in-class redesign

Nunc vitae dui ex. Pellentesque congue et erat nec sodales. Donec luctus dapibus augue id placerat. Duis imperdiet mattis faucibus. Suspendisse eu sagittis arcu, sed fringilla elit. Quisque non urna dui. Integer augue metus, auctor non libero non, blandit tempus felis. Morbi ultricies lacus quis nulla euismod tempor. Nulla sagittis dictum gravida. Ut dignissim metus in metus mollis, quis imperdiet lorem posuere.

Personal re-design

Nunc vitae dui ex. Pellentesque congue et erat nec sodales. Donec luctus dapibus augue id placerat. Duis imperdiet mattis faucibus. Suspendisse eu sagittis arcu, sed fringilla elit. Quisque non urna dui. Integer augue metus, auctor non libero non, blandit tempus felis. Morbi ultricies lacus quis nulla euismod tempor. Nulla sagittis dictum gravida. Ut dignissim metus in metus mollis, quis imperdiet lorem posuere.

  • Content is undergoing updates!