📋 Overview
League of Legends is a competitive online multiplayer arena game developed by Riot Games. As an avid League of Legends fan, I wanted to gather insights from existing league of legends players about their experiences when climbing the ranked ladder and improving their performance in the game.
⚠️ Problem
League of Legends players struggle to improve their performance and rank up
League of Legends players want to challenge their strategic thinking, collaborate with teammates, and experience the thrill of intense and competitive battles. With over 10+ million players striving to climb the ranked ladder, many players feel stuck or unmotivated by their lack of improvement, leading to frustration with the game.
🎯 Goals
Make players feel motivated and supported on their pathway to improvement
By motivating and supporting players, they are likely to improve their performance, climb the ranked ladder and experience the sense of achievement in attaining their goals. For non-ranked players, improved performance leads to increased satisfaction with their in-game experience. Ultimately, this results in a more enjoyable user experience for all players which can improve user engagement and user retention rates.
Help players foster a sense of agency in their gameplay journey
Make players feel more support and confident in their games
Promote a sense of accomplishment and learning in the post-game phase
💡 Solution
Offer players more guidance and performance analysis
My focus was on empowering players with deeper insights and actionable feedback to enhance their gameplay journey. Each feature is designed to give players a greater sense of control over their development, providing the tools and knowledge needed to optimize their performance and drive for continuous improvement.
Progress Tracker
Players can monitor their performance across different time periods.
Performance Insights
A feature that analyzes patterns and habits of a player's performance.
Champion Select Resources
Pre-Lock in: Preview comprehensive insights of the hovered champion.
Post-Lock in: Get tailored build recommendations for the selected champion optimized for your team composition and the enemy lineup.
Post Game Insights
After a match, players can view an
in-depth analysis of their performance and grades based on performance metrics.
Post Game Replay Highlights
An accessible tool for players to rewatch and receive feedback over critical moments in their match.
📊 Metrics
Improved task completion time by 25%
Usability testing on my hi-fi prototype showed ~25% reduction in task completion time versus the baseline. Given timeline and scope, the team shipped a subset of my recommendations—condensing information and standardizing build titles. I then created a handoff deck with the larger redesign, and presented it to design and engineering for post-internship implementation.
THE PROCESS
📝 Research
Players lack the guidance and game knowledge to climb the ranked ladder
By conducting user interviews and analyzing player in-game performance and interactions, I was able to identify and address some of the common pain points.
🔄 Lack of Feedback Loop
Players aren't aware of what they should improve on, so they end up repeating the same game behaviours.
🔍 Lack of Accessibility
Players rely on external resources for essential game information to optimize their performance which can be inefficient.
📊 Post game statistics are limiting
Players just skip through the post game analytics as they provide very little insights and guidance to the player.
💭 Ideation
Exploring how we might make players feel motivated and supported on their pathway to improvement
Building on the pain points identified through my user research, I developed ideations based on three key design buckets. My goal was to enhance the user experience by providing more context, offering better in-game support, and optimizing the post-game experience.
Initial Sketches
Lo-Fi Wireframes
Mid-Fi Wireframes
✅ Validation
Users sometimes prefer to skim through the post game analysis without much reading
To accommodate this, I structured the post-game analysis into expandable sections. Each box presents a general informative header, allowing users to quickly skim key insights. If they wish to dive deeper, they can expand the box to access more detailed information, providing a flexible and user-friendly experience.
Closed box with header
Expanded box with sub headers
Expanded sub headers with more details
Visual indicators and tags improved user engagement with highlights
During testing with three participants, all of them found it challenging to follow along with the notes while watching the clip simultaneously. This resulted in a frustrating experience that reduced their motivation to use the feature. To address this, I introduced contextual tags to summarize the overall theme of each clip and added visual indicators within the clip notes, making it easier for players to track and engage with the content effectively.
Highlights without visual indicators and tags
Highlights with visual indicators and tags
🎨 Visual Design System
I aimed to ensure that my prototypes aligned with League of Legends' visual design by adhering to its typography and color palette guidelines. I also incorporated key design elements such as circles, squares, and hextech metal features, carefully defining their metallic features with subtle highlights to maintain consistency with the game's aesthetic.
✨ Reflection
Aligning stakeholders goals to deliver feasible, high-impact designs
As an avid League of Legends player, working on this case study was both exciting and meaningful for me. The game's distinctive visual design and user interface have always been a source of inspiration for me, making it a natural choice for my first product design case study.
The project presented unique challenges, particularly in maintaining consistency with League's iconic visual style while creating new interface elements. Technical hurdles, such as implementing expandable and collapsible components, pushed me outside of my comfort zone as I learned more about prototyping. Overall, this case study taught me that you can always design cool features that are both fun, engaging but informative for users!