Role: UI Design (responsive web), Iconography, Prototype Development
MetaScouter is a fully remote startup revolutionizing the competitive console videogame arena by collecting unprecedented data and providing gamer analytics. Popular online competitive games like Dota2, Starcraft 2, and League of Legends have many websites dedicated to tracking player progression, builds, and other statistics but so far these trackable metrics have not been available to those competing in older, console-based games despite a continued and thriving culture. MetaScouter is flipping this on its head with clever software able to scrub data from live game streams so that this subset of gamers will finally have hard data on their performance rather than vague ideas.
They still need their website designed and up, but because they're bootstrapped we started with a "Stream Companion," which is a little web app that allows you (and the tournament announcers/hosts) access to visualized data to remember what happened in each game and aid in talking about it. Games move fast and there's a lot going on at major tournaments, so this is also a great way to keep an eye on matches you may not be able to watch in real time. By getting something out there with events, it also gets their name in the minds of their target audience and primes for their full product.
The design is mobile-focused because a majority of the users are likely to be at the tournament or streaming the matches full-screen at home, but the web app is responsive and can also be viewed on larger devices like a computer.
Here's a completed match of 3 games. Competitive Super Smash Bros is a 1v1 game with one character per player and several "stocks" (lives) per game. The objective is to force your opponent to run out of stocks
The style inspiration put forth by the team was the power scouter from DBZ and other "futuristic" interfaces from 90s cartoons. While they definitely had some cool shapes, those were hard to use in the limited confines of a mobile screen. Instead, I combined the chunkiness and angles used in both those inspirations and the menus of the Smash games. The black and grey were originally just for the wireframe, but I started to like it once the colors came in.
Here is an in-progress match. Who will win?! I also included an instance where for some reason something may have gone wrong with the data collection, so the viewer can't click/tap in for more details but they can see the guaranteed basic character and stage information.
This is a popover modal of the game's more specific data. It was originally designed as its own page, but a modal fits better within the infinite-scroller framework. You can see the summary details still, and now additional information like badges earned (images shown above and below), a graph displaying the range at which they lose stocks in, and a scrubbing timeline of the game's major events.
The original plan was to get this pushed out by a tournament called Evo (or Evolution) at the beginning of August. I had completed my design but time was running out and the junior developer responsible for the project had a lot on his plate. I developed a quick little version with Bootstrap to help in formalizing some of the spacing and proportions, test out my images, and hopefully lend whatever help I could. It's not much (and realistically he's probably not using it at all), but if you'd like to see that the link is below. It's best viewed on a mobile device!