Roll20 Redesign
A UX/UI redesign of the Roll20 website, consolidating it, redesigning the tutorial and turning it into a mobile app concept.
Description
UI Design
Tools
UX Design
The Problem
Confusion to where the information your users are looking for sets up your experience for failure.
Roll20 is a large program with many pages that make it difficult for users to navigate to what they are trying to find and also struggles to teach new users how to use its
main functions.
Roll20 lacks mobile portability, making it less accessible to a userbase that aligns with Roll20's goals.
Figure 1. Main pages BEFORE consolidation
Goals
Redesigning Roll20 consisted of a couple goals:
Consolidating the information of the website down to fewer pages without alienating current users.
Redesigning the Roll20 tutorial to make it more user friendly.
Designing a Roll20 Mobile App allows users to access the main features of the Roll20 website at the tip of their fingers. This created a way for users to engage with the program and their play groups from wherever they are as long as they have a phone or tablet at their disposal.
User Research
Multiple users were contacted, each with different levels of experience with using Roll20.
Research Process
Interviews
During the research process I asked my participants a series of questions about their experiences with Roll20. My interviews encompassed:
-
Qualification Questions
-
Use case for Roll20
-
User experience with the program
Usability Testing
With each participant, I asked if they would be willing to perform a set of actions on the current Roll20 program, following a narrative from both perspectives of a Dungeon Master and a Player. Throughout the usability test, a timer was included to see how long it took the participant to complete the set of tasks.
Key Insights
After the interviews and ussability testing, I compiled my results on the gathered data into 3 CATEGORIES:
Role Dependency
Users who used Roll20 as a Game Master had an easier time completing the usability test than users who frequently used the program and were not game masters.
-
60% of participants failed to resize the page to match the map size in the second GM task. 66% of those participants were only players.
-
Every participant who claimed to use Roll20 as a dungeon master completed more tasks than participants who did not.
Confusion
Every user claimed that Roll20 was confusing to use in some aspect.
40% - Inexperience
80% - Too Many Pages
20% - Confusing Layout
80% of users claimed Roll20's tutorial was not effective.
60% - Unhelpful
40% - Confusing
40% - Difficult to Follow
Frustration
Some participants claimed they stopped using Roll20 for an extended period of time or entirely because the program has a learning curve that isn’t well explained for new users.
-
40% of users claimed that they stopped using Roll20 because they had difficulties learning the program. 50% of those users expressed that they stopped using Roll20 due to frustration.
-
20% of users who didn’t stop using Roll20 claimed that they almost stopped using the program because they did not understand it.
Conceptualization
I started by breaking down the Roll20 website into its main components, then worked to consolidate information into fewer pages. After, I began designing wireframes and low-fidelity elements for the redesigned website, mobile app and tutorial.
Figure 2. Main pages AFTER consolidation
Figure 4. Tutorial Tooltip Wireframe
Figure 3. Homepage Wireframe
Figure 5. Mobile Homepage Wireframe
The Solutions
Roll20 allows people to enjoy their favorite tabletop role-playing games virtually, across any distance with their friends.
Users can connect from their computer or mobile device and get playing immediately.
Roll20 Mobile
Giving access to users on a mobile scale, the Roll20 mobile app concept brings all the main bells and whistles to allow you to play games with your friends on the go.
Explore the Homepage
Roll20's new web homepage consolidates the most important information for users to interact with in an easily accessible location.
Step-by-Step Tutorial
Roll20's redesigned tutorial now takes the user step by step in learning how to use the tools at their disposal.
Tooltips
Tooltips were designed to give users information on how they can use tools they have selected.