Cycle: Frontier
Company: Yager
Position: UI / UX Designer
Duration: 2021
Engine: Unreal Engine 4
Status: Released
GOAL DEFINITION
When the original Cycle underwent a pivot to transition into a slower, more hardcore extraction shooter - accordingly the UI would get an overhaul and a new art style treatment to reflect this change in tone and direction.
The original UI style was very colorful and flat, with predominantly white text on blue backgrounds.
To achieve this, the UI & UX Designers were given the task to explore a new direction for the UI.
Partially it should also cover a possible addition of gamepad accessibility as there were plans for Cycle to also release on the current generation of consoles.
Original faction screen
Original crafting screen that serves as a base for the exploration
Research
I usually start of by gathering a lot of competitor examples to understand the established conventions before trying my hand at solving the problem. Looking at competitor examples prove itself to be a huge benefit as it provides me with an insight into what works and what doesn't.
EXPLORATION
After getting a good idea of conventions & pitfalls, I've started to compose a simple wireframe to establish all needed elements in the composition.
This usually ends up with several quick variants that I can quickly move around and re-shuffle to find a good composition that works.
I've chosen to combine the factions screen with the crafting screen to cover more ground for the exploration. Previously the factions screen only showed the progress while the actual unlocks were shown in the crafting screen.
In this case I skipped the initial lo-fi composition and used greyscale values to establish the main focus points early by assining them on the greyscale range.
After I was happy with the general composition I've used the available art assets to deliver a first look of the direction it will take. As the gamedesign of this feature was still in flux, I tried to focus more on the visual aspect as the task was to find a new UI direction.
With this composition you would directly see the faction progress with all the crafting unlocks.
The stacked information in the left-side felt too crammed so I split up the faction selection from the current faction progress to have them both more easily readable.
More information and colors are added to the selected weapon
More information and bars are added to offer more meaningful information at a glance of the selected weapon.
Additional information and states are added to the ranks reward list items.
Since a console port was considered for The Cycle,
additional efforts were made to ensure gamepad inputs would work well within the conventions.
Implementation
Eventually the visual exploration served as the base for the new UI art direction and a more fleshed out iteration made it into the final implementation of the game.
Some screenshots of the results after The Cycle UI team had a go at it:
