ProjectsAfter HoursAbout Me
Resume
Back to Projects
Intro
Overview
observations
Research Plan
Key Pain Points
Persona
Journey map
How Might We...
ideation
user flow
Iterations
High Fidelity
Final Deliverable
Reflections
other Projects

FAUX  PROS

League of Legends Proof of Concept

FAUX  PROS

League of Legends Proof of Concept

Faux Pros

Faux Pros is a conceptual game mode that offers a fun and challenging learning experience for all range of players, where they challenge highly trained AI bots. It's designed to help players identify and address their in-game mistakes, ranging from minute champion mechanics to the big picture game strategies.

I conducted interviews to identify the initial problems, and used the data gathered to design wireframes that can be integrated into the game's client. Users can select their opponents, alter the game settings, and view their in-game mistakes.
Role
UX Designer
Timeline
5 Months
Skills
UX Design
Research
Visual Design
Wireframing
Tools
Figma
Miro

Faux Pros

Faux Pros is a conceptual game mode that offers a fun and challenging learning experience for all range of players, where they challenge highly trained AI bots. It's designed to help players identify and address their in-game mistakes, ranging from minute champion mechanics to the big picture game strategies.

I conducted interviews to identify the initial problems, and used the data gathered to design wireframes that can be integrated into the game's client. Users can select their opponents, alter the game settings, and view their in-game mistakes.
Role
UX Designer
Timeline
5 Months
Skills
UX Design
Research
Visual Design
Wireframing
Tools
Figma
Miro

Project Overview

I tasked myself to design an in-game learning resource that could fit seamlessly into the existing client. I considered the resource's capabilities, adhering to the game's design language, and the resource's enjoyability.

This project included concept development, market analysis, wireframing, and user interviews that involved a moderated environment for brainstorming and analysis.
The problem is that...
League of Legends is a popular online game where players control characters with unique abilities on a battlefield. Despite its success, the game still lacks a robust learning resource, leaving players to discover their mistakes through trial and error, often leading to frustration...
...so my solution is a
Fun and challenging game mode that identifies mistakes and offers corrections by battling pro-level AI bots.
Key Features
Fine Tuning - Players are offered a multitude of training settings they can control to maximize the game mode's effectiveness
Identify Mistakes and Insights - Faux Pros analyzes gameplay and offers actionable solutions to frequently made mistakes.
Rewards Players Who Improve - A rewards shop (coming soon...) offers in-game rewards to incentive players who correct their mistakes.

Project Overview

I tasked myself to design an in-game learning resource that could fit seamlessly into the existing client. I considered the resource's capabilities, adhering to the game's design language, and the resource's enjoyability.

This project included concept development, market analysis, wireframing, and user interviews that involved a moderated environment for brainstorming and analysis.
The problem is that...
League of Legends is a popular online game where players control characters with unique abilities on a battlefield. Despite its success, the game still lacks a robust learning resource, leaving players to discover their mistakes through trial and error, often leading to frustration...
...so my solution is a
Fun and challenging game mode that identifies mistakes and offers corrections by battling pro-level AI bots.
Key Features
Fine Tuning - Players are offered a multitude of training settings they can control to maximize the game mode's effectiveness
Identify Mistakes and Insights - Faux Pros analyzes gameplay and offers actionable solutions to frequently made mistakes.
Rewards Players Who Improve - A rewards shop (coming soon...) offers in-game rewards to incentive players who correct their mistakes.

Initial Observations

I began my observation when I wanted to practice improving my skills in the game.

However, I soon realized that the available in-game options were limited in their own respects in regards to teaching players how to improve. Despite the game's popularity and longevity, it had no dedicated resource to help players learn from their mistakes.

Current Options

These are the current in-game options available to players. Each option has its own unique downside that fails to help teach players what their mistakes are and how to solve them.
01. Quickplay
Quickplay is a casual 5v5 battle, where there are no consequences to winning or losing the game.
Quickplay Cons
  1. No consequences means no serious play/desire to overcome challenges to win the game.
  2. Inconsistency in quality of teammates and opponents.
  3. As a result, skill growth is slow and inefficient.
02. Ranked
Ranked is a competitive 5v5 battle, where players compete for a spot on the leaderboard. Winning battles can promote you to higher levels, while losing can demote you down.
Ranked Cons
  1. High stakes brings pressure and emotional and mental stress, resulting in negative emotions and encountering players with toxic attitudes
  2. Players can observe their match stats after the game, but the game doesn't provide deeper insights to learn from.
  3. Losing can be discouraging for many players, and can turn them away from playing.
  4. As a result, skill growth is average and stressful.
03. Custom Bots
Custom bots allows players to battle AI bots. Players can exit the match/win/lose with no consequences.
Custom Bots Cons
  1. The AI bots fail to be challenging enough to promote skill growth.
  2. AI bot customization is very limited.
  3. As a result, skill growth is non-existent.

Hypothesis

“I believe that other players have also faced limited opportunities for skill growth due to the pressures of playing ranked games, inconsistent game qualities, and a lack of a competent in-game learning resource.”
Hypothesis
“I believe that other players have also faced limited opportunities for skill growth due to the pressures of playing ranked games, inconsistent game qualities, and a lack of a competent in-game learning resource.”

User Research Plan

Putting the plan together
After understanding the problem, I began my primary research by speaking with individuals. I wanted to see whether my hypothesis was a shared notion amongst others, rather than just my own problem. In order for this to be effective, I developed a research plan to help me structure my approach.
  1. Research schedule.
  2. Research questions and goals
  3. Methodology to guide me during and after the interview.
Research Schedule
Research Questions
  1. How do the pressures of ranked play influence a player's ability to improve and engage in meaningful skill development?
  2. To what extent do players rely on in-game resources, and how well do these resources meet their needs for skill development?
  3. What are the key pain points players encounter in their learning journey, and how could the game's design (e.g., bots, tutorials) be better aligned with their skill progression needs?
Research Goals
  1. Uncover the key pain points players encounter in their learning journey.
  2. Learn how the game's design could be better aligned to aid players in their skill progression needs.
Methodology
I conducted moderated user interview sessions with 5 participants via Zoom. I asked the interviewees questions regarding their experiences with skill and knowledge progression in the game.

Using a moderated interview structure allowed me to gain a deeper understanding of the participants' needs and pain points, and I was able to develop a key persona to guide my design decisions.

Key Pain Points

After completing the interviews and sorting through the data, I found these four to be the most common pain points. The pain points all seem to confirm that my hypothesis was correct and that there was an area of opportunity to build upon.
01
Only way to learn and improve is by playing real games.
02
Quality of teammates - and therefore, the game itself - is wildly inconsistent.
03
The game itself doesn’t tell you how to improve.
04
League’s existing bots are not challenging enough.

User Persona

Meet Ethan - the casual gamer who wants to improve his skills.

Ethan is a representation of the game's most common player type who I wanted to design for. He is someone who wants a way to improve his skills without penalty for performing poorly, and seeks to understand what his mistakes were.

Journey Mapping

From the data gathered during my user interviews, I was able to weave together a journey map that our persona, Ethan, goes through when he goes on the game to improve his game knowledge and skill level.

How Might We...

...design a resource for League of Legends that offers a fun and challenging learning experience, allowing players from beginners to veterans to improve their skills without the high pressure of ranked games or the ineffectiveness of current options?
How might we...
...design a resource for League of Legends that offers a fun and challenging learning experience, allowing players from beginners to veterans to improve their skills without the high pressure of ranked games or the ineffectiveness of current options?

Ideation Phase

I started my ideation phase by brainstorming potential product solutions that could address the gap between the game's options and the player's needs. Eventually, I settled on three potential ideas to work with:
1
2
3
Rotating Game Mode
Third-party Extension
Tutorial Guides
I chose to go with the first option and create a game mode within the client. I believe that this method provides the best hands-on learning experience for players, and is easy to incorporate into the game's rotating game modes to test out the feature.

Having to install a third-party extension would be an extra roadblock for users to experience, and there are a multitude of tutorial guides available on existing platforms like YouTube.

From here, I began to sketch out ideas with pen and paper to start piecing together the vision for the game mode interface.

User Flow & Wireframing

I began my process by creating a user flow to weave together all of my initial brainstorming ideas into one cohesive plan. From here, I went into Figma and began designing the low-fidelity wireframes within the bounds of the game's desktop client.

Iterations & Testing

I was able to hop on a call with a Riot developer to seek feedback on the initial designs, and made changes according to their input and critiques.

The main issue to address was the lack of a call-to-action for players after the game had ended. Looking at the statistics is nice, but a lot of players might not know what to do with the data afterwards.

Another issue was to try and expand upon the visual design aspect of the match screen. Could there be a way to make the layout more interactive and creative?
​I conducted user testing with the help of Miro to see which design layouts were more favorably received by users. Specifically, A/B testing was conducted to compare differences in certain features’ designs and placements, and whether users were able to successfully navigate the prototype and complete the tasks given.
Testing Insights
Version A held 80% favorability compared to Version B.

Users also provided the following design feedbacks during our interviews:
  1. Include titles to improve clarity of features, as well as helping guide users through the flow.
  2. Provide multiple ways of editing champion loadout instead of having only one button.
  3. Include a “Favorites” feature - where players can save previous matchups and load them up to play again.
  4. Have the advanced settings page in the bot customization page be opened permanently.
  5. Make it easier to adjust bot settings by displaying the number values.

High Fidelity Development

01. Added Titles for Clarity
Titles made each feature's purpose clear to the users. They also acted as sign posts by guiding users down the screen.
Before Titles
After Titles
02. New Saved Matchup Feature
Users can now instantly load in their preferred matchup across all positions.

This makes it easier on users to hop right into the practice match without having to select all of the intricate settings over again.
03. Bot Settings menu QOL Updates
I swapped out the collapsible menu for a permanently open design, along with adding numbers to the scales.

These quality of life updates makes the settings page more accessible by removing unnecessary roadblocks and by making changes to the bots easier to visualize.

Final Deliverable:
Faux Pros Game Mode

Introducing Faux Pros, a conceptual game mode that provides a unique and challenging learning experience for players of all ranges.

Players will be able to challenge highly skilled AI bots that wield the power of their favorite pro players. The game then analyzes and shows the player's in-game mistakes, and offers actionable steps to improve their skills.

Reflections

01. Starting from nothing
The biggest challenge I faced was having no prior user data to work with. I learned how to become better at scheduling and creating user interviews, ideating new ideas, and extracting key insights from collected data.
02. Becoming attached to my initial designs
Like a kid trying not to drown by clinging onto an inflatable tube in a large pool, I found myself getting attached to my initial designs in the ocean of the unknown, even when I knew there were major improvements to be made.

I was scared to let go of my first creations because I knew working through the creativity was going to be tough. I was only able to find the shore by learning to let go and design more.
03. Work towards the solution, not from it
I was stuck with analysis paralysis because I thought I had to get it right the first time. The best way to overcome this is by learning to iterate over and over again to reach your solution, not start from it.

Other Projects

Crafted with care by Joshua Lim
Updated 2024
ResumeLinkedInEmail