Role: Lead UX Designer
Duration: 2 months
Tools: Figma
Why?
The goal for this project was to create a working web application for a League of Legends Global Power Ranking system using the model created by our team using esports data provided by Riot Games. Heimer’s Hackers is a hackathon team created for the Global Power Rankings Hackathon hosted through DevPost by AWS and Riot Games. For this challenge, we were tasked with creating a web application that displays the global, tournament, and team rankings of League of Legends esports teams. The design aims to create an interactive, engaging, and simple way for users to view the ranking data.
The Process
In order to begin tackling this design, I first read the documentation provided for the event and talked to my team members about the features they wanted to implement. There were three main features that our design had to output: tournament, team, and global rankings. Because of this, I ensured that there were a minimum of three pages to our web application.
Wireframes, Feedback, and Iterations
I started crafting the design by drafting paper wireframes to visualize the main pages. Once I was happy with this, I moved this design into Figma to create a digital wireframe and low-fidelity prototype. I shared this with my teammates for feedback and for a green light to continue moving forward with a high-fidelity version. Following this testing, the main feedback I received was to include the addition of a home/splash page.
For design inspiration, I began looking at the League of Legends esports site. Despite being very familiar with this website as a fan of the game, I became more focused on the color palette and font choices on the site. Following this, I wanted to create a darker design with futuristic bold text. Beyond the esports website, I used the League of Legends Worlds 2022 trophy as inspiration for our site’s color palette. Using this, I created a style guide for the web application.
Creating Search Components | Easy Navigation
Using these design choices, I created a simple high-fidelity version of our site. As there were 112 teams ranked and 43 tournaments, we wanted users to quickly find the information they were searching for. I set out to create a filter system that was intuitive and visually appealing. This design went to several iterations before our frontend team settled on utilizing the same filter system for both our tournament and team rankings. For the global rankings, our team decided to implement a search bar for users to find specific teams and their rank when stacked against all other teams.
Once we determined how our rankings would be displayed, I turned my attention back to the home page. We wanted to create a site that would grab users attention as well as invoke the feeling of the League of Legends World Championships. I created two designs for this page. The first utilized the in-game skins created by Riot Games to memorialize the World winning teams of each year. The second included photos from esports events, showcasing the arenas and players. I showed these options to my team and we ultimately decided on the latter option.
When we were happy with each portion of the design, I handed them off to our front-end team. Due to the time constraints of the project, some elements in the original design were altered to versions that could easily utilize the filters as well as utilize components from different frameworks.
Results
This web application helps us visualize the data and information modeled by our backend engineers. Due to our time constraints, the design was not heavily user tested. Therefore, the main metric of success I would monitor is the ease of access in which users can view ranking information. Our backend team would like to continue further development on our model using graph-based methods and deep learning models. To implement that in the design, I would showcase the graphical data.
Throughout this process, I learned the importance of communication within a team. While we all worked individually on many parts of this project, my designs could not have come to life without the knowledge of my team. The full website can be viewed here.
