GO NEXT
Overview
League of Legends (LoL) is a popular 5v5 multiplayer online battle arena (MOBA) video game developed and published by Riot Games. Players take on the role of "champions," each with unique abilities and skills, and participate in team-based matches.
LoL has a thriving esports scene, with numerous leagues, tournaments, and competitions taking place around the world. These events feature top-tier teams and players, attracting a massive global audience. The game's competitive scene offers substantial prize pools, professional contracts, and a dedicated fanbase, solidifying League of Legends as one of the most prominent esports games worldwide.
The goal of the project was to provide current rankings of all teams globally, team rankings for a given tournament, and rankings for a given list of teams. Current LoL power rankings lack comprehensive detail or data-driven justification for the teams' rankings. However, we had the opportunity to access data provided by Riot Games and AWS through Devpost's Global Power Rankings Hackathon, enabling us to provide more robust insights and evaluations while improving the overall visual design.
How might we enhance the League of Legends power rankings by utilizing the data provided by Riot Games and AWS, as obtained through Devpost's Global Power Rankings Hackathon, to offer more detailed and data-driven insights for team rankings while ensuring clarity, ease of access, and visual appeal for fans?
Contribution
UX Design Lead
UI Design
User Research
UX Writing
Team
Justin Rabe
Gabe Santos
Tools
Figma
Adobe Photoshop
Duration
1 month
Introduction
Introducing GO NEXT, a cutting-edge Global Ranking System powered by AWS, designed to definitively rank the world's top teams. Our system delves into Riot’s game data and analyzes each matchup.
From this data, we've curated the teams involved and constructed an ELO system that rewards extraordinary achievements, such as conquering high-pressure games and defeating formidable opponents. Leveraging AWS technologies like Glue for ETL, Athena for in-depth analysis, and API Gateway to share our insights with the world, GO NEXT is redefining the way we perceive and appreciate top-tier teams.
Homepage
Curious to discover the rankings of the top teams worldwide? Easily find the global rankings right on the homepage. Delve into the technical documentation, understand GO NEXT's methodology, and get acquainted with the dedicated team behind this project.
Checkbox Filter
Utilize the checkbox filter to compare various teams. NA > EU? 😉
Dropdown Menu
Witness how team ELO fluctuates in different tournaments, potentially influenced by shifts in the meta, item adjustments, or new patches.
Initial Ideas
Fun fact: We chose the team name "GO NEXT" to put even more League of Legends flair into our project, making it an enjoyable and engaging experience.
One of my teammates was eager to outline our project approach. After reading the project brief, it was easy to get the ball rolling. I started by coming up with a "How Might We" statement and conducting a complete competitive analysis.
Research
The competitive analysis for this project involves a thorough look at existing platforms that conduct power rankings in the esports and League of Legends space. By comparing their content quality, user experience, and data transparency, we wanted to identify opportunities for our project to provide an enhanced and informative platform for passionate fans of the League of Legends professional scene.
Ideation
GO NEXT needed a user-friendly and intuitive design accessible to all users. We aimed for a familiar structure, balancing it with the project's specific requirements, including global, team, and tournament rankings. We also placed great importance on optimizing the layout to create a visually captivating website that captures the essence of League of Legends and the hype of the professional scene.
I created this user persona as a tangible representation of our target audience. As I'm solely responsible for the entire UI/UX design process, I needed help with feature prioritization during the ideation phase. This user persona is a culmination of people I know who are into the LoL esports scene.
Style Guide
I made a style guide by utilizing the established League of Legends color palette and typography. In the process, I enhanced these elements with custom components for GO NEXT's Global Power Rankings website.
View Style Guide
Takeaways
This was my first non-academic hackathon. It was really fun because I got to work with one of my favorite video games, League of Legends. This project was different because I was solely responsible for the entire UI/UX process, marking my debut in collaboration with both backend and frontend developers. Ensuring a seamless handoff process to prevent any hiccups became a priority. This project offered an opportunity for improving my Figma prototyping and design skills. The next steps involves refining the website and conducting more usability testing for further improvements.
