UX / UI designer / programmer
For an exercise, I had two weeks to propose a new artistic direction for one interface of Endless Space 2, a 4X game developed by Amplitudes studio.
The objectives were to revise the interface design (layouts, typography, assets, color rules, pictograms, etc.) to improve the game experience while remaining consistent with the established universe.
The interface chosen for the exercise was the ship design: this is where the player can construct ship blueprints by adding modules on the ship slots. There are different module types (offense, defense, support), and it's up to the player to determine the purpose of his ship and how he wants to build it.
The first step was to determine the interface issues. By playing and analyzing this interface, I found three different challenges to overcome:
1) The interface is lacking responsiveness. Each time the player adds a module to his ship, it will affect the ship statistic: A bunch of variables on the ship's offensive power, defensive power, weapon type, etc. But other than the statistic changes, there are no FX or animation to indicate positive or negative changes. It is difficult for a player (especially new players) to determine if the change was beneficial.
2)Tooltips don't highlight the information needed. There are tooltips for every ship's stats, modules, and resources. But these tooltips are just long paragraphs (the font size is the same from the beginning to the end for the ship's stats), and no information stands out to easily remembered an effect or functioning.
Sometimes it is big paragraphs, or different information are mixed up
3) The ship and the interface elements are cramped on the screen. The bottom third of the screen is unoccupied (there are only four buttons for the entire third), and the ship shares the two other thirds with the rest of the ship design interfaces.
this part of the screen is for 4 buttons
With these thoughts, I started to recreate the ship design interface using the Unreal engine UMG. I integrated the initial ship design mechanics, systems, and interactions using blueprints and then worked on the interface design. The first task was to redo the interface layout to make sure the ship is in the center of attention. I wanted to recreate a ship parade scene, with a cockpit interface look, as if the player is watching from another ship, the newly designed ship.
Then to improve the responsiveness, I put feedback on each stats that respond to every module change: if it is positive, it will be highlighted in green for a few seconds, and if not, it will turn red. I took inspiration from RPG mobile games: In these games, players always want to have an overview of their character statistics. To face challenging situations, players need to set up precisely their character, and they need to know what's the impact of their changes.
And for last, I rework the tooltip looking. The objective was to create many different tooltips: each one designed for an information type (modules, resources, statistics). Each tooltip possesses a title for the information it gives, and the font, color, and logos vary depending on the sub information.
