My League Of Legends Designs
Champions, Runes, Items, & Coaching App
League of Legends Game Designs
Keeping League
Some of my designs I created for players to have more joy playing League including a champion, rune and runes page, abilities, and items.
Project Duration
Ongoing passion project spread out over months here and there
Project Scope & Methods
Surveys, Interviews, Affinity Mapping, Personas, Wireframing, UX Design, Game Design, Visual Design, prototyping, m0ckup & UI, programming
My Responsibilities
Everything 100%. This is a solo passion project
Result/Status
Ongoing: Currently in iteration and user testing.
Background Context
After spending a night at Riot Games LA for the Worlds 2023 event, I had the pleasure of connecting with the people behind my favorite game (League) and my favorite show (Arcane), and was inspired by multiple Rioters to shoot my shot at becoming part of the dream!
I have worked relentlessly in whatever spare time I can find to learn about Riot and our values, and pursue a passion project that embodies them by putting players first!
In making these designs, I wanted to help real players have even more fun!
League Coaching App Summoner's Lift
Some of my designs I created for players to have more joy playing League including a champion, rune and runes page, abilities, and items.
Step 1 Discovery & Research
Brainstorming
Player Empathy
The very first step is to ask the following 3 fundamental questions. The questions and answers serve as a mere hypothesis to stage the right questions and research, not to directly inform design decisions. It is, after all, all about the user!
Interviews
Asking the Right Questions
On your left, you’ll see the interview questions I asked several different League players to get a better understanding of their goals, needs, motivations, feelings, behaviors, & opportunities while defining the problem at hand. Notes were taken on empathy maps like the one below.
Step 2 Analyze & Define
Key Insight
Problem Statement
Playing and understanding League of Legends can be challenging, especially for novices. New players may not understand game mechanics like runes, items, abilities, and champions, and need an easy and less stressful way to find and understand that info. Potential or returning players may feel lonely or intimidated by all the new info and expectations. Some players are skilled but are not good teachers or coaches, and get distracted & frustrated holding another player’s hand. Some players want a way to encourage their friends to join League so they’ll feel less alone. Some players are simply eager to improve their craft and rise through Elo hell but are confused how to go about it.
Key Insight
Potential Solutions
Reasearch
Competitor Analysis
User Analysis
Personas
Here are the persona types of players I will initially focus on, for the first phase of agile development for the app. Many users of these personas feel underrepresented in other guides and coaching apps for either their skill level, knowledge level or preferences with regards to complexity.
Top Frustration Tags:
Phase -------->
Tasks->
Detailed actions our user is likely to perform
Mindsets->
What our user might be thinking and feeling at the moment
Pain Points->
Detailed actions the user is likely to perform. Frictions and pains encountered by users at each phase
Opportunities->
What you can propose with your product or service to solve the user needs and pains
User Analysis
User Journey Mapping
I mapped out a grid of user’s complete behaviors on their way to find guidance and support while playing League of Legends, including Tasks, Mindsets, Pain Points, & Opportunities during several phases including Awareness, Consideration, Onboarding, Engagement, Improvement, & Advocacy.
Project Goals
Project Briefing
Deliverables
Success Criteria
Step 3 Ideate
Information Architecture
User Flow
Low Fidelity Designs
Wireframes
Here are some of the earliest design ideations I came up with, some low-fidelity wireframes and light markup.
The designs themselves are not set in stone, but they provide good staging ground to outline page requirements for the UI design phase.
Step 4 Prototype & Design
High Fidelity Designs
Prototypes
This is the step I am currently working on! Normally in UX, the next step would have been to do a more low to mid fidelity digital prototype, but since I am personally building the UI myself, I decided to go for a high fidelity mockup.
Please keep in mind, many of the pages are still being designed as you’re reading this 🙂
Be sure to check back for updates!
Step 5 Test & Iterate
Current Status
Iteration in Progress
Since this is a currently ongoing project, this step, along with previous steps, are still in progress. Feedback on the design has already been given. Some design changes are minor, such as changing the avatar on the bottom left icon to show a face more prominently to illicit more positive emotions and connection. Some changes are more significant, such as adding in match notifications and a clearer control scheme and a brief intro tutorial about how the app works.
Below is the current state of app’s main page with annotations of wqhat is currently being worked on.
Summary
Retrospect
Although the project is still ongoing, it is clear that the needs of the users are complex and will need more attention than a single person can handle in two weeks in their spare time 😅 I knew it was a huge undertaking with very high constraints, but I knew I had to try and continue to try to demonstrate just the tip of the iceberg of what I can contribute to the player experience.
I will continue to update this and intend to have a working interactable prototype up here very soon, so be sure to check back… or better yet, contact me (info below) so we can talk about how I can give players an amazing experience they won’t soon forget 😀
Champion Design Amitara - The Unmaker
Champion
Spotlight
Taking the form of a Shuriman Mythic Goddess, Amitara (meaning World Ender) is a representation of the end of all that is. She has the unique power of Uncreation, the power to completely remove things from the plain of existence.
Champion Design Amitara's Abiltiies
PASSIVE - UNCREATION
All of Amitara's abilities deal full true damage.
Q - OBLIVION EXODUS
Basic Form: Amitara channels a beam of oblivion flame which burns the ground beneath it for 4 seconds and slows enemies passing through it
Ultimate Form: AMitara channels a larger and longer range beam that burns the ground in a larger area and cannot be passed.
W - ETHEREAL EXILE
Basic Form: Target an allied champion or yourself to Uncreate them, turning them into a wisp of dark matter for 2 seconds. While in this form, they are untargetable, cannot act, and pass through all units. Can also be used on neutral terrain objects (walls, plants, etc.) to temporarily remove up to 4 from existence for 180 seconds.
Ultimate Form: Cast a massive area of uncreation that removes everything within it from existence for 3 seconds—including enemy and allied champions, minions, turrets, terrain, and jungle monsters.
E - OBLITERATE
Basic Form: Call down 3 Oblivion Flames from the sky in rapid succession, each striking a small area and dealing true damage.
Ultimate Form: Rain down 6 larger, empowered Oblivion Flames over a wider range with increased radius and impact.
APOCOLYPSE MANIFESTED
Empower your next ability, drastically enhancing its damage, range, and effect. The form of the empowered ability depends on which skill is used after Apocalypse is activated. Empowerment lasts up to 10 seconds or until an ability is cast.
Champ Class
Mage
Amitara is a long range mage with considerable support and immense team fighting potential.
She is a high risk high reward champion with many potential for plays and misplays as opposed to just stat checking.
Her abilities feel extraordinarily unique and fresh without being broken due to the high skill level needed and the fact that she is till an immobile squishy.
Balance will ultimately be needed, so I have many variations to her abilities to consider.
New Rune Tree Harmony Rune Tree
Use Case
Best for Duos
The harmony rune tree is great for support mains and duos or just players like myself who love being as nice and as useful as possible to their teammates 🙂
New Rune Page Example Harmony Rune Page
Keystone Runes Harmony Keystones
INEXORABLE BOND
Inexorable Bond - Every 30 seconds, attacks and abilities by you and your bonded ally mark enemies giving you both increased range and damage against the marked target for 3 seconds.
ENDURING BOND
Enduring Bond - Every 30 seconds, absorb 35% of the damage sustained by your bonded ally for 1 enemy ability or auto.
REMEDIAL BOND
Remedial Bond - Every 60 seconds, shielding a bonded ally will cause the shields on both of you to last for 2 seconds longer. If the shield is undamaged during the duration, heal the bonded ally for 20% of the shield value.
Harmony Use Cases
Keystone Playstyles
The harmony keystones *while providing different benefits) all revolve around synergy and cooperation and reward duos and players working together as a team to overcome odds.
Inexorable bond focuses on offensive synergies while Enduring Bond & Remedial Bond focuses on defensive/protective synergies.
Summary
Retrospect
This work is far from over and the most important part is the PLAYERS. Throughout this design process, I have constantly been in touch and interviewed 22 players to get their feedback, input, and concerns regarding everything I created, and I will be posting my anonymous conversations and insights with them very soon so stay tuned 🙂
Acrhive
Other Projects I've Done
Get In Touch
If You Enjoyed Learning About Me or Want to Know More, Let's Chat 🙂
