January 2020 - February 2020
UX Designer
Figma
The Project
How might we make the League+ app applicable to all games by Riot and improve upon the existing features?
Overview
Riot Games is making the "s" in Games finally come true. As a part of having a soon to be catalogue of games, I wanted to recreate their League+ app as a central hub for all of Riot's games.
With many video game companies having an app that is for all of their own games, it is likely the Riot will follow suit. Industry leading companies such as Steam and Blizzard have an app that allows users to essentially interact with the community while away from their computers. I believe that Riot has the potential to create an upscale version of the competitors' by incorporating aspects of League+ into their own.
League+ is an app for the game League of Legends. It allows users to catch up on news, watch live streams, and of course, message friends. While this is already a great idea for an app, being able to incorporate their upcoming games could make for a more desirable app.
Preliminary Research
To start off, I conducted research on a small sample group of 14 League+ users which consisted of young adults/students. The research consisted of a survey with 5 simple questions to determine what they liked and what they didn't like about the current app.
Of the 14 respondents, 13/14 of the users used the app for messaging friends when they are away from their computer. When asked what they would like to see in the app, the most popular answer was to integrate a way to spectate games of their friends from their mobile device. When asked what they would change about the app in general, the majority of the answers were along the lines of the app being unintuitive and clunky. For the final question, I wanted to see if there would be interest in a similar app but for all the games by Riot instead. 6/14 of users said maybe, 3/14 said likely, and 4/14 said they were extremely likely to use it.
Market Analysis
I also took a look at apps that would serve the same function as the app I was to design. From these similar apps, I was able to notice similarities between them which gave me inspiration towards how the my own app will turn out.
These are the changes the app would need to please the user.
1. Putting an emphasis on interaction with friends through the app by improving the clarity of the messaging experience and adding a spectate button
2. Give the app a new look by refreshing the UI and making it more appealing to a wider audience
3. Be applicable for other games by Riot
4. Create a clearer interaction flow to get users to use more of the app's features
I then created the information architecture that would align with my changes listed above.
Define
With the information collected from my research, I created a user persona that I will design for.
Research
To get a better understanding of the user goals and pain points, I conducted an interview with 6 candidates to ask questions about the current app. Users were content with the user flow and claimed it fulfilled their purposes. This meant to me that I should not interfere with the information architecture too much, except for removing the "Videos" tab as users claimed it to be nonimportant. Some users liked that it was a dark themed app and some did not, this told me that I should design a dark mode option. When asked what they think someone would use this app for, all candidates mentioned it was useful for people that want to message friends or catch up on news when they are away from the computer.
Develop
The next step was to start designing. I went straight into Figma to create a low fidelity mockup of the app.
This is the current League+ app which is specifically only for the game League of Legends. The new app aims to take away the notion that you are only able to receive League of Legends content.
To design the high fidelity mockups of the new app, I studied Riot's design language from their colours and fonts to their buttons. I took inspiration from their main website and combined it with aspects of the League+ app.
The new app:
1. Keeps the user flow of the app similar while improving the clarity on the mainly used functions such as messaging.
2. The ability to filter, select a game, and search in many pages so users can quickly get what they need.
3. Decluttered "News" screen screen by moving the "Streams" tab to its own screen and removing infrequently used buttons such as the "Videos" tab.
4. UI refreshed to bring a new look that doesn't give the impression that it is only for League of Legends.
Deliver
With the new app complete, I did another interview with the same candidates to find out what they thought. Users liked how the navigation was similar to the League+ app which makes the transition smooth. They also claimed that tasks in the app became easier because of the search and filter options.
To ensure that users would still be able to complete the most used action in the app, I asked them to attempt to message a friend to determine if there was any difficulties. All users found the task simple and more focused since it was in the middle of the action bar. The next task was to see how many of the users would utilize the search bar and/or filter button in the "News" tab. I asked users to find the most recent patch notes for League of Legends, and every user immediately went to the search bar, except for one user that wanted to filter the news by game and type of news.
Check out the prototype of the final product (light mode) here: https://invis.io/8Z110F5C6NBC#/452126735_Home
This is my favourite project to date because I was entirely in control of the ideation and processes which allowed me to explore and learn new design styles. Not to mention that I am also very passionate about this industry!
This project showed that although UI can make an app more appealing, digging in and finding out people's habits will prove to be more influential in making a successful project. Ideally, I should have gotten a larger research sample to further back up my basis for my concept. That way I can truly say that the app is more user friendly for the entire player base.
