Fuser - Battles — Madeleine Shopoff

UI/UX Design & Implementation • Motion Graphics

Over the summer of 2020, I joined Harmonix Music Systems for a short-term contract to help finish up a day-1 feature for their newest game, Fuser.

battles hub

Alongside the art team, I helped design the layout and feel of the Battles hub screen in the main menu, in addition to doing the technical implementation as well as pagination animations.

I wanted the screen to feel dynamic while still adhering to Fuser’s existing look and feel. I created a pagination animation which would bring the page to life, while also keeping to a similar motion to the pagination animations for the in-game song selection list. Due to technical reasons we couldn’t completely duplicate the song list’s animations wholesale, so instead I created something with a similar feel but unique presentation.

Battles Hub

I tried to make the Battles hub screen as responsive as possible. Any selectable items have highlight states, and the player is given information on their current loadout as well as their ranks and rewards.

Battles Hub - Pagination

The pagination animation was created not only to help bring the screen to life, but to also reinforce Fuser’s visual style. The wipe animation mimics the wave shape and motion from other areas of the game, but is a new motion graphic unique to this screen.

Battles Hub - New Rank

If the player’s rank changed since the last time they were on this screen, we notify them with a highlight and wipe animation which mimics the visual language of “unlocks” in other areas of the game.

End-of-Match rewards

In addition to the main menu hub screen, I implemented and animated the end-of-battle rewards sequence. Instead of being purely informational, we wanted to give the player a sense of achievement and success when winning a match, and not rub losses in too much. There are various states of the rewards sequence, showing the player how many tokens they’ve earned, how their Battles rank has changed, and any rewards they may have locked from reaching a new rank or tier.

When the player wins a match they are awarded Crows, which will add up to increase their Battle Rank. Within each tier there are 10 ranks, starting with 10 and ending with 1. In addition to showing the Crowns the player earned, we also needed to show the player how their rank and tier had changed if applicable. The animation sequence goes through various stages: awarding or removing crowns, showing a rank up or down animation as necessary, and showing a tier up animation if applicable (since Tiers cannot be lost, no Tier decrease state exists).

Once the player has reached the Star tier, they will no longer see a rank number and instead be shown their Matchmaking Rating (or MMR). We needed to reflect that in the rewards sequence as well, and tried to make it equally exciting as achieving a new rank.