The purpose of this project was to create a streaming app. While we had many ideas we ended up on a topic that was personal. "League of Legends" is a competitive online game created by Riot Games. We found that while there are many third-party services that would stream these tournaments, there is no dedicated app for the League of Legends fan base.
Starting with the large amount of information that a game can provide, from it's players, teams and the many games that are played for each tournament was going to be overwhelming. We ended up looking towards sports apps as this is the closest reference point and would be a great baseline for how we should display information.
As passionate fans of the game, we saw the passion and dedication the game has gone through. While studying these choices, we got to admire the many colour choices and user designs. We believe the app we create is missing a lot of key aspects of the game, however for the time limit we were given it allowed us to understand the importance of simplifying information, following a visual guide line and creating a cohesive user flow for the designated audience.
Completed with Nicole Baena
Used: Adobe Illustrator & XD
Disclaimer: All assets pulled from League of Legends belong to Riot Games, as well as visuals for appropriate E-Sports teams and players. This was a case study and a design exercise for Humber College.
Starting with paper prototypes that allow us to physically move around the project pieces, we ended up adding and cutting a fair amount of screens. Testing the paper prototypes on a few colleagues with and without knowledge of the game, we ended up moving a lot of how the application flowed and ended up adding a spoilers warning.
While "League of Legends" has started since 2009, their game has gone through a mass amount of visual changes. Reviewing their most recent design changes; using references from their in-game client, mobile chat, website and design philosophy reference, we started to understand Riot Games' design philosophy. We took the colour scheme, the website's win or lose indicators and the game information prioritization to create how most of the visuals were used.