Interaction - Bachelors

D&D Beyond UX/UI Redesign

This project is a UX/UI redesign of the D&D Beyond desktop website focusing on improving the experience for players with ADHD. Research-based modifications have been made to simplify the style and overall layout of the website. Many of the existing features have also been redesigned and new features added to make the experience more streamlined and user-friendly.

Lara Couzens

A gallery of images showing different screens from the Figma prototype.
Dungeons and Dragons (D&D) is a complex but popular tabletop roleplaying game that is not only enjoyed by a variety of people but can also offer several benefits outside of the game such as improving social skills, increasing players’ confidence, and supporting mental health. D&D Beyond is a popular website and mobile application used as a source of information as well as a tool to help players create and manage characters as well as campaigns for D&D. However, it has been criticised by players, particularly those with ADHD, for having a cluttered user interface and having important features hidden behind submenus. Some players also noted that it is difficult to stay focused throughout a game session and D&D Beyond does not currently present any solutions to this issue. This presents an opportunities for ways to redesign and expand on D&D Beyond’s current framework. The prototype is a redesign of the D&D Beyond desktop website focusing on mitigating these pain points and making the overall experience more intuitive. Using Figma, the existing website was recreated and simplified to make the UI less overwhelming. Existing features were also modified and new features were added to address the concerns raised by users. The prototype aims to provide an experience as realistic as possible by offering an extensive variety of features users can interact with as they please and see in real-time what effects these interactions have.
A project plan was created to figure out the different stages of the project to keep on schedule. A paper prototype created to experiment with the UI, additional features, and how these would fit together cohesively. The style guide for the project maintains the existing colours, typography, button style, and iconography to keep the branding of the website recognisable. However, the containers would be changed to a more minimalistic style to make them less distracting.
Using the existing UI as a foundation, key existing features were created in Figma, making adjustments to simplify the style and layout. Design choices and modifications were made with the goal of streamlining the process involved with using various features to manage the character. Additional features were created to address specific concerns, such as D&D Beyond hiding important information behind submenus.
Hero image of the medium fidelity prototype.
Once most of the UI components were developed, I started creating simple interactions to change the states of each of the components in response to the player’s actions. For more complex inter-component interactions, I used variables and “Check/If” interactions either “On Click” or “After Delay” to manage the states of components. The goal for this project is to give the player as much agency as possible to interact with the prototype in whatever way they would like. However, there are some set intuitive user flows implemented as proof of concept.
This UX/UI redesign of the D&D Beyond desktop website aims to improve accessibility for players with ADHD and in turn increase engagement with Dungeons and Dragons. Research suggests that the experience of playing D&D can can have multiple benefits, including helping to improve social skills, increase confidence, and support the mental health of players. Because D&D Beyond is one of the most popular tools within the D&D community, it is hoped that by addressing some of the concerns of existing users, new players will be encouraged to view the website as a way to make the introductory experience of playing D&D less intimidating and overwhelming. The prototype was creating entirely within Figma using the existing desktop website as a foundation. The prototype aims to provide an experience as realistic as possible by offering an extensive variety of features and interactions which users are able to interact with at will and see in real-time how the prototype responds.

Lara Couzens

Lara is a Brisbane based UX/UI designer passionate about creating digital experiences that are helpful, seamless, and engaging. Her goal is to use her skills to help create products that benefit others and make their lives easier and more enjoyable.