Magic Tiles 3 was one of the most popular piano mobile games in the market with more than 100 millions players as of 2018 when project owners from Amanotes decided that the game needed a new modernized, tidied up user interface to replace the then dated one. The challenge was to enhance the look and feel of the UI while retaining the layout/color palette which had become iconic and distinguishable of Magic Tiles. Keeping this in mind, the new UI featured contemporary techniques of arranging elements and typography, resulting in a cleaner look which is visually appealing while keeping the playful nature of a super casual music mobile game.

The game map is a diagram showing how the structure of the game is planned, how many screens a player has to go through and in which order. As I was mainly in charge of the visual redesign, the game map was largely unchanged from the last version of the game to avoid confusing users who have gotten used to the structure of a popular and established game.

Similar to the game map, individual wireframes for each screen are made based on previously proven working principles. The Project Owner and Business Analyst were very conservative about changing the structure of how information is displayed, so the main focus when approaching this was to upgrade visual clarity above all else while avoiding making unnecessary changes that might trouble users whose habit were built from years of playing.

As a pre-existing product being used by millions of people everyday, it was important for me to be aware of the color palate of blue and purple being already a distinguishing feature of the game as a brand. The primary challenge was to incorporate elements of the UI that consist of many different colors due to the nature of music games. Being both dynamic and consistent of colors usage in the range between blue and violet makes sure the game maintains a distinct look.

Being born inside Accademia di Belle Arti di Urbino as a didactic project Course Sort design from the Master of Visual Style Campi Visivi, Titillium Web emerged to the interface design scene as a dynamic and versatile typeface. Coming with many different weights and having solid fundamentals, the font family makes it easy to create contrast without making compromise on readability.