Designed a Live Stats App Concept for League Esports

https://i.gyazo.com/8a09fcd7700d4dc68ccd43a9aa1113da.jpg

Hey wanted to do a full write up on this project I've been working on for the last month or so. Background I really enjoy the live stats section on lol esports site but have always been frustrated with it at the same time.

https://i.gyazo.com/dc98f7268d927cde52968aa726620482.png

##Problem: Full-screen vs Live Stats When watching a game I am in a constant conflict between watching the game full screen and watching the game with live stats. Having live stats makes it easier to see who is winning their lane and by how much. At the same time, watching a game full-screen is simply more enjoyable.

##Solution: Mobile In my mind, the solution has always been to make the live stats section viewable on mobile. I think this could be done through an app or through a dedicated web page that is mobile responsive. I chose to explore an app solution because I believe there is a lot of functionality that an app allows for. As well, it also provides for some cool opportunities.

https://i.gyazo.com/6067e873f4cc9532976b4beddc05cc7c.jpg

##Opportunity: Clearing up Valuable Real-estate A lot of the current UI elements that provide stats and champion info take up a large section of the spectator screen. If you actually look at the information most of the time, you’ll need to squint to make out details. I would also guess that the frequency at which these stats are looked at by viewers is low.

Often the information shown in the UI is more effective when your able compare it between the two opposing players. For example, knowing if one top laner has Teleport and their opposing opponent doesn’t, showcases an advantage that one team has over the other. In the current interface, you would need to look from one side of the screen to the other. Making it hard to compare. Removing these UI elements from the live game feed and making it optional is the best solution. Your still allowing spectators to engage with the information they want, but not forcing them if they don’t.

##It also makes Financial Sense The extra space allows for better sponsorship deals because there is less noise on screen and more room for larger display banners. This is important because League’s esports is currently not very profitable for its participating teams. Although the industry has grown very steadly this has mostly been driven by outside investment. Long term, it will be important for Riot and the league to look to improve their revenue streams and I think this is one way to do it.

https://media.giphy.com/media/DBydjX0ovgjzkSiHUD/giphy.gif

##The Design The main goal when designing this project was to provide valuable information to users at a glance. I wanted users to immediately know who is winning and by how much. To accommodate this, I highlighted the center section which shows the gold difference between two opposing players. I also made it easy to tell which side is winning their lane by changing each section to either red or blue to indicate the winning side.

https://i.gyazo.com/19493c21bbccef926de4bb01c1fecfe2.jpg

A bigger problem I had with the design was figuring out how much in-depth info/stats I should include. I wanted to give users as much information on the main screen as possible without having them click further into the app. At the same time, I was afraid I might be including too much info. Whenever I have doubts I like this I like to use research to help me make the right decision. In this case, I created a survey, I wasn’t able to get as much data as I would like but what I did get was interesting. Users actually wanted more info and felt more than fine with the amount of information that was already there.

##Overall, I Enjoyed Making This Project It has been really cool delving into the details and trying to create a great solution. One of the reasons I got into esports was because of how it felt like the wild wild west of media entertainment. No one really knows how to best do esports, and that's what makes it so compelling.

You can check out the prototype here!