Case Study: Roll20

The Challenge:

The site has been built piecemeal over time and users find the UI of the main gaming page to be frustrating and confusing. Many tools and features are hidden deep in menus and/or poorly labeled. Users reported becoming so frustrated with the UI of the gaming page that they looked for competitors offering a similar platform.

“Anything related to any role playing system is working well when the creativity is going, and it is working badly when the system impedes creativity.”
– user interview

I interviewed a handful of Roll20 users about their experiences with the platform. Their input reiterated that the current interface is confusing and disrupted gameplay, causing some users to seek outo other platforms or to use an awkward combination of platforms (one user described using a real-life hand-drawn map on video because working the maps in Roll20 was too difficult). 

I wrote a brief profile of two main user groups, defined by use case. To keep the project in a reasonable scope, I eventually narrowed the scop to only focus on the first of the two, the player.

The challenge, of course, is that these are all true and important to an extent, but every user in the group made different associations based on their own use patterns. Furthermore, the interface has to meet the needs of multiple types of games: one might have a deck of cards, another might use only dice, a third might require users to draw pictures. And regardless of how the tools are grouped, all use cases need a majority of the screen space to be reserved for the game play itself (the map, the tokens, the drawing space, etc.). Solving the space problem in conjunction with the information hierarchy reorganization meant reiterating many wireframes.

Setting up a new information hierarchy and wireframing the layout of the space were not successive steps, but concurrent. It took multiple drafts to determine how many top-level toolbars were appropriate without overcrowding the screen or potentially overwhelming users. How do multi-level menus open? If a user needs a window or panel to stay open for reference, while still using other tools and menus at the same time, where does that sometimes-open panel live? How should I account for tools with a few options or settings (like the ruler), versus something complex like a toolset for designing and saving maps?

Clearly the interface required easy paths to move or minimize elements, multiple top-level tools, and the capacity for both nested menu panels with many options and simple menus with few options. A general trend present in my wireframing journey was more tools taking up less space, to fewer tools with the option to expand them into more space. Much of my thinking here was driven by the question, “What would it look like for a user to use X and Y at the same time?”

Remember that my goals were to minimize user frustration and lower the UI learning curve. Good organization and information hierarchy will help a user quickly choose a path of action from among many possibilities. Good use of space and visual hierarchy will guide them to the starting point of that path. Good signposts communicate that they are in the right place for what they seek, and visual consistency reaffirms directions while minimizing distraction and confusion. It’s time to talk aesthetics.

This project is focused on the single screen where Roll20 users actually play live, virtual games together (called the “editor” on the site). But Roll20 has a lot more to offer: a marketplace for buying and selling games and accompanying assets, a wiki, community forums, an official help center, and a company blog. The blog has by far the most beautiful and consistent visual design of any part of this sprawling site, which prompted me to ask, what would it look like for the editor—the single screen that most of us use the most often—to be styled like this blog?

Visual consistency cuts down on visual confusion, so it would serve my overarching goals of minimizing user confusion to restyle the UI. I used the company blog to construct a style guide so that the main gaming page could fit into the same design system and better represent the company’s brand. The bright colors and gradients are eye-catching, but I knew I would need to keep their use minimal and discretionary, or I would reintroduce the same visual confusion I sought to eliminate. So I developed a set of grey tones that I could use for most of the interface, and relegated the fun colors to small accents or eye-catching interactive signals.

Another point of confusion identified in my initial evaluation was different icons that appeared to signify similar things, paired with indistinguishable labels. What is the difference between a journal, a library, and a compendium? When choosing icons for my newly-reorganized main toolbar, I was careful to choose icons and labels that more closely reflected the purpose of each of these three resource panels: the classic image icon for the image library, a folder for uploaded materials, and a book for the “compendium” (materials downloaded from the marketplace).

When designing menu pop-out windows, I looked at the existing menus to think about how to show or minimize more or less information, and settled on two styles that could cover a range of use cases.

I reimagined the chat window a number of times (see section on wireframing), but ultimately the existing chat functions well, it just needed a facelift to bring it in line with the brand. I used color coding, position, and different shapes of boxes to denote who was inputting the information (self or other) and what type of information (since the chat also includes dice rolls).

This project was my first experience prototyping in Figma. I first learned prototyping in Adobe XD, and learning Figma required me to start thinking in terms of nested frames: not just the look of the finished component, but its underlying structure. Given the way I wanted my toolbar, chat window, and menu options to behave, nesting components was a huge part of the learning curve.

Redesigning the main interface of Roll20 has been a complex project, and it could easily keep going through further iterations. However, through restructuring the information hierarchy, streamlining most top-level interactions into one toolbar, and creating consistency in the visual style, my redesign offers users a significant improvement over the original design, providing users with fewer initial pathways (to minimize overwhelm), clearer signposts and visual cues (consistent, familiar UI), and an organizational structure that can be customized to fit the many diverse needs of a wide range of users and their many different games.