Improving the experience of
selecting abilities in skill trees
MAD CHILLI: REVENGE OF THE ROOTS | UX / UI ARTIST
INTRODUCTION
I love playing games that embrace skill trees. Borderlands and Assassin's Creed do a great job of giving the sense of character progression. When I was thinking about creating a game this was the first element I wanted to focus on.
This case study takes a deep dive into the development of a character skill tree. With the help of user feedback, I was able to understand the fundamental elements needed to create an engaging skill tree system. It involved developing design artefacts from initial concepts to low fidelity wireframes and prototypes.
THE GAME
Mad chilli: Revenge of the roots is an online team-based multiplayer first-person shooter.
The players are divided into 2 teams, Chillis or Roots, each match containing 6 players. The gameplay consists of time-based rounds, with the team finishing with the highest points declared as the winners. Players are ranked by their level. The highest level is 30 with players levelling up by gaining experience points through participating in battles. The players will receive a skill point each level they rank up, which they can spend on a character progression system (character skill tree).
Objective
To create a character progression system that enables players the power to build a character with unique abilities that match their playing style.
What are progression systems?
A progression system means a player is given the sense that their character is improving and progressing throughout the gameplay.
The experience points are gained (levelling up) using a visual representation such as skill trees to upgrade abilities.
With skill trees, you obtain experience points by playing the game, and when you hit an arbitrary threshold you get a skill point. This skill point can be spent to unlock a new ability.
This puts the player in control of how they advance. As you earn new abilities, your levelling up progression happens incrementally throughout gameplay. Skill trees also add meta-level decision making into a game, creating a different experience for different play styles.
Some games allow the player to unlock most or all upgrades during the duration of the game.
There is a missed opportunity in making the players think hard about their choices.
They're only thinking about what order they unlock the skills when they could be thinking about which future upgrades they're able to get.
In Assassin's Creed the player has to make a choice about which skill branches they take. If the player focuses on the Hunter and Seer skill branches, this will improve the characters abilities in stealth.
The character (Bayek) will feel personal to the player and fits the way they play the game. And this as a result creates interesting repercussions for choices. By neglecting the warrior branch the character’s one-on-one combat skill is low. This shapes the unique personality of Bayek for this player. Due to low combat skills the player will need to run away from direct encounters and find new ways to approach situations.
Characters and abilities in Mad chilli: Revenge of the roots
In Mad chilli: Revenge of the roots the playable characters are split into two teams Chillis or Roots. Each team has three character classes and the class have four skill branches. The player can then build abilities from the skill tree to adapt a unique playing style.
THE COMMANDO
THE GUNNER
THE SOLDIER
USER RESEARCH OBJECTIVE
Identify the pain points users encounter when making decisions using a skill tree
DISCOVERY
I researched similar games that used character progression systems. From there I identified potential user pain points and derived a few research objectives detailed below:
LEARNING OBJECTIVES
What is the first thing that the players identify when choosing characters?
Will the players browse all paths of a character skill tree before making the final choice?
How do they feel about the selection process when choosing abilities for
their character?How do they feel about respeccing (i.e resetting) the character abilities?
SURVEY
I created a participant recruitment survey to identify ideal candidates to recruit for a one-on-one interview. Out of the 20 responses, I identified 5 ideal participants for the interview.
PROTOTYPE DEVELOPMENT
To understand how the user interacts with the skill tree, I focused on the 2 key tasks, which is the upgrade and character reset. I mapped user flow and user journey for these two tasks to identify potential blockers.
Task 1: How does the player upgrade a new ability?
USER FLOW
USER JOURNEY
Task 2: How does the player respec chosen characters?
USER FLOW
USER JOURNEY
BRAINSTORM & SKETCH
Based on the above user flows and journeys, I sketched the following concepts.
LEVEL INDICATOR
SKILL INDICATOR
MONEY INDICATOR
CHARACTER TOGGLE
SKILL DESCRIPTION
SKILL TREE LOAD PAGE
Layout option 1
Layout option 2
Layout option 3
SKILL TREE LAYOUT
PROTOTYPE WALKTHROUGH
I created low-fidelity prototypes on Figma, proposing two design layouts. The interactive prototypes will help to effectively assess the functionalities, layout and components with the participants during the interview.
5 Users
Participants recruited through
a Typeform survey
Calendly
Calls scheduled through Calendly
60 minutes
Call plan questions &
Prototype walkthrough
LAYOUT 1
LAYOUT 2
INSIGHT ANALYSIS
I used affinity mapping to gather and group the insights into themes. This helped me to target three key pain points addressed by the participants which are listed below.
Key findings
1.Unclear Information architecture
The understanding of what each ability has on the character stats was not clear for the participants to make an informed decision.
2. Choice paralysis
The participant was not able to make a decisive choice on which ability to upgrade or identify which ability was better for their needs.
3. Unclear character reset function
The reset feature wasn't clear for the participants as they did not know how much this change will cost them.
HIGH FIDELITY PROTOTYPES
1. Unclear Information architecture
I created a visual system to clearly show how each ability affects the stats of the character.
I then created a secondary visual element shown on a hover state, which gives a snapshot of the abilities stats.
Hover states displaying ability stats
Hover states displaying health resurrection ability
Hover states displaying health bubble’s ability stats
2. Choice paralysis
To address the choice paralysis, I created a compare functionality, which will allow the player to compare up to 2 abilities at a time. This function allows them to visually compare all the available abilities. All other abilities that the player can not upgrade are locked.
Compare functionality
Comparison in action
3. Character reset function
was unclear
To improve the clarity in the character reset function, I added a cost counter. This counter shows the cost value when choosing which character or characters the player wishes to reset.
Adding cost counter
Cost counter changes as per the selection