The Sphere Grid in Final Fantasy X
A UX/UI Case Study
Disclaimer: I didn’t work for SquareSoft, this is a customer’s point of view.
A tool for character development
The Sphere Grid is a type of skill tree implemented in Final Fantasy X in order to increase the character stats and learn new abilities.
It is a system of interconnected nodes that each character can move through by spending sphere levels, which they earn by gathering experience in battles.
Each node represents a different stat, ability or other.
Nodes that the character is on or adjacent to can be activated by utilizing other specific spheres relevant to the node (e.g. a node that increases attack will be activated by a red power sphere).
A single sphere level can move the character one node forwards or 4 nodes backwards.
The Pain Points
1. Overwhelming and unclear UI
For a system that requires a lot of planning for each of the seven characters of the game, the grid doesn’t present itself in a readable way.
2. Slow and frustrating experience
The requirement of a specific sphere to unlock the nodes, and having to move back and forth through the grid to do so, makes maximing the stats a daunting task.
PAIN POINT 1
OVERWHELMING AND UNCLEAR UI
I remember playing Final Fantasy X as a young teen and being introduced to the Sphere Grid by a mysterious NPC. My first thought was “wow, there’s a lot of stuff to learn, cool!… what is that stuff though?”. That sense of confusion that me and other players felt inspired me to take a better look at the UI also from an accessibility point of view.
THE ORIGINAL UI
The Sphere Grid before and after completion. The left image is how the grid is presented to the player the first time.
Final Fantasy X’s Sphere Grid is roughly divided into 7 sections, one for each character.
In the Standard version, the characters start from a node where it benefits them most. The player can simply follow the predisposed path. However, they can also decide to stray from their path with the use of teleporting spheres or simply head a different direction. Even on the Expert version of the Sphere Grid, which allows them a greater freedom of customization, players can find themselves stuck in a position where their characters aren’t strong enough to continue the story, or they don’t have enough resources to properly upgrade the team.
Why does it not work?
Whichever mode or play style a player adopts, a great deal of planning is required before starting to consume the limited resources. And as can be seen by the image, the full view of the grid doesn’t lend itself to that purpose.
There are A LOT of nodes, but their icons aren’t even visible. What does each one of them stand for?
The grid is in grayscale, which makes it very hard to understand what exactly we are looking at except for a number of connected circles.
Granted the game was made during a time when accessibility wasn’t a very discussed topic, however it could be modernized to help people with colour blindness and low vision.
REDESIGN
Add contrast
If the overall look is grayscale, the first step would be to add some contrast through lighter and darker tones to make the icons stand out.
Add colours
Even when even a single node on the Sphere Grid hasn’t been filled out, colour coding them would greatly help the player immediately identify their type and plan their journey.
Differentiate states
Since the empty Sphere Grid is coloured, we need a way to differentiate the non-active nodes from the active ones. The solution could be to use the same icon, but this time fill it in with color. Maybe add some glow.
Ensure accessibility
Through the use of filters, I can see that the chosen colours are different enough from each other so that people with colour-blindness can still tell them apart.
The image shows the icons with a Blue Cone Monochromacy filter from the colour blindness simulation Coblis.
PAIN POINT 2
SLOW AND FRUSTRATING EXPERIENCE
In order to analyse the experience, I have created a user flow to reflect the Sphere Grid system implemented in the game. Along with it, I also listed and organized all the resources required to utilize it. By doing so, I was able to identify and better understand the core issues of the experience and come up with alternative solutions.
CURRENT USER FLOW
The left side shows the steps in character development. The right side all the different spheres that can be used within the Sphere Grid.
Open the image here for better viewing experience.
Many possibilities, many decisions to be made
In the user flow of the original Sphere Grid design, we can already see there are many decisions to be made.
Does the player want to move forwards or backwards?
Are they on or next to a non-active stat or ability node?
Does the player want to activate them? If yes, do they even have the relevant spheres?
There are a lot of resources to find and collect
The number of sphere types is also overwhelming as they are highly specific. For example, the player could own many red spheres, but it might happen that they don’t own the strength or fortune types, which is the one they need in that specific point of the Sphere Grid. As a consequence, the player will either:
Remain where they are until they manage to collect the relevant sphere, consequently wasting time hoping they are strong enough without that node to continue the game.
Ignore the nodes for the time being and move forwards, waiting until they collect the required sphere and then going back to the node they had to leave behind, thus wasting precious resources and time.
FIRST REDESIGN
Open the image here for better viewing experience.
Reduce the amount of single decisions a player has to make
In this redesign, there are less decisions to be made.
The action of moving backwards it made redundant, as any node the character has passed by is either learnt automatically (if it is a basic stat such as strength or defence) or becomes learnable at any moment through the use of spheres (such as luck or ability nodes).
Remove unnecessary spheres
The number of sphere types has also been reduced either as a consequences of the changes above, or for simpler and more straightforward experience for the player.
There are less red spheres required. The only ones needed at this point are the ability and fortune types, which can be used any moment to learn any learnable nod. This is also to enhance the feeling of progression, as the nodes that add little to attack or defense stats do not greatly influence the game from the point of view of the player. However, being able to unlock a whole new ability gives a sense of purpose and progress when done so.
The light blue return sphere, which teleports the character to any previously activated node, is also made redundant. Now the only light blue spheres are teleport (warp to any activated node), friend (warp to another character’s spot) and warp (warp to any spot on the grid).
Two yellow spheres are merged: white magic and black magic, which are now both presented simply as magic sphere.
SECOND REDESIGN
Open the image here for better viewing experience.
Make the experience even simpler and more straightforward
The user experience could be further simplified.
This time, ANY node that has been visited on the Sphere Grid by the character is automatically activated.
This again affects the number of spheres to be collected.
Red spheres are made completely redundant and therefore removed from the game.
The rest of the spheres can still be used to teleport around the grid, clear weak stat nodes and replace them or the empty ones with stronger stats.