Roll20: A flexible, shared virtual tabletop web platform with video, chat and archival game information. Play over 400+ Tabletop and RPG games anywhere and share them with anyone.
Before // After
“Overall the new design seems sleek and easier to read, intuitive, cleaner.”
What is Roll20?
Roll20.net allows users to share a very flexible “virtual tabletop” (seen here) with tokens to represent characters, maps to engage users visually and provide an immersive experience, a chat space, video/audio, and the tools to play a TTRPG like dice, cards and, importantly, connections to licensed content for gameplay.
Its important to note that Roll20 is “game agnostic” by culture. Even though Dungeons and Dragons (5e) is the most popular game, games come and go, as do licenses and partnerships. Roll20 has over 400 games and likes it that way.
TLDR;
After a significant uptick in user acquisition- due in large part to the social ramifications of Covid19- Roll20 needs to retain their old and new users in the extremely competitive “virtual table-top role playing game” (TTRPG) space.
Roll20 starts to meet stiff competition and ease of use becomes more important than ever. In a dev-led company, how can a designer make a difference?
A poor first impression
After extensive research, the user experience team determined that our toolbar was not only difficult to use for new, inexperienced players, but also marked our virtual tabletop as dated and untouched since its creation.
TLDR; The toolbar was the perfect place to introduce designer-lead product thinking to the company and to users.
Ye olde toolbar
Ye olde toolbar IA
Problems: GMs, the leader of the game, had a misclick rate of 63% when moving from layer to layer.
Context: The layer system is integral to the game setup, performing last minute role-play based changes, and creating the specific game space for the players to interact with.
Summary: We went from a time on task rate of 55.8 seconds from the current VTT to 16 seconds of the new VTT. Average success rate was increased from 13% to a whopping 94%!
Misclicks decreased from 63% to 25% using the new design.
Launching the designs in Beta
“I really like the new toolbar :+1: Especially the bottom left part with the map layers. This makes my life as a GM much easier. Now I don’t have to go through 5 buttons (exaggerated) to switch layers. Very well done :heart:”
“I had a chance to try out the VTT adjustments that have been made, and I want to say I’m very impressed with how it functions. It feels a lot more streamlined, the tasks bar is more defined and feels a lot more cleaned and polished. I just wanted to say job well done and thanks for the effort you’ve put into it.”
Design changes:
Modern UI
Exposed Layer system for quick-switching and mental model planting
Tooltips upon hover
Tooltips with shortcut keys
Accessibility-friendly touch areas (minimum 44px)
Clear iconography
Feature additions:
Surfacing “preview as player” functionality
Additional measure tool options for spell and area of effect roleplay
Zoom to fit canvas
Dominant Color usage for backgrounds
