A game’s UI (User Interface) and HUD (Heads up Display) are essential to creating a good game experience, it provides the player with vital information and provides feedback for their actions.
World Map

HUD
Mock-up HUD, using the Witcher 3: Wild Hunt gameplay as a background:

Skill Tree
This is a mock-up of what the skill tree will look like in game, skills that are have links to them are locked until the skill before it is unlocked. Starter skills, the large skills closer to the middle, are only available to be unlocked when the first area in the corresponding boss’s area is complete. For example, ‘Fire Ball’ can only be unlocked after the first area of the Demon King’s region is completed.
The larger the icon of the skill is, the better the skill is – however, this means that the skill costs more SP (Skill Points). Each skill element has its own corner in the skill tree, yet they all require SP to unlock.
Red – Fire Skills | Blue – Ice Skills | Purple – Shadow Skills | Green – Trickster Skills
Skill Elements in a clockwise direction are weaker, whereas ones that are anti-clockwise are stronger. For example: Fire is strong against Ice (anti-clockwise) , Fire is weak to Shadow (clockwise).

These skills can be inspected in order to read the skill’s description, found out how many SP it costs before unlocking, and upgrading skills that are already unlocked.

These upgrade and skill descriptions can be found in the skills tab in the GDD.
While unlocking skills, the player will be made to hold the unlock button, this is to ensure players don’t spend their SP accidentally. Furthermore, the use of SP can be un-done as long as the player hasn’t exited the skill tree. Lastly, when the player has finished using the skill tree, they will be prompted with ‘Are you sure?’ to allow them to put one last thought into their expenditures.