Anna Doronina

nna Doronina

All illustrations are done with pencil and pen in Figma.

anna.doronina@ro.ru

annadoris

annadoronina1

Bē

annadoronina1

MetaRacing

Redesign of the crypto-gaming web application

Task

Redesign the web application, preserving familiar patterns but improving user experience, functionality, and visuals; create a responsive mobile version.

My role

UX/UI designer in the design team

Implemented by me

UI kit & components / image generation and creation / Login and registration / Store / Wallet / Races / Inventory

Implemented with the design team

Analysis of references / user flow / wireframes / UX analysis / Marketplace / Garage

Date

May - July 2024

Design process

Problem research

discussion of task details, defining requirements
defining responsibilities, deadlines, and ways of interaction

Definition

UX analysis: identifying the strengths and weaknesses of the existing interface

Development

building User Flow: refining existing scenarios, corner cases, errors
collecting references, developing UI-kit (typography, colors, components)
drawing layouts according to the agreed UI

Implementation

collecting feedback from the client, making adjustments

How will a redesign of the existing solution help the business?

Increasing Retention

Thanks to the updated UI/UX, users will find it more comfortable to return and spend more time on the platform, while preserving familiar patterns will not deter loyal users.

Increasing Conversion Rate

Thanks to the development of the scenario for unregistered users (previously no functions were available without registration), unobtrusive reminders about races, clear navigation, and improvement of key sections, we will increase engagement and convert users to the next steps.

Growth of NPS and new users

A clear logic of operation and a lower number of errors will increase overall satisfaction with the service and the willingness to recommend it to friends, while an adaptive mobile version will attract new users who previously were unwilling to use it.

To fully utilize the service, you need to register via email and receive a code phrase like in a crypto wallet.

Races

The first page that the user arrives at after registration. Here they can choose the type and kind of race they want to participate in. In case of winning, the user has a chance to receive internal currency, which can later be withdrawn to a crypto wallet.

Each race differs in the number of participants, prize pool, entry threshold, and participation fee. There are also seasonal races where special prizes can be won.

We simplified the card forms, made the navigation within the types of races more noticeable, organized the flow of participation in the race, highlighted all important race information and made it more readable, tidied up the dimensions and typography, and made the main menu clearer and cleaner.

Before the redesign

After the redesign

If the user does not have a car yet, on the race page we offer him to proceed to purchase a Carbobox (a unit that contains a random car model). After opening the Carbobox, if the car is of a sufficient level for the race, the user can sign up to participate and receive a notification when the race starts.
The race itself can be skipped and the user can go straight to the results or watch a short video simulation of the race.

At the end, the user sees the place they took, the points earned, and the winnings. They can also go to the race to see the results of the other participants. On the main racing page, there is a tab with all the past and upcoming races of the user.

Store

In this tab, there is an option to buy a Carbox or Lootbox (a unit that contains a random item). Upon purchase and opening, the user must pay internal currency and a blockchain fee, so at each stage, we display a confirmation pop-up with all expenditure information.

Sometimes the user may accidentally receive a rare Lootbox or Carbox upon purchase; in this case, we show them a confetti animation and congratulate them on their luck.

Garage

All cars are displayed on this tab. The user can here proceed to purchase a carb box, send the available cars to a qualification race to determine their characteristics, upgrade qualified cars with purchased parts with different parameters, view the overall level of the car and separately each of its characteristics (acceleration, handling, durability).

We have added brief info about each car in the cards below to make it easier for the user to navigate through their large number. We simplified and made the flow of interaction with new and current cars clearer, and cleaned up the UI.

Before the redesign

After the redesign

Inventory

Here you can view all your details, cars, lootboxes, and carboxes, open them, send them for sale, remove a detail from a car to be able to attach it to another vehicle.

Marketplace

Here users sell cars and parts that are in their inventory. The principle of an auction applies — the user lists an item for sale at their desired price, others either agree to it or make their own offers. One can agree to the most beneficial price for themselves or withdraw the item and refuse to sell.