📋 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 founder, head of design, engineering, and the community team to iterate quickly and ensure feasibility.
⚠️ Problem
Players struggle to find the information they need because 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
Standardized Build Titles and Build Descriptions
Before:
Confusing build names, with varied titles like Off-Meta 1/2, made it unclear when and why to use each build in different game situations.
After:
A consistent build naming system and hover-over tool to provide players with clearer context, helping them understand when and why to use each build.
Personalized Information for More Relevant Matchup Insights
Before:
Using the vs. champion filter showed general information that wasn’t specific to the opponent, creating a more cluttered and overwhelming UI.
After:
Searching a specific matchup removes irrelevant content and presents a tailored guide based on the player’s skill level and the exact opponent.
Improved Information Architecture for Tool Discovery
Before:
An overloaded sidebar made it difficult for users to scan content quickly, increasing cognitive load and reducing visibility of the matchup tool.
After:
Improved information architecture by moving build types to the header and consolidating sidebar content, making the matchup tool more visible and reducing clutter for faster 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
From 5 user interviews, I uncovered that players don’t need more information—they need explainability, focus, and findability
🧩 Lack of Clarity
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 and Improve Visibility
Milestone 4
Add Personalized Matchup Insights
✨ 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.