Client: Personal Project
My Role: UX
Tools: Figma, FigJam
Duration: 5 weeks
THE CHALLENGE
The Tutorial Covers the Basics, but Players Still Felt Unprepared
League of Legends is one of the most mechanically complex multiplayer games available, yet its onboarding introduces little beyond the basic controls. New players can enter their first real matches without understanding objectives, roles, vision, or many of the systems they are suddenly expected to use. The challenge wasn't simply teaching players more. It was finding a way to introduce that complexity without making an already overwhelming game even harder to learn.
DISCOVERY
How Do Other MOBAs Onboard New Players?
Before deciding what a better tutorial should look like, I looked at where the existing onboarding falls short and how other MOBAs approach the same problem.
Looking at the Existing Landscape
I analysed Dota 2, Smite, and Mobile Legends to understand how competing MOBAs introduce complex mechanics to new players.
01 — Depth Matters
Dota 2 provides substantially more learning resources and practice opportunities, showing the value of supporting players beyond basic controls.
02 — Complexity Needs to Be Gradual
Smite introduces mechanics progressively, reducing how much players need to understand at once.
03 — Shorter Learning Experiences Reduce Friction
Mobile Legends uses shorter, simplified onboarding experiences that make individual concepts easier to digest.
USER RESEARCH
I Wanted to Understand Where Players Got Stuck
I interviewed 5 League of Legends players to understand their early experiences with the game, how they learned mechanics the tutorial didn't explain, and what made the learning process feel overwhelming.
Key Findings
100%
said the tutorial didn't prepare them for real matches.
100%
relied on external resources to learn the game.
The Pattern Was Clear
Players needed more guidance, but simply giving them more information at once would recreate the very problem they were already experiencing.
This led to two questions:
01 — How might we make new players feel less overwhelmed as they are introduced to multiple game systems at once?
02 — How might we support new players in learning the game without solely relying on external resources or experienced friends?
DEFINING THE PRODUCT
Finding the Opportunity
Before deciding how the tutorial should work, I mapped player needs against product goals and project constraints.
This helped narrow the concept around three priorities:
01 — Structure
Give players a clear learning path instead of leaving them to determine what they need to learn.
02 — Progress
Introduce mechanics in smaller, focused modules rather than all at once.
03 — Choice
Separate essential knowledge from role-specific learning so players can explore additional content when they're ready.
THE SOLUTION
A More Structured Way to Learn
Five core modules introduce the mechanics every new player needs to understand before entering regular matches.
Optional role modules let players learn Top, Jungle, Mid, ADC, or Support based on what they want to play.
Progressive disclosure introduces complexity gradually, giving players a structured path without turning onboarding into one long tutorial.
Modular Onboarding
I redesigned onboarding as a modular system, with five core modules covering essential mechanics and optional role-based tutorials. This introduces complexity gradually while giving players more control over how they learn.
Core Modules
Optional Modules
MAPPING THE KEY JOURNEYS
Turning the Idea Into an Experience
I created a user flow to understand how players would enter the Tutorial Hub, progress through Core Modules, explore Optional Modules, and return to the main client before committing to designing screens.
USABILITY TESTING
The Prototype Worked — But Expectations Revealed More
I tested the Tutorial Hub and Movement module with 5 League of Legends players to evaluate whether the new structure was clear, easy to navigate, and understandable.
The core concept worked:
100%
successfully completed all key tasks with minimal guidance.
100%
engaged fully with the tutorial instructions throughout the Movement module.
But testing revealed issues beyond task completion:
60%
expected first-time onboarding to guide them more directly through the tutorial experience.
60%
preferred rewards that helped them unlock champions rather than small XP rewards.
40%
found the terminology unclear in certain areas.
ITERATION
What Testing Changed
01 — A Clearer Starting Point
02 — Clearer Terminology
03 — Better Visual Consistency
04 — More Relevant Rewards
THE FINAL EXPERIENCE
How Does the Tutorial Work?
Start With a Clear Path
First-time players are introduced to the Tutorial Hub, where Core and Optional Modules make it clear what they should learn first and what they can explore later.
Learn One System at a Time
Core Modules break essential mechanics into shorter learning experiences, helping players build their understanding progressively rather than learning everything at once.
Learn the Role You Want to Play
Optional Modules let players explore individual roles when they're ready, giving them more control over how deeply they continue learning.
PROTOTYPE
Reflection
Designing for an established game challenged me to think beyond simply adding more information. League's complexity is part of what gives the game its depth, so the real problem was deciding what players needed to understand first, what could wait, and how the experience could reveal that complexity gradually.
Testing also showed me that successful task completion only tells part of the story. Some of the most valuable findings came from what players expected to happen, like where they thought the tutorial should begin.
What I Took Away From the Project
01 — Good onboarding is about timing, not just information.
Teaching everything isn't useful if players aren't ready to understand it.
02 — Designing within an existing product requires restraint.
The goal wasn't to reinvent League's interface, but to improve onboarding while preserving patterns players would encounter elsewhere in the client.