New Avatars

I was working on the look and animations for an XP progress indicator which involved changes on the avatar itself, too.

From Rank to XP

Instead of Seasons and a rank-based system, we changed to a level-up system. My job was to find a solution for the exchange: getting rid of the old system (rank and stars in the avatar) and instead adding an indicator for the level and the XP the user currently has. Knowing from myself I want to know how far I’m away from the next level-up, I came up with the progress bar included into the avatar. This bar would be involved in the level-up, where I had some ideas for the animation.

Style Exploration

I explored some styles for both the XP-bar and the plate showing the user’s level. Having a new indicator in the game made us wondering if we should bring a new color to the game, too, instead of strictly sticking to the color styleguide. I also tested it on a darker background, as we planned a darker screen for the level-up.

The avatar we ended up with got tested on all screens and comes in different versions. The full version contains the two loose parts of the circle - I kept them because I wanted them to be animated in the level-up. During tournaments, the game comes in a black/whitegold-look, so I adapted the new logo to the tournament-style as well. These are the new avatars in the default and tournament look:

I was working on the look and animations for an XP progress indicator which involved changes on the avatar itself, too.

From Rank to XP

Instead of Seasons and a rank-based system, we changed to a level-up system. My job was to find a solution for the exchange: getting rid of the old system (rank and stars in the avatar) and instead adding an indicator for the level and the XP the user currently has. Knowing from myself I want to know how far I’m away from the next level-up, I came up with the progress bar included into the avatar. This bar would be involved in the level-up, where I had some ideas for the animation.

Style Exploration

I explored some styles for both the XP-bar and the plate showing the user’s level. Having a new indicator in the game made us wondering if we should bring a new color to the game, too, instead of strictly sticking to the color styleguide. I also tested it on a darker background, as we planned a darker screen for the level-up.

The avatar we ended up with got tested on all screens and comes in different versions. The full version contains the two loose parts of the circle - I kept them because I wanted them to be animated in the level-up. During tournaments, the game comes in a black/whitegold-look, so I adapted the new logo to the tournament-style as well. These are the new avatars in the default and tournament look: