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

Theatre mode within F1 22 allows the player to view replays of various different types of events saved by the player. Here they can view their most recent highlights and save them so they are kept forever. Tabbing across also allows for full replays of an event to be viewed. This mode hasn't really changed since around 2019, so with the introduction of F1 Life and bringing the UI into the 3D environment I really wanted to make the most of this, updating it to be more modern. To help with believability and symbolise this UI is in-world I also wanted to make it feel different to what is seen on the frontend screens of the game while also feeling familiar with the real-world products the players will use. Some elements however still remain the same as the branding of the game along with how interactions work throughout the game need to remain consistent.

I drew references from social media and existing streaming services in creating this screen and believe that can be seen in the final result. Some examples of this are making better use of the imagery we have available. Taking these and showing them larger in the background on the screen adds both style and helps the player see which track the clip is from much clearer. As the UI is not full screen in this area of the game, if we were to use just tiles it would be smaller than the rest of the game and hard to see such a small image. This also gives a nice backdrop for the larger informative icons representing what the clip is about which changes based on which tile is hovered over. These icons and extra information also include brand colouring which changes based on if the clip is from F1, F2 or a player-customised car.

Various social media are adding stories to their platform. Short bite-sized videos which expire after a certain amount of time. They also always seem to be symbolised with selectable circles at the top of a feed/screen. This is very similar to what recent highlights are within the theatre mode. The connection there seemed obvious to me. This change also helped to symbolise the difference between the 2 types of highlights that appear on the same screen. One that can expire/ be overwritten and the other that is saved and locked in place. The replays tab takes all these styling and layout changes and gives the player a scrollable grid of tiles for all the full race replays they want.

This theatre environment is also used for selecting which virtual showroom the player would like to visit to display the various types of cars within the game. Again with this screen, I wanted it to feel different from other UI within the game and make the most of the available space using large imagery for what is essentially a simple selection. Experimenting and trying something different, I opted to remove the highlight border altogether and focus more on using light/saturation to portray the selection. This allows the visuals and branding to do the talking and show off the difference between the cars.

*** The images for the virtual showroom were captured and created by other members of the team after explaining what I needed ***