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

Tutorials within F1 22 can be accessed in 2 different ways. Both contain different types of tutorials to help the player within their current area of the game along with different ways of displaying this content.

To start with throughout the frontend of the game there are pop-up tutorials which help guide the player through new modes or generally help explain a feature. Supercars or F1 Life for example. These can also be triggered manually by the player if they become stuck or unsure about the area of the game they are in. I updated this type of tutorial within the game this year, removing the accompanying images. This is not something I would recommend when it comes to tutorials as the images helped explain the given text and supported them by giving more context quicker. However, as the F1 game is becoming larger with more content in every release having to check and update these images each year (making sure they match the screen they're referencing) is becoming too large a task when considering how many tutorials there are scattered throughout the game.

To make sure that this change wouldn't negatively affect the learning these tutorials give I changed the backing of the new styling, so it wouldn't fully block out the screen behind them (as it did previously). Having the screen the player is currently on, the one in which the tutorial is referencing is shown in the background. This gives that connection between the text and a visual aid as to what the screen looks like, while also eliminating the need for us to make/update imagery each year to match the screen in question.

Changing the pips (shows the player how many tutorials there are to progress through) styling and placement to the left of the screen also helps anchor the backing element of the text to this side of the screen visually. The coloured bars can also be changed from red to blue which represents F2 within the game. As these tutorials are really text-heavy I wanted to implement something that would help with quickly scanning them and getting a general understanding of what is being explained. Here keywords with each paragraph are highlighted in bold with a drop shadow to lift them from the block of text. This is something which I am really happy I managed to push for and was finally implemented in full within the last few weeks before launch.

The second area of the game in which tutorials can be accessed is during gameplay. If the player needs extra help or information while driving they can pause the game and access the tutorials hub. Here the tutorials are all based on gameplay elements, with learnings that can be used when back on track. These are showcased in 2 styles. A slideshow of a few images or a short video to help explain the feature in question. There is also some extra explainer text on the right-hand side of the screen. I updated the tile imagery and slideshows for F1 22, along with the general styling of the screen to match the rest of the game. I gave the slideshows a subtle pattern to back the imagery and tie them more into the new branding along with increasing the size of which the videos are displayed, making these have greater focus while on screen.