Designing a skill tree screen for Dawn's Circle
Roles:
◆ UX Designer
This is a case study centered on my work as an UX Designer on the Dawn's Circle team at Tempo Tempest Games.
Roles:
◆ UX Designer
This is a case study centered on my work as an UX Designer on the Dawn's Circle team at Tempo Tempest Games.
Dawn’s Circle is a fantasy roleplaying game (RPG) developed by USA-based studio Tempo Tempest Games for PC platforms. It is currently in-development and has a planned release year of 2027.
Roleplaying games like Dawn’s Circle have a lot of design patterns and required screens that are a staple for the genre, such as menus for battle commands, weapon upgrading and inventory management.
This case study focuses on the design process for Dawn’s Circle’s skill tree, a type of game mechanic in which players can unlock customizations for their characters, such as abilities or skills, in a format that forms a branching out hierarchical sequence.
While there isn’t a set pattern for skill tree menus to be formatted in, typically they’re organized into linear buttons that sprawl out and represent branching paths in the character customization offered to players.
In Dawn’s Circle, circular shapes are very important to the story and the game’s visual motifs. The skill tree itself is actually a storytelling tool, as its very presence and any progress unlocked through it have special meaning to the game’s plot and setting. As such, it is necessary to format the skill tree in a full circle, which presents a challenge as it’s an unusual configuration for this type of menu and requires special care to comfortably include branching paths and buttons in a readable and player-friendly way that also fits the game's screen size requirements.
The game also requires six color variants of the skill tree as there are six playable characters, each one with their own skill tree in their individual signature color. This is an extra challenge, as the interface has to be designed with these specific color constraints while also certifying it is player-friendly and visually pleasing.
The first step in designing Dawn’s Circle’s skill tree was analyzing how other games handled their own screens. This includes studying both skill trees that have the standard linear pattern, as well as skill trees with circular or half-circular designs, which allowed me to better understand how to design such an interface.
Informed by the screens studied during the benchmarking phase, I started the ideation process. Elements like placement of text boxes were based on other previously designed screens for the game, so designing the skill tree circle itself was the main task.
The skill tree went through several iterations, during which buttons were adjusted in size and shape to better fit the available space.
I further refined the skill tree by changing the buttons from hexagons to circles to better fit the interface’s circular theme that is important to the game’s story. As each button can be upgraded at least once, I defined yellow as the color that means any ability is fully upgraded, as it stands out in all color variants of the skill tree.
The placement of the smaller branching buttons is not final and was decided purely as a visual test for the available space within and around the skill tree.
.png)
I also designed several states for ongoing completion and upgrading of the buttons in the skill tree.
After that, I defined the six color variants for each character's individual skill tree.
.png)
As Dawn’s Circle is still in its development cycle, the designing and testing of all its interfaces including the skill tree is currently in progress. It is subject to change according to the needs of the game and the players. However, the work that is already completed forms a base for any future changes, should they be necessary.