Dungeons & Dragons (D&D) is a cooperative role playing game, where players explore a collaborative narrative set in a fantasy world. The current D&D app, called D&D Beyond is a compendium containing all downloadable versions of the official manuals and resources of the game. We designed an extension to the existing D&D Beyond mobile application that teaches rules and gameplay through easily digestible and interactive lessons.
ROLE- Art Direction/ Visual Design / User Research / Wire framing
TEAM- Jessie Li/ Janet Ouyang/ Momchil Kutev/ Sandy Bagga/ Alireza Mogharrab
PROGRAMS- Illustrator/ Figma/ Photoshop/ Protopie/ Premiere Pro
A survey was posted on various online platforms, including Reddit, D&D Facebook group, Discord servers, and D&D forums. A total of 310 responses were recorded. Only a few of those directly went to the official site to learn more about D&D.
A user profile was crafted based off of the research and data we collected over the days. From there, we crafted a brief journey framework; specifying the experiences, needs, and pain points that would happen as he finds out more about D&D. Much of the stress stemmed from the "Enter" phase, which caused majority of the pain points within the "Engage".
For my personal redesign, I took the general content from the wireframes and made new mockups; disregarding the card like style made previously. Branding wise, I kept and amplified the paper like style we had initially, while also making it more illustration heavy.
The current landing page for the D&D Beyond app has been changed to fit a section for the interactive tutorial module. A title for “Resources” has also been added to give a better context to the user what they’re seeing when they first enter the app. Elements such as the navigation bar have also been redesigned to fit the branding of the game more.
The follow screens are the result of a revisited and individually redesigned version of our original solution. The learning experience starts and appears at the top of the landing screen to show new adventurers where to start. It includes a call to action to take a quick 3-question assessment to get a custom Dungeons & Dragons learning module. A progress bar will also be added based on how many modules they have completed.
The app assesses how familiar a newcomer might be with role playing and gaming, and why specifically they’re interested in learning more about D&D. Information pop ups are also added in case newcomers aren’t familiar with the words. The check boxes were redesigned to fit in with proper interaction guidelines. The images were removed as well; as they didn’t offer any support to the questions being asked. In the end, I opted to have a more typography heavy layout which emphasized the questions being asked.
Cognitive overhead is reduced through a customized lesson plan that highlights modules relevant to the adventurer's interest, so they can focus on learning what they want to, or don't already know. The sizing of the cards were changed for a more obvious hiearchy; and enforces the “illustration heavy” style of the app.
Clicking on a module will give newcomers a brief introduction of content they can explore, and mechanics they can learn from. An interactive tutorial and a lesson overview are given as options; allowing newcomers to choose their preference. Both are organized by the type of mechanics taught in the module. This section was redesigned to fit more information in a clearer manner. Rather than having a pop up of the information, everything was fitted into a single screen with all the basic information at the top. To take into account longer lessons, checkpoints for the interactive tutorial have also been added for ease of access. Both lesson overview and interactive tutorial details can be seen within the page; and doesn't require the player to go to a different page like in the previous design.
The adventurer receives a syllabus of all the learning points in each lesson. The information is broken up with graphics inspired by the official materials, to help create a one-to-one connection. In the redesign, the navigation bar was removed to make the content feel less cluttered.
The interactive tutorial emulates the storytelling freedom and fantasy world building from a real D&D session. Newcomers can choose dialogue options, make choices, and learn about mechanics in an immersive way. A lesson overview icon has also been added for a quick recap of the content if the newcomer chooses so. As for the redesign, a dark gradient replaces the previous white card look in the tutorial. The dark lowered opacity helps with the immersion of the tutorial; and blends in better than with the bright contrast of the white cards.
.jpg)
A web variation was also considered to allow players to complete these tutorials online at home. The web variant is also to be housed on the D&D Beyond website; being advertised to newcomers on the site.
Moving forward, various types of lessons can be implemented and categorized into different modules; mixing and matching various mechanics and levels of difficulty. More complex game play elements can also be included, giving the player a better coverage of the content from the guide book.
Challenges fell on scope. There was trouble narrowing down which target audience, touchpoint and channel we would focus given our research and time frame of 2 weeks. The typical online manuals, content generators and in-session sources were also hard to avoid when coming up with ideas. I had to push myself to think outside the box and question how else we could help beginners start or attend a session.
In order to design for an experience, becoming an expert quickly is key. The game mechanics, social platforms and resources D&D has were all examined and digested to provide full context, and were important for designing the solution. Following this, it is also important to support your design decisions with research. Having surveys, tests, and data to back up why something was created or changed makes it easier to prove your point.
