Role: UI Artist
Timeframe: 1 year
Software used: Adobe Illustrator & Photoshop (Concepts) , 3DS Max & In-House Editor/Tools (Implementation)
Platforms: PlayStation 4 · Xbox One · PlayStation 5 · Xbox Series X/S · PC (Steam, Origin/EA Desktop)
Project Status: Shipped

F1 22 brought the additon of a new 3D environment for the player to showcase their trophies which can be seen as a backdrop in various areas of the game and when visiting another players F1 Life. Along with this change, the UI was updated to better comliment the use of the 3d space and block the appearance of league medals shown on the shelves. This area of the game is also used to highlight stats which I did a minor update to this year adding a more tranparent background, allowing for the colours to shine through when viewing personal statistics or comparing them to other players.

These changes acted as more of a reskin of the existing screens while moving interaction implementation from custom states & styling to the default animation states used throughout the rest of the game. An example of this can be seen on the trophies cabinet slot selection screen. Extra information text has now been moved out of the interaction area and into a seperate header element used in other areas of the game. I also moved the tiles to use general/shared references and materials which futureproofs the screen for changes going forward. This means when the overall styling for tiles across the game is inevitabley updated, these will follow suite. To help give greater clarity to when tiles are empty vs filled the tiles use a colourless background and full colour with pattern when showcasing a trophy in that slot. The layout carousel now masks off sooner to give more room for trophies and medals on the right; these tiles also match the layout of the shelves within the 3D environment.

This change enables the same sized sections and panel on the right side to be used across the different selection screens. With the larger area on the right side, more can be made of the 3D trophies & medals. I made these larger bringing out greater detail. Adding branding elements into the screen liven's it up a little tying it into the game more. This meant that the amount of duplicate information we show here (within reason, no code support) could also be reduced. Finally, I made sure that this time changing the screen was also used to fix various issues & bugs found on these screen to improve the users experience. For example, when the screen was in an empty state there was nothing to tell the player what was happening or could be actioned here.