The Roll20 App: Starting Small, Thinking Big

Frances Biedenharn

Frances Biedenharn

UX Designer

It’s 2 AM on a Saturday, and you’ve just ended a spooky Call of Cthulhu game with your friends on the virtual tabletop. You exit the game and rub your tired eyes, replaying in your mind the boss encounter that wiped your entire party. It’s time to shut things down for the night.

You see a pop up. A pop up? In 2021!? That, my friend, is the Roll20 design team attempting to speak with you. “Would you be willing to take a short usability test?” we ask, somewhat sheepishly.

Two cartoon characters carry elements of a webpage, working as a team to put it together.
Would you like to take a usability test?

What you are seeing, and hopefully feeling, is our commitment to iterative, user-driven design. Iterative design puts user research and feedback at the forefront of a systematic process, and ultimately allows for rapid understanding and certainty in the building and resolution of user needs.

The Roll20 Companion app is an evolutionary product that embodies iterative design and the slogan start small, think big.

Let me give you an example. You’ll notice that the mobile app is in ‘dark mode.’ This is something that Roll20 users have been upvoting for the VTT for years, but due to the complexity of the VTT codebase, is extremely complicated to implement in our highest impact product. Instead of mimicking a design that is somewhat dated, we are using the mobile app to test dark mode for the rest of Roll20. Starting small, thinking big.

Why so dark?

Colors that are akin to ‘dark mode” make sense for Roll20. While this is not true for everyone, a vast majority of our users are playing games at night or are playing games after spending a good portion of their day straining their eyes working or gaming. We want our app to be easy on the eyes – literally – and to fit in with our users’ environs. So far, we have gotten good feedback on the look and feel of the app and feel validated in our choice to go dark. Because of that validation, the mobile team can emphatically pass off feedback to the Roll20 teams that dark mode is worth the effort, and they can prioritize appropriately.

Dark mode for the mobile app applies to four points. 1. Working remotely all day. 2. Playing in person. 3. Playing games at night. 4. The need for privacy.

Why character sheets?

You might have noticed that the app doesn’t have many features yet and that we have chosen to focus on D&D 5E character sheets. Roll20 itself has a ton of features and more importantly, an extremely diverse user base that plays with those features in a variety of ways for over 900 games. By starting with one of our most popular gaming systems, we hope to converse with a fixed portion of our users to validate the feature set that we currently have. Then, we can expand that feature set to other games.

What’s next? It’ll likely be Call of Cthulhu; we simply can’t keep those Lovecraftian horrors away from humankind any longer. Additionally, we’re going to be working with community sheet authors, publishers, and other partners to optimize their products for a mobile-sized screen. We can work together to build sheet workers that apply to our big hitters and our indie delights. This path is a hard one, but we think that this path is the most true to our mission at Roll20.

Character sheets on the mobile app apply to 4 points. 1. Folks without access to larger screens. 2. folks who are on the go. 3. Folks who want/need less stuff to lug around. 4. Folks who want to concentrate in a specific way.

So, what’s the plan going forward?

Well, that’s where iterative design comes in. We have our ears and eyes open as folks rate our app, give feedback on surveys and upvote or create new ideas on Product Board. If you take a look at our Product Board Roll20 Mobile Portal, one of our highest rated items is showing the map on your mobile device. If you voted for this feature, know that we are listening, and we are also excited about the prospect of showing the map or using the app to move your token around.

However, before we go big with the map, we are starting small with targeted tests and research to validate (or expand on!) how having the map would impact mobile app users. And as a design team, we want to take the time to research and identify features you don’t even know that you want.

Iterative design is not easy. You can Google all sorts of graphs and charts about how its a circular and efficient process with lots of neat little arrows. But iterative product design involves deep listening and understanding, proving or disproving hypothesis and adapting to changing or even clashing expectations.

Do you have a suggestion to improve Roll20? Leave a post in our Suggestions & Ideas forum!

Frances Biedenharn UX Designer

Frances Biedenharn is a UX Designer from Jackson, MS. She's worked on wearable tech and all sorts of mobile apps. She likes to play Witcher 3, Hades and Shin Megami Tensei when she's not creating chaos as a Warforged Warlock Pirate.