Why Redesign?
Identify the pain point: It’s not delightful.
Gacha is one of the major War Dragons’ revenue drivers. As a visual designer, what I can do is seeking for a solution to initiate its further potential.
The screengrabs on the right are the previous Gacha screens. Although they have certain degree of visual language and consistency, the screens are still far from polished.
At the first glance, highlighted chests all have different camera angles, the uneven perspective breaks the sense of space into pieces; Too much black on the progress bar, and item frames; typography was bad. lastly, it’s not exciting.
Previous Design
( Up: chest screen, Down: result)
Rare!
How?
Exciting Cadence and contrast that delight the players.
Break the current dimension, introduce movement.
and of course… Iterations.
The Answer would not be hard to find if the goal is to make the chest reside in a more interesting place and the answer is: Motion. The introduction of Motion can simply make this screen become a highly contrasted area since there is a minimum amount of motion or animation residing on another screen.
The backplates of the Chests have the same design, with no contrast across all three chests, the only contrast here relies purely on the styling of the assets. Making new backplates(cards behind each chest) would be a good start.
Give everything a sense of #PREMIUM is just halfway to creat excitement. What we actually need is CONTRAST, people are all about compare and pick: premium stuff shines the brightest when staying along with less-premium stuff.
Thereby, a defined visual language is needed in this task. Every design elements need a reason, which is the key to making a comprehensive visual. Plus. it will be a hard march if design without a visual language that guides you to make designs for many corners of the screen.
The Chests.
Correct the camera angle.
Render’em out.
The previous screen doesn’t have any motion, movement, which is a major pain point that stops us from making a player delight UI (Especially for a game that’s still surviving in the modern-day). Therefore my major goal is to introduce movement, and animation, to support the player's delight.
With the help from our front-end engineer, we figured that using sprite sheets is the most performance-efficient way to display the animation of the chests.
Since the 3D assets of the chests already exist, getting the correct assets is just the matter of rendering them again. Blender 2.8 is the first thing that came to my mind: the built-in purely GPU-based render engine Eevee which is capable of rendering each frame in a matter of seconds which saves time, Plus its affinity ability with PBR texture is perfectly suited with the 3D assets that I had.
I chose the orthographic as my final render camera angle because it helps me prevent introducing too much depth to a UI screen meant to be as flat as possible.
Meaningful choice of Shape, Color, and texture.
Play with limitation, also with innovation.
I have decided to borrowed the design language of the minor event introductary page from the live game: Gold is well-suited with overall-blue screens in events, Nordic pattern is also good with fantasy and dragon artstyle. The golden substance can define a shape, also define its texture.
Framing of the Chests.
It’s nice to have something #PREMIUM
However, #NOT-SO-PREMIUM is also the key.
When designing the framing for chests, I did a few things on enhancing the visual weight: a touch of the paper texture distinct these plates from everywhere else. The shape pattern on the top portion of the plate inherits the design language mentioned above, and it is pointing downwards to guide the audience’s eye to the most important part of the UI: the chests. I make fake floor elements to grounded the chests, creating a sense of depth to make them pop.
The color choice also followed the design of the chests: the bronze plate uses color under a narrow hue range which is a desaturated brown, the plate for silver chests also used the narrow hue range near blue but slightly more vibrant, the gold chests were meant to be the best chest at the moment, so I made it a complemental color between gold and a desaturated purple. I wasn’t making everything here look super premium but creating a set of contrast. A rule of thumb here is that the contrast is all about creating excitement, if there are premiums everywhere, then nothing is premium.
Item Casing.
Good “goods” come with good “packaging”.
Following the design language and method of creating contrast above, I design the casing system for items. Players need the sense of rewarding, a nice packaging that comes with the item is a universal game thing that is welcome to have. I will also attach a document about the color choice for the rarity below.
The VFX and PNG sequences.
Another technical limitation we have to respect.
The GACHA page resides on the HTML so we have to respect its technical limitations: things have to be light, there are no fancy particle systems to utilize. So I have decided to use pre-rendered PNG sequence to make the texture atlas. Not like video files or GIFs, this method allows the assets to have the alpha channel, which is a definitive solution when it comes to making VFX when there are no other supportive methods to making them.
Due to the product is adding the amount of the chest after the first redesign, one of the first “chest open” VFX must change. The chest UI screen is not horizontal scroll-able, because the position of the chest is no longer fixed on the screen, which means the departing position of the particle is not predictable anymore, a new way of solving this problem has to come out.
So I work closely with our web engineer to develop a new solution, break the VFX into two parts: 1st part is the particle shooting out of the screen; 2nd part is the VFX landing onto the first item showing up after you open the chest. this way, we don’t have to predict the position of the chest anymore, the only matter is how to make the VFX look like a streamlined movement.
Old VFX
New VFX Solution
thank you!
Extra Reading
Following is a document that I made to communicate some design decision about color.
