Introduction

Initially the game design concept included base racing concepts and mechanics, primarilly the Asphalt 9 mobile game was the main reference as a start-off point. However there are game design suggestions which could be reconsidered from the UX output, called for making the gameplay seamless and intuitive.

Objective

Bridge the gap between user common playing behaviours and established game mechanics

Align the business needs along with the overall gaming experience

Design complementary to the visual style UI supporting and enhancing the general game feeling.

The working process

Research

Discovering popular mobile racing games mechanics, visual style, general impression, commercial aspect and business input.

Ideation

Dissecting mobile racing games UI in order to discover the UX solutions in more precise spotting UX problems and space for improvement.

Brainstorming the new UX solutions.

Design

Making design statements out of the insights gained, wireframing and gaming flow in order to showcase the solutions.

Researching the new lore and style. Setting the visual hierarchy (by size and color contrast) of the UI components based on the UX flow solutions.

Working on visual style in more detail, simultaniously evaluating the solutions by user testing.

Establishing the design system

General UX flow

The initial UX flow

It was decided to merge UX solutions into more intuitive set making the navigation more concise:

Sub-flow UX solutions

Home

The home screen should has the maximum functionality over the vehicles.
The following features: search and select a vehicle, upgrade it’s parameters and rang, manage it’s appearance.
‍Additionally: access level screen, select a play mode and start a race.

The searching can be displayed as a tile view:

Alternatively, there’s a dark background version of a home screen. The style makes the UI more clean and easy to digest but not that immersive.Additionally the background narratively informs player which planet they currently complete.

The CTA button leads player to the map to select a race.

Map and Episodes

Select an episode and planet.

Select the level and find out race goals as well as rewards for goals completion.

In order to simplify the flow we made the vehicle selection screen optional. The selected vehicle from the previous screen is intuitively the one with which the user is to race. The user is aware of selection with the vehicle thumbnail which also leads to vehicle selection screen in case a reselection is needed.

Vehicle selection

The screen is designed to support edge cases which might occur if the vehicle doesn’t have an adequate level or ran out of fuel.

Discover Low vehicle level and out of fuel edge cases flows in Figma file

Loading, HUD and pause

Post-gameplay

Showcase race results, rewards claimed and more detailed results with a table to compare players score with rivals’.

Regarding players retention and flawless gaming experince the screen leads to two options:

Restart the race and confirming the vehicle selection.

Or miss out (go to map) to select the following race.

Battle pass

The battle pass includes 2 types of rewards: base (ones those are claimed with achieving goals) and premium (those are added to base rewards if player purchases premium pass)

More materials

To delve into the design process visit a Figma file

Delve into the case by proceeding to Figma file

There you can discover:

• General flow
• Low vehicle level and out of fuel edge cases flows
• Design wireframe iterations
• References