Hey folks, my name is Brittany and I am a Senior Product Design Manager here at Roll20! You may have heard from me previously where I talked about how the design team validates designs. We’re in the middle of an amazing Compendium Listings redesign effort to make your D&D 2024 experience the best it possibly can be on Roll20.
Unlike previous posts where I show the designs and testing data that went along with them, I am going to show you what it means to think as a Product Designer and how that applies to the digital TTRPG space.
So Adventurer, are you ready to take a deep dive into the mind of a Product Designer at Roll20? Then keep on reading!
Defining Goals
First off, we had to define what we wanted out of this new experience for the Compendium Listings redesign. Based off preliminary user research, we knew that our users had issues with these top things:
- Load Times
- Information Overload
- Outdated Look and Feel
- Needs to be able to scale for possible additional features
D&D Library Redesign
As part of our research, we found that we also needed to do a bit of an uplift on the D&D Library, which is the page before you go to a listings page. This was essential to improve the connected experience between people looking at their D&D content and choosing a list to look at. For those who need a refresher on how these two are connected, I have drafted out the small user flow below:
- User navigates to “Compendium” in the main Roll20 navigation (not redesigned as of yet)
- User chooses the Dungeons and Dragons game system (not redesigned as of yet)
- Users land on the D&D Library
- User chooses a Listing category, which consists of:
- Spells
- Monsters
- Items
- Feats
- Classes
- Species
- Backgrounds
- User lands on one of the Listings pages
With all that being said, let’s get into the mind of a Product Designer!
What you see in the images above is our current D&D Library experience. As you can see, there are many reasons why this design is such a poor experience. Some issues we see are:
- Title and search bar of the page pushes important content down
- Exhaustive lists of links, which causes readers to drop off
- It looks nothing like Dungeons and Dragons
So, we decided to do our best with the limited time we had on this project and create a vastly improved user experience and visual design, while tackling the main problems areas you can see above.
What you see above is the new D&D Library experience that is currently being redesigned. I want to clarify that this design is currently a work in progress and is subject to change, but this is the direction Roll20 is heading! Based off the problem areas we defined off of the old design, we decided to focus our changes on the following areas:
- Create a navigation that sticks and simplifies its look and feel. This would prevent the content from being pushed down like it was before.
- Visually enhance D&D Listings by making them call-to-action buttons to stand out easier to our users. In other words, we turned the links into attractive cards so people want to select them!
- Turn long lists of links (such as the Publisher section) into a tab structure, where the user can select the Publisher they want to see and their content. This would eliminate the long scrolling that our old experience has.
D&D Listings Pages Redesign
Now that you have seen the new experience of the D&D Library (which ties directly into the Listings pages), let’s get into the Listings redesign.
What you see above is our current Listings experience. Right away, I am sure you can identify some of the main issues we currently have with this version, but let’s list them out together. Some of the biggest problems with this page are:
- There is no way to switch to a different list type when on this page (from “Spells” to “Monsters” as an example)
- Load times are too long and can sometimes not load
- Just like the old D&D Library design, the title of the page and the search push down the main content
- We have a ton of filters just out in the open, which overload the user with too much information and causes confusion
- There are too many columns in the table section
- It does not look like Dungeons and Dragons
What you see above is the new D&D Listings experience that is currently being redesigned. I want to clarify that this design is currently a work in progress and is subject to change, but this is the direction Roll20 is heading! Based off the problem areas we defined in the old design, we decided to focus our changes on the following areas:
- Create a navigation that sticks and simplifies its look and feel. This would prevent the content from being pushed down like it was before.
- Place Listings card call-to-actions within the same space so users can easily flip between categories.
- Elevate the top 3 level filters that were determined by user research by bringing them out from behind the filter drawer
- Create a filter drawer that pushes content over and is hidden by default. This prevents the main content from being pushed down.
- Paginate the lists so that load times are greatly improved.
User Feedback
Here are just a few snapshots of feedback we have received from our users (just like you) on some early tests we’ve done on the new designs you saw above.
This year we have a full stack of exciting projects releasing that support D&D 2024, such as the new character sheet, character builder, and compendium reading experience. In addition to this mountain of new and exciting stuff, we will have a greatly improved the D&D Library and Listings experience.
As always, the design team at Roll20 is working diligently to bring the best experience possible to your games so that you can focus more on having fun and experiencing less friction.
May your rolls be lucky and your treasures be legendary. Until next time!