MOBALYTICS
UI/UX
OVERVIEW
How can players quickly find key information in a fast-paced game? The Mobalytics Champion Builds page suffered from cluttered navigation and information overload, making decision-making frustrating. As a Product Design Intern, I collaborated with the CEO and Head Designer to streamline the layout, reduce cognitive load, and improve navigation. By standardizing build titles, adding personalized matchup insights, and simplifying the UI, I enhanced usability and engagement, helping players make faster, more informed decisions.
Role
Duration
Key Responsibilities
Product Designer
Jan 2024 - July 2024
(6 months)
Product Design
Research
Usability Testing
Problem
Mobalytics users struggle to find the information they need from the champion builds page due to overwhelming information and lack of organization
Information overload, and scattered tools make navigation difficult, increasing cognitive load and slowing decision-making. Hick’s Law states that when users are faced with too many choices, decision time increases, which is critical for players who need quick answers under in-game time constraints. Without a streamlined structure, users struggle to find the information they need.
Hick's Law: Long decision times can lead to user frustration
Scattered tools and lack of organization is inefficient for users
Excessive information makes it harder for users to find what they need
Goals
Better streamline the champion builds page to enhance usability and decision-making efficiency for players in-game.
🧠 Reduce Cognitive Load
Minimize overwhelming information by prioritizing content effectively.
🗺️ Improve Navigation Efficiency
Ensure that key information and tools are easy to find and access.
⚡ Provide Better Support
Equip players with more context to support better decision-making.
Solution
A More Streamlined and Context-Aware Champion Builds Experience
Standardized Build Titles and Build Descriptions
Before
Confusing build names, with varied titles like Off-Meta 1/2 and Alternative, made it unclear when and why to use each build in different game situations.
After
A consistent build naming system and hover-over tool for strengths and weaknesses provide players with clearer context, helping them understand when and why to use each build.
Personalized Information for More Relevant Matchup Insights
Before
General information when using the vs. champion filter displayed unrelated content to the opponent, leading to a more cluttered and overwhelming UI.
After
Searching for a specific champion matchup removed irrelevant information, displaying a tailored guide personalized to the player's skill level and specific matchup information.
Streamlined Navigation and Consolidated Information
Before
An excessive amount of information and options on the left side of the page made it difficult for users to scan information and navigate efficiently.
After
Consolidating information reduced the number of options in the left sidebar, making navigation easier. Users can quickly scan the top header for build types before exploring a simplified left sidebar for detailed information, minimizing clutter and speeding up decision-making during champion select and in-game moments.
THE PROCESS
Research
Complex navigation and overwhelming information makes it difficult for users to use the platform during their games
The user interviews I conducted revealed that new users found the platform’s complex navigation and overwhelming information challenging, often discouraging them from continued use. Existing users reported difficulties in utilizing the platform’s tools during live games due to time constraints and challenges in quickly finding relevant information. These insights helped me identify key pain points and develop targeted solutions to improve the user experience.
🧩 Lack of Personalization
Players across various experience levels struggle to find information that is tailored to their needs.
🤯 Information Overload
Players can only mentally process so much in-game, making it difficult to access essential features in-game.
🧭 Confusing Navigation
New users feel overwhelmed when attempting to navigate and use the in-game overlay features.
Ideation
Exploring how to create a better navigation experience for both new and existing users
I had the opportunity to collaborate with the CEO and head designer to conduct a review of the entire user journey across the website and application. Together, we identified key problem areas that required strategic improvements.
OOPS moment❗ Clarifying scope and impact
After presenting my recommendations and wireframes, I realized a misalignment with the team’s focus. My initial ideas extended beyond the project's technical and financial constraints. This experience taught me the importance of working within limitations and focusing on smaller, high-impact UI improvements that enhance the user experience.
Focusing on impactful UI Improvements through iteration and feedback
After brainstorming and consideration, I decided to narrow my focus to enhancing the League of Legends champion builds page. This smaller scope enabled me to concentrate on targeted UI improvements that directly addressed the pain points I had previously identified. I continuously iterated on different ideas and versions, and I was fortunate to receive consistent feedback from my team, allowing me to refine my designs based on their insights and preferences.
Validation
Visual indicators and item identities promote reliability and understanding
Usability tests with casual and ranked League of Legends players revealed that reliable and efficient information is crucial for their gameplay decisions. By incorporating stamped item identities into build descriptions, players gained a clearer sense of context and trust in the data. Additionally, visual indicators improved efficiency, enabling players to process information faster and make more informed decisions with less cognitive effort.
Before: Without visual indicators
After: With visual indicators
Improved Navigation Increases Efficiency and Engagement
Since players face time constraints in-game, they value clear and efficient navigation. Reducing information in the left sidebar helped alleviate overwhelm. Additionally, the new hierarchical navigation structure improved visibility and usability, allowing players to quickly scan the top header for build types before accessing more detailed sub-information.
Before: Overwhelming left sidebar
After: New navigation structure
Plan Of Action
Prioritizing small UI enhancements for efficient navigation and reduced cognitive load
Collaborating with the CEO and developers, I broke the final design into milestones, starting off with simpler, more feasible improvements. We determined that more complex designs were lower priority, considering feasibility and development time and costs.
Milestone 1
Standardize Build Titles and Simplify Information
Milestone 2
Add Builds Descriptions
Milestone 3
Streamline Navigation
Milestone 4
Replace irrelevant information with personalized insights
Reflection
Collaborating with cross-functional teams and stakeholders
Before this internship, my product design experience was limited to personal projects and extracurricular activities. I was fortunate to receive guidance and feedback from the CEO, designers, engineers, and community teams, which helped me navigate cross-functional collaboration. Through this experience, I learned how to align priorities and goals with different stakeholders to ensure feasible and impactful design outcomes.