Role: UI Artist
Timeframe: 1+ years on the project
Software used: Adobe Illustrator, Photoshop (Concepts/Creation) | In-house UI Editor & Engine (Implementation)
Platforms: PlayStation 4 · Xbox One · PlayStation 5 · Xbox Series X/S · Google Stadia · PC
Project Status: Shipped + DLC Content

*** Update ***
With the introduction of the Energy Pack (DLC 3) Codemasters Racenet integration was added to the game. Meaning a quick and easy set-up flow for users was needed to connect the game/platform to their account. This is completely optional for the player. First, a simple options screen gives 3 options, to sign in to an existing account, create a new one or skip the process entirely. As this has been in previous games, most players may not see all these screens as the connection can be automatic on launching the game for the first time after this update. Anything done can also be undone within the game's settings after. This gives the player the ability to make changes at a later date and not lock them into anything. My favourite part of working on the UI for this integration was the popup to celebrate that the link has been successful. The player receives 2 exclusive liveries as a reward. This links into my rework of all the notifications and popups throughout the game, which can be found here https://www.artstation.com/artwork/QnkNLr.

The player's stats were being tracked in the backend, helping with the addition of stat stickers for the playercard (& later in-game stats screen, but that's a screen I didn't implement). After DLC 4 we released a smaller addition called the Red Bull Revolution Update which included this feature along with the UI I created for applying stat stickers to the playercard. These new type of sticker represent different milestones in the player's progression. They are unlocked by completing a challenge like 'x number of drifts in-game' and then purchased for in-game currency. They are able to be applied after that. I built this off the existing UI, using larger tiles (2 normal sticker tiles combined) to show these textures and visualise they are different from regular stickers. Again, building off existing systems these unlock requirements were shown using a new styling for the global purchase UI.

With the Supersize Content Pack (DLC 5) I got to work on some playercard background textures. These can be seen showcased towards the end of the Card Backgrounds Walkthrough video.
***

The Player Profile is where you get to customise various elements to show off your personality. The majority of this is done within the playercard screen. One of the ways players can differentiate themselves from each other in-game. A playercard is built up of a background texture, lanyard, nickname, stickers & visual effects. Each option is accessible by navigating through the tabs displayed at the top of the screen. These screens use the same type of navigation, making things easy to understand. A grid of different-sized tiles is used to display the artwork or representations of effects, this can also be scrollable if needed (communicated through the addition of a scrollbar). To the right of this is a live display of what the playercard would look like if the currently hovered option was to be chosen. This was crucial to have. It gives the best user experience, not just relying on the art shown on the tiles.

The unlock state of all these items is shown by the presence of a lock on the tile & its visibility, along with what I like to call the global purchasing component (bottom left of the playercard). This has the exact same styling throughout the different areas of the game to constantly reinforce its communication & meaning. I go into detail on this in my vehicle select project.

The player can also customise a few other items that are shown on the player's car in races or online events. You can choose which country's flag you associate with. The UI again consists of a large scrollable grid of stylized stickers displaying country flags. These use a rounded square design, apart from the first option representing worldwide nationality, using a circular design. This differentiation is for players that don't associate with a particular country and is the default selection if not changed by the player.

The race number displayed on the car in-game is also customisable. Including the number and the background it's displayed on. Instead of listing all the possible numbers as individual tiles, I chose to use a calculator design for the number selector UI. A familiar concept for people to understand when inputting 2-digit numbers into the game. Once done, just tab across to backgrounds. The race number you just input will show over these background textures. This shows a representation of what these 2 choices will look like combined. Just make a choice. I'd have liked to add more backgrounds for this to the game but unfortunately, we couldn't get enough support & time/resources for this.