UX Design for Esports Analytics

A complete Dota 2 analytics user experience for players at all skill levels. We focused on designing usable, attractive, and interactive elements to engage a new population of Dota 2 players. This project was completed in the course of one month for VPGame.

Overview

Dota 2 is an Esport which attracts players from all corners of the world to compete as a team of 5. The game holds dozens of tournaments each year with prize pools that can be as much as $25 million for one tournament! Enthusiasts of the game use Dota 2 analytics websites to track their game statistics and identify information relevant to helping them improve.


VPGame wanted to break into the Dota 2 analytics market, attracting players from different regions and skill levels. There are currently several Dota 2 analytics tools available, with only a few capturing majority of the market share. Our goal was to create an engaing user experience that would entice players to try our tool.

UX Process

Figure 1. Design process overview.

Acting as the product lead, I drove the UX process for our team of three: constant communication, leading UX research, being a mentor, sketching, designing interfaces, guerilla usability testing, and UI design.

Understand

Requirements Gathering

We began our project by doing stakeholder interviews to get a complete sense of who our stakeholders are and their expectations for this project. This set a precedent where we lay out our plan and the people invested in the product know what to expect; there are no surprises when we deliver milestones throughout our projects. We also made an effort to reach out to our development team to start building chemistry and understanding how they expect to receive designs and what works for them. Understanding both the business and engineering constraints and getting everyone on the same page is essential to starting a successful project.

Personas

Considering we only had one month to give a completely designed system, we had to be FAST with our user research. We utilized a survey and user interviews to generate information to create a persona detailing who are target users are, their wants, and their needs. Our research on Dota 2 players helped focus our design around creating an interactive analytics tool and something we call a player snapshot which quickly gives a visual data summary of who a player is in the game.

Figure 2. An example of one of our initial personas.

Research

Competitive Analysis

Having a good idea of the ideal product for our business, we wanted to understand the product landscape surrounding esports analytics tools. We surveyed several direct competitors tools and a few indirect tools (traditional sports analytics) to get a better idea of what the target market is currently using. This is extremely helpful in seeing what is most successful for an intended audience and generating questions surrounding the pain points of current usage.

Figure 3. Screenshot of a competitive analysis being created.

Sketch

As a UX designer you want to always be sketching! In fact, this is something we do every day as a group in my team at VPGame. This helps you quickly get ideas out and shared with everybody around you. For this project in particular, we utilized the Bill Buxton 10×10 method to get our most important page underway.

As I gained experience in my role, I started to understand that while I saw sketching as foundation to UX Design, my stakeholders did not. I needed to quickly adjust my strategy to rally my stakeholders around me as a project lead and boost their confidence. After some more conversations about some of their previous projects, I began to understand they valued digital wireframes very highly.

Figure 4. Early Analytics Dashboard Sketches.

Design

Wireframes

Translating sketches to wireframes helps you start to think about how you can adapt ideas to the constraints of what devices your users have. In our case, our primary users were young males who love to game and generally view analytics on their Windows 10 desktop.

We were able to quickly transfer our sketches to digital wireframes and get them onto the screens of our stakeholders. This gave them further confidence and another ‘buy-in’ to where the project was going. Now we wanted to ensure our users would get an experience that they found easy to use and would enjoy.

Figure 4. Initial Digital Wireframes.

Test

At this point in the process we had roughly 10 days left. We decided that some usability testing was better than nothing. We brought in a convenience sample of 3 Dota players to go through a usability test of our digital prototype. Most of our users were able to complete each task, but a few in particular challenged our participants. Critical pain points led to a new design solution. Our largest finding came forth when debriefing with participants. What we found was more of a foundational revelation in the data we were showing. Our users wanted to see their lifetime stats for their entire Dota 2 career and we co-designed a few ways to show this information.

0 = task failure, 1 = task completed with difficulty, 2 = task completed with ease.

Design

Closing in on the last week before our deadline, we needed to ship this product and it needed to look good. After defining our typography and color palette, we went full force into designing our first iterations of our analytics tool.

Figure 6. First iteration of Dota Analytics design.

After several reviews and presentations, we arrived at something our users and our stakeholders were ultimately satisfied with.

Figure 6. Final design iteration.

Results

Ultimately the Chinese team is using this tool to evaluate up and coming Dota 2 players. The team is looking to test and improve the tool as Dota grows and changes.

Date December, 2016
Type UX Design, UI Design, Analytics
Share

Contact

Are you working on something great? I would love to help make it happen! The best way to reach me is through email. Just do it.