UI Redesign
Mobile Game UI
About the project
I reskin the UI home screen of a mobile game I used to play a lot, Top Drivers, to modernize the UI and make it look more premium.
The current UI design has become visually outdated, as have some of the UX conventions.
Tools Used
Visual references
I collected references from other sources to analyze styles, layouts, components, shapes, colors, etc.
Most racing games have a clean/bold/dinamic design because of their relationship with cars and their type of users, from track to offroad, modern or old, their interfaces and components are mostly square with a blocky layout easy to read (with some exceptions).
Most reference sources have an easily identifiable color palette with good accents for each of its actions, as well as consistency in its components.
TOP DRIVERS Brand
In addition to the Home Screen, more screens and their components were also explored. It is discussed in a little more detail below.
Other parts of the design related to the TOP DRIVES brand were explored, such as the app icon, images found in search engines (google), app store images (Mexico Store), social media like Youtube, Instagram or Facebook. In order to understand the relationship between brand and product.
Other products from the company were also reviewed to find visual strengths and create differences between products to make them distinguishable from one another.
Home Screen Analisys
I analyzed the current screen to find areas of opportunity based on my opinion, here are a couple visual points to highlight:
We cannot clearly and quickly identify (by doing a visual scan) which action is more important than another.
The icons do not have a similar construction or layout, this leads to inconsistency and doesn't help to convey a premium product.
The use of typography is very similar that we do not distinguish a clear hierarchy.
The use of photographs of the real cars as backgrounds in some components is a great element of TOP DRIVES to convey the premium feeling and empathize with the player's interest in cars.
Ideation & Assets
Based on the comments and references above, I explored several approaches to solve each one based on the wireframe provided for the test in order to have an up-to-date and modern interface.
Although I reorganized certain elements, I tried to keep the general layout in order to the current user recognizes the navigation of the current game.
Final Render & Outcomes
This exercise helped me to interpret the visual essence of a company and to reskin an interface to make it feel new and fresh.
