Hey folks, my name is Brittany and I am the Product Design & UX Lead here at Roll20! As we move our way through 2024, you may have already seen some major user interface and user experience changes coming your way on Roll20’s different platforms.
But before we get into the good stuff, I would like to set the stage a little.
Everyone likes cake, right? (I swear, I am going somewhere with this). You can think of Roll20 as a whole birthday cake, with each of our core products being a slice of that cake. But people do not always eat cake the same way as one another. Some people prefer the cake corners to get the most icing, while others prefer to cut the middle piece first before any other part of the cake (Chaotic Evil folks, we’re looking at you).
Just like people prefer specific parts of a cake, people have a preference on how they play TTRPGs with digital tools. We have the hybrid or in-person folks using our recently introduced product Roll20 Characters, which allows you to play your characters (like your dnd character sheet) anywhere without a virtual tabletop. We also have the pure virtual folks who play their games on the Roll20 Tabletop, which continues to receive user experience improvements from our redesign efforts and performance improvements brought in by Jumpgate. Additionally, we also are working on Beacon, which will help community sheet developers write character sheets on Roll20. Our products represent different parts of a ‘cake’ and the icing on top of this cake are the new designs for the various character sheets we support.
You may have seen a previous blog post about how we redesigned our Character Builder and Sheet System, which featured the Marvel Multiverse: RPG game system. Today, myself and the rest of the design team are going to build upon that by talking about and showing you the various products that are coming down the pipeline. In this post, you will find everything from design previews to testing data. Our aim is to help give you some insight into how we measure whether a design goes forward to development or not. We want to show you how we bake our ‘cake’.
Overview of Research, Design, & Testing Practices with Brittany
At Roll20, all of our design ideas go through a process to determine whether or not the design is worth building upon. In an ideal scenario, the product team comes to the design team with a goal that we (Roll20) would like to hit with an existing or brand new product. Together, we define the following items around it:
- Where are we? Which is where we discuss the business problems and who our users are.
- How do we think we will get there? This is where we discuss the possible solutions to our business problem.
- Where do we want to go? During this step, we discuss the possible business outcomes, user outcomes, and benefits of our possible solutions to the problem.
- And finally, how will we find out we are right? This is where we come up with hypotheses, our assumptions, and the experiments we want to run (in this case, designs) to validate our approach to solving the original problem.
Once we answer these questions, design goes off and creates prototypes of which we test against real Roll20 users, just like you! We do this to make sure that we are not only wasting the development team’s time with unvalidated ideas, but more importantly, your time with products that you never wanted in the first place. When a design is validated by our users, we move it through to development where you all get to play with it.
Alright, I’ve hogged this blog post enough. It’s time to turn it over to Analyn, Ben, and Frances to talk about the exciting projects the design team has been working on.
Reimagining the D&D 5E Character Builder with Ben, Senior Technical Product Designer
When we began the initial redesign of our Dungeons & Dragons Character builder, we had 2 major goals in mind. The first was to create an experience both new and old players could feel comfortable with and empowered to use. DnD can be daunting for any new player and our goal was to make sure that as younger players approach the builder that we are providing them with an experience that makes them want to learn. As players progress through creating a character, it is easy to feel overwhelmed with the amount of choices that can be presented. Our new designs allowed us to properly segment information and organize choices accordingly to assist in the digestion of information. Our testing showed this greatly improved player’s experience. Something I would like to highlight is how you choose your skills. Many choices can allow these options to stack up and putting it all into one clean interface greatly helps when dealing with common missteps when selecting skills.
Our second major goal was a thematic overhaul. The world of DnD is full of mystery and wonder. Many of us at Roll20 enjoy the game and know the magic that adventures in that world bring to us and our friends. Making your Roll20 character sheet is the start of that journey. For us, that meant capturing that flavor during that journey. These types of goals always become balancing acts to make sure we can be as creative as possible, but preserving the usability of the builder remains the most important thing. After thorough testing, user feedback proved we delivered on our goal of balancing between strong DnD themes while preserving usability. Many users specifically cited a preference to our new design over competition due to the visual appeal.
Designs
Building the Foundation of the Pathfinder 2E Builder with Analyn, Product Designer
The Dungeons & Dragons Character sheet also shared the same goals as the Dungeons & Dragons Character builder. We started with validating the layout of the sheet first. The structure was imperative to navigating through the sheet during game time. Therefore, we had to analyze each section like Hit Points, Ability Scores, Skills etc. and group/rearrange them based on relevance and interaction frequency. This hierarchy based analysis became our blueprint, where we iterated and tested each design. During our tests, we gathered information and metrics on direct success, time on tasks, and misclicks of certain tasks. We also conducted AB tests (allow users to walk through two options of layouts and collect feedback on which design was preferred and why they preferred it.)
Once the layout was solidified, we were able to go into the sections in greater detail and with better visual appeal. Sections had multiple actions, like reading compendium information, managing or adjusting stats, or making a roll. With all these different options, we strategically designed and placed elements to make sure users understood and identified those actions as easily as possible – and this went through another set of iterations and testing.
As with the current Dungeons & Dragons layout, there’s a lot of information to parse at one time, and it can be intimidating. The redesign of the character sheet aimed to create a more intuitive experience, which was validated through testing beginner, intermediate, and advanced users.
Designs
Ice Storms, Explosions, Acid Splashes, oh my… with Frances, Senior Product Designer
The idea of FX appeals to many of our users- players and GMs – as it adds immersion, fun, and visual interest. Folks’ imaginations go wild when they are asked about FX, they start to reference spells, weather overlays, auras, and even sounds and general ‘vibes.’ In fact, in open question survey questions, the usual quick one-line responses were often instead paragraphs of lists of cool fx requests- everything from ice knives to blinking eyeballs to cthulhu–esque looping tentacle animations. (Oh, and a fair share of folks who just start yelling “fireball!”)
Early on in the research/information gathering process, the team circled the idea of laying the groundwork for multiple types of effects, not just particle effects. Particle effects do a really great job at on-demand pizzaz or automated flair, but aren’t the solution for, say, blinking eyeballs, for instance. With our jumpgate initiative, our core effects engine changed, so we were able to identify a couple of additional effect types that we wanted to go ahead and plan for like overlay rain or snow. We decided to break out other types of effects that could loop into the category of ‘animations,’ and focus on getting particle effects up to (and better than) parity while focusing on a kinesthetic and visual experience.
Because our FX tool on the legacy tabletop experienced lag, low quality, a confusing interface and excluded the free user tier, I could not always use past data on this existing feature to inform decisions going forward. Harcore FX users actually bypass the dropdown fx user interface to show FX with macros, which is awesome, but exceptionally hard for me to track and proved squirrelly for quantitative investigation. Therefore, I had to lean heavily on user interviews and qualitative data to inform our user stories, and got the nod from the team that my designs and implementations might skew a bit towards the experimental. We agreed we can observe how people actually use FX as we roll it out, versus guess based on how they say they will use it. We are staying light on our feet with this one, so that we can work quickly and respond quickly.
Designs
This is just a small taste of what we plan to do this year. 2024 is the year of design at Roll20. We plan to release tons of user experience and user interface improvements across all of our products. With the help of collective feedback from users just like you, we believe we are baking the greatest cake to date and we can’t wait for you to share it with all your friends and family.