Startup Design for Esports News and Analytics

Joe DeMaria

A BOOMING Industry; Startups Are Born

Nearing the end of 2019, esports (professional gaming) has grow to be a billion dollar industry and is one of the fastest growing audiences globally.

Credit: Newzoo

An investor with an opportunity to get a potential slice of this growth has an attractive option. Hence we see the explosive growth of esports startups all around the world; one of them being vpesports.com.


I worked for VPEsports from the end of 2017 to the beginning of 2019. During this time I was a UX Lead on a team to launch vpesports.com, an esports news website. After launching the site, I designed analytics web applications for the games Dota 2, League of Legends, and Overwatch. In this case study I want to briefly give some insight as to how the team grew vpesports.com to over 5 million views per month and the design process for a Dota 2 analytics web application.

Take a step, even if you aren’t sure it’s the right one

Sessions growth for vpesports.com

The vision that sold me on working for this company was becoming a one-stop-shop for all esports — the ESPN of gaming, and to some degree, we built the foundation for it to happen.

Launching and seeing VPEsports grow was an amazing learning experience. Here I was able to hone launching fast, iterative MVPs and experiment with digital marketing.

Our investors from China cared not so much about monetization, but audience capture. I had to steadily grow page views and user engagement each quarter to secure continued investment.

Here are a few takeaways to the success we had growing this news blog:

  • Content consistency is crucial to audience growth. As a news site we set a requirement for our writers to produce about five articles a day across 4 esports. All it takes is one article to go viral and you have a chance to capture the attention of a wide range of users. If your newer followers digest sustained content over time, they will implicitly begin to legitimize and go to your source for information.
  • Experiment with solutions to improve your metrics. One of the solutions we devised to improve our ‘time on site’ metric, was introducing an esports scoreboard ticker which can reveal the outcomes of completed games and show when future games will happen.
  • Narrow your organization’s expertise, audience, and marketing. Esports reaches to a global audience, and at first, we fell into the trap of targeting fans across all esports. We soon refined our strategy and focused on growing Dota 2 within South East Asia, marketing primarily on Facebook. Here we could target a passionate esports audience with content that converted to Facebook likes and comments. Our facebook grew to nearly 100,000 followers, primarily South East Asians, within the course of a year.
  • Interact with your audience. Respond to comments, create calls to action on controversial articles, create opportunities for fans to shine in the spotlight. These were essential into growing a passionate following.

While the team and I were growing VPEsports, I began design for a Dota 2 analytics tool for players to track their games.

Building an Analytics Tool

Design process overview

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.

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

Requirements Gathering

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

Personas and Competitive Analysis

An initial persona

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 gather information for persona creation. Our research focused our design on creating interactive views and a, ‘player snapshot’, which gives a visual summary of a Dota player.

Competitive analysis being created

Having a good idea of an attractive product for our users, we wanted to understand the competition surrounding esports analytics tools. We surveyed several direct competitor 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.

Sketch

Early analytics dashboard sketches

As a UX designer you want to always be sketching! In fact, this is something we did every day as a group in my team at VPEsports. This helps you quickly get ideas out to be 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. After some more conversations about previous projects, I began to understand they valued digital wireframes very highly.

Wireframes

Initial digital wireframes.

Translating sketches to wireframes helps you start thinking 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 view analytics websites on their Windows 10 desktop.

We quickly transferred sketches to digital wireframes to get them on 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.

Test

At this point in the process we had roughly 10 days left before a deliverable. 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 tasks 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.

Design

Rough initial experimentation of UI

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.

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

Final design in use

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 2 grows and changes.

Thank You For Reading!

Joe DeMaria

Written by

Product Designer — ⛵ —Learn more about me at joedemaria.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade