📋 Overview
Mobalytics is a platform that helps players improve their gaming performance through analytics and machine learning. As a product design intern, I focused on the Champion Builds page, where players struggled with trust, information overload, and poor discoverability of key tools. I streamlined the layout, reduced cognitive load, and clarified navigation so players could make faster, more informed decisions. Throughout the process I collaborated closely with the CEO, head of design, engineering, and the community team to iterate quickly and ensure feasibility.
⚠️ Problem
Players struggle to find the information they need because trust is low, content is overwhelming, and key tools are hard to discover
In user interviews/tests, participants questioned the rationale behind “Recommended” builds, skipped text-heavy sections, and missed important tools hidden behind tabs. Under in-game time pressure, these issues compound, leading to increased cognitive load and slowed decision making.
Current Champion Builds User Experience
🎯 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
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 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.
Improved Information Architecture for Tool Discovery
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.
📊 Results
Improved task completion time by 25%
Baseline vs. Post-Redesign Usability Testing showed ~25% reduction in task completion time. 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 don’t need more info; they need explainability, focus, and findability
I conducted 5 user interviews paired with usability sessions. From the usability test sessions I discovered these insights that would later help me identify key pain points and develop targeted solutions.
🧩 Low trust in Information
In tests, 3/5 users questioned the rationale, and meaning of recommended builds, slowing decision making.
🤯 Information Overload
Dense text is treated as noise. All users skipped text-heavy sections, relying on visuals and labels for their use.
🧭 Low discoverability of key tools
Key tools are buried behind tabs so users don't realize they exist when they need them.
💭 Ideation
Focusing on small, high-impact UI changes that fit within constraints
After presenting my initial wireframes, I realized the ideas exceeded the team’s technical and financial constraints. I narrowed the scope to the League of Legends champion builds page and focused on small, high-impact UI changes that directly addressed key pain points. Through rapid iteration and consistent team feedback, I refined the designs and delivered improvements.
✅ Validation
Visual indicators and item identities promote reliability and understanding
Usability tests 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
In baseline usability tests, users either took a long time to find the tools they needed or didn’t realize it existed at all. After introducing the streamlined sidebar and hierarchical navigation, all participants were able to locate the tool in under 10 seconds, showing a clear improvement in both efficiency and discoverability.
Before: Overwhelming left sidebar
After: New navigation structure
🚀 Plan of Action
Prioritizing small UI enhancements
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
Add Builds Descriptions
✨ Reflection
Aligning stakeholders goals to deliver feasible, high-impact designs
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.