Glassbreakers - Champion Cards
In Glassbreakers, each of the champions has a unique set of abilities. To help players make informed decisions about which champions to take into battle, we chose to display their information on small billboards above them which we referred to as “champion cards.” When I joined the project the champion cards were in a very rudimentary, placeholder state. I was tasked with refining them to meet the needs of players, and after several rounds of experimentation, feedback, and iteration, I landed on a final design that served its intended purpose while also informing what would become our overall style for other UI elements throughout the game.
The final design for the champion cards that shipped with the game. The front side was visible by default, floating above the champion. When a champion was picked up and held, the card would change to the back design so you could bring the champion closer and read more in-depth information.
Charting the evolution of the card designs. On the left was the initial blockout, before a design pass was taken. The middle was an interim design testing some of my design concepts. The right shows where I ended up after testing and iterating on the previous designs.
An interim design for the champion cards. The color palette here was placeholder, and the main foci in this stage were layout, how much we could communicate through iconography, and hierarchy of information.
The cards went through a lot of iterations. Designs with the most promise were brought into game and tested, then further iterated upon based on playtest feedback.
The final card designs, shown in game in the shipped product.
A demonstration of the two-sided cards. When champions were picked up, the billboard displaying the card would switch to the "back" of the card showing information about the character's stats and abilities.