Role
User Interview/Research/Testing, UX/UI Design, Wireframing, Prototyping, Inclusive Design
Tools
Figma, Photoshop, Illustrator
Timeline
Jun 2024 -Oct 2024
(5 Months)
Problem
League of Legends is one of the most popular video games worldwide, boasting millions of players. While numerous platforms allow players to track their gameplay, these tools often focus solely on numbers, failing to provide actionable insights for improvement. This can leave players, especially newcomers, feeling overwhelmed or confused by the sheer volume of data and analytics presented. Additionally, many of these platforms offer the same repetitive and unhelpful information, adding little value to the player experience.
Solution
Offer personalized gameplay advice tailored to the player's lane and five key pillars of the laning phase.
Provide detailed analytics, data, and stats similar to other League of Legends trackers.
Redesign and enhance the current website layout while integrating additional features.
Website sketches using the “Crazy 8’s method”
Sketches shown below: Player Overview page, Played Champions page, Live Game page, Match Recap/Improvement page
Low-Fidelity Wireframe
An initial wireframe showcasing how players can search for their in-game username and access their match history. The design includes options to view their current live game and their most-played champions. By selecting a specific match, players can explore detailed statistics with actionable insights to help them improve.
High Fidelity Prototype
Player Overview
After searching for their in-game name, players are directed to their overview page. This page displays their solo and flex queue ranks, along with champion stats in a dedicated column. On the right, their match history is presented, providing quick summaries of each game.
Live Game
On the live game page, players can view detailed stats for both teammates and opponents in their current match, along with game predictions and champion bans.
Landing/Search Page
The landing page is the first thing players see upon visiting the website, featuring a prominently displayed search bar. This search bar is the centerpiece, allowing players to select their game region and search for their profile.
Champions
Players can access additional champion stats by clicking the "See More" button or navigating to the dedicated tab beneath the player card. This feature provides a deeper dive into stats for a broader range of champions.
Pillars
When players select a match from the overview, they are directed to the Pillars page. This page highlights five key pillars—vision, laning, roaming, objectives, and teamfighting—specific to the lane they played. It provides personalized suggestions for improvement and compares their current scores to their personal bests for a clear understanding of progress and areas to focus on.
Takeaways
Designing a website using existing brand visuals and components presented unique challenges. I had to work within the constraints of the established brand identity while ensuring the design remained creative and cohesive. Collaborating closely with the engineering team helped me understand technical feasibility without compromising the design's integrity. This project taught me how to think innovatively within existing frameworks, improve upon established content, and identify opportunities to address gaps in the market.