In March, Roll20 enabled dark mode within our Virtual Tabletop, making progress on the top-voted suggestion on our forum. We are excited to announce that we’ll soon be rolling out a dark mode option for the rest of Roll20!
Starting next week, you can set color mode preferences on our main site through your Account Settings. The option to enable dark mode not only on the VTT, but on the rest of the site, helps get us closer to our goal of a single, universal design throughout Roll20 with user-facing options for comfort and accessibility.
If you enable dark mode, you won’t see it on every page – for now, our blog and some compendium pages will have different formatting, depending on publisher choice. We are working with a group of publishers to enhance formatting over time. There may sometimes be conflicts with our WYSIWYG editor on the forums and in other situations where users copy and paste text.
The Roll20 Design Process
Our systematic design process puts user research and feedback in the driver’s seat. We start from our own experiences playing on Roll20 and design intuition, but the lion’s share of our process is guided by quantitative and qualitative metrics to validate design concepts. Additionally, we would be designing in the dark if it wasn’t for following certain metric threshold standards to measure the usability of our designs. Quantitative metrics include measurements like Time on Task (how long it takes to get from point A to point B), and task completion rates. Some qualitative metrics include user interviews, open text feedback, and customer satisfaction questions on different design versions. We also listen to your feedback on social media and on our forums, particularly on our Suggestions & Ideas forum.
We utilized our mobile app to execute user testing before rolling dark mode out for the rest of Roll20. We landed on a design with positive user feedback which validated our designs (after some tweaking!), and here is a preview:
We’re also following widely accepted accessibility standards for web development, consistently aiming to improve our core experience for most users of our site. Our core platform colors before weren’t accessible, and those we use in dark mode are, helping those with visual impairment or sensitivity with optimal contrast. We recently made tweaks to the light color mode and used Customer Satisfaction surveys to measure the results. The outcome of the survey showed that about 20% percent of the population did not notice the design changes; of those who did, 66% reacted very favorably, and an additional 22% were neutral to the changes.
Leveling Up With Every Release and Iterative Design
In her previous post, our Product Design Lead Brittany Vick addressed Roll20’s vision toward making our products and designs welcoming for every user. The dark mode release across the site is a big step toward making our site more accessible and standardized. And, due to the complexity of our codebase, we acknowledge that opportunities for improvement will continue to exist, which we’ll tackle iteratively and incrementally.
Universal design is a marathon, not a sprint.
We will continue to evolve Roll20’s design and UX using your feedback.