Battlerite
Fan Redesign, Game UI
Sketch
Photoshop
Battlerite is a team arena brawler that condenses gameplay of a MOBA into arena matches pitting teams of 2 or 3 against each other. "Battlerites" allow players to customize their champions by mixing various ability modifiers. The gameplay is fast, fun, and visually spectacular. This is my personal redesign of the User Interface.
Note: Champion models, environment art, concept art, champion/ability names, champion/ability illustrations, and descriptive text are the creation/property of Stunlock Studios.
Battlerite
Fan Redesign, Game UI
Sketch
Photoshop
Battlerite is a team arena brawler that condenses gameplay of a MOBA into arena matches pitting teams of 2 or 3 against each other. "Battlerites" allow players to customize their champions by mixing various ability modifiers. The gameplay is fast, fun, and visually spectacular. This is my personal redesign of the User Interface.
Note: Champion models, environment art, concept art, champion/ability names, champion/ability illustrations, and descriptive text are the creation/property of Stunlock Studios.
Battlerite
Fan Redesign, Game UI
Sketch
Photoshop
Battlerite is a team arena brawler that condenses gameplay of a MOBA into arena matches pitting teams of 2 or 3 against each other. "Battlerites" allow players to customize their champions by mixing various ability modifiers. The gameplay is fast, fun, and visually spectacular. This is my personal redesign of the User Interface.
Note: Champion models, environment art, concept art, champion/ability names, champion/ability illustrations, and descriptive text are the creation/property of Stunlock Studios.
Process
I started the process by playing the game and exploring the interface. I made notes on things I thought worked and things I could improve. I then moved on to rapidly iterating ideas through wireframes. I wireframed until I was happy with my approach for all the screens I intended to design. I then moved on to establishing look and feel through a style guide including colors, typography, buttons, etc. Finally, I put it all together and created high-fidelity mockups of all screens.
Process
I started the process by playing the game and exploring the interface. I made notes on things I thought worked and things I could improve. I then moved on to rapidly iterating ideas through wireframes. I wireframed until I was happy with my approach for all the screens I intended to design. I then moved on to establishing look and feel through a style guide including colors, typography, buttons, etc. Finally, I put it all together and created high-fidelity mockups of all screens.
Process
I started the process by playing the game and exploring the interface. I made notes on things I thought worked and things I could improve. I then moved on to rapidly iterating ideas through wireframes. I wireframed until I was happy with my approach for all the screens I intended to design. I then moved on to establishing look and feel through a style guide including colors, typography, buttons, etc. Finally, I put it all together and created high-fidelity mockups of all screens.
Front End
Front End
Front End
What’s New Today
The first screen presented to players is the Today section. This houses all the new information for the game, including patches, competitive news, and other information.
What’s New Today
The first screen presented to players is the Today section. This houses all the new information for the game, including patches, competitive news, and other information.
What’s New Today
The first screen presented to players is the Today section. This houses all the new information for the game, including patches, competitive news, and other information.
Store
In the store, players can view and purchase champions, chests, collections, and cosmetics. Currency is either earned through playing the game or by buying gems through the microtransaction store.
Store
In the store, players can view and purchase champions, chests, collections, and cosmetics. Currency is either earned through playing the game or by buying gems through the microtransaction store.
Store
In the store, players can view and purchase champions, chests, collections, and cosmetics. Currency is either earned through playing the game or by buying gems through the microtransaction store.
Champions
Champions
Champions
Champion Collection
Battlerite’s extensive roster of champions can be browsed and filtered by type or ownership. Each champion is framed and labeled with mastery artwork depending on the level achieved through gameplay.
Champion Collection
Battlerite’s extensive roster of champions can be browsed and filtered by type or ownership. Each champion is framed and labeled with mastery artwork depending on the level achieved through gameplay.
Champion Collection
Battlerite’s extensive roster of champions can be browsed and filtered by type or ownership. Each champion is framed and labeled with mastery artwork depending on the level achieved through gameplay.
Champion Mastery
Mastery is earned through gameplay with individual champions. For every 10 levels of mastery a player earns on a champion, they earn a new visual representation frame and icon.
Champion Overview
Selecting a champion in the collection allows players to explore various aspects related to the champion. The overview gives a quick snapshot of the champion, including type, difficulty of play, and upcoming mastery rewards.
Champion Overview
Selecting a champion in the collection allows players to explore various aspects related to the champion. The overview gives a quick snapshot of the champion, including type, difficulty of play, and upcoming mastery rewards.
Champion Overview
Selecting a champion in the collection allows players to explore various aspects related to the champion. The overview gives a quick snapshot of the champion, including type, difficulty of play, and upcoming mastery rewards.
Champion Abilities
In my redesign, I am displaying the abilities in the same layout they will be seen in a match. I feel this aligns more with player expectations when transitioning to in-game. I also feel a video preview is a great feature to include for Battlerite since matches are very chaotic with multiple abilities happening simultaneously. Also, hoverable inline status effects that display tooltips will allow players to learn the ins and outs of gameplay, carrying over to other champions they are trying to master.
Champion Abilities
In my redesign, I am displaying the abilities in the same layout they will be seen in a match. I feel this aligns more with player expectations when transitioning to in-game. I also feel a video preview is a great feature to include for Battlerite since matches are very chaotic with multiple abilities happening simultaneously. Also, hoverable inline status effects that display tooltips will allow players to learn the ins and outs of gameplay, carrying over to other champions they are trying to master.
Champion Abilities
In my redesign, I am displaying the abilities in the same layout they will be seen in a match. I feel this aligns more with player expectations when transitioning to in-game. I also feel a video preview is a great feature to include for Battlerite since matches are very chaotic with multiple abilities happening simultaneously. Also, hoverable inline status effects that display tooltips will allow players to learn the ins and outs of gameplay, carrying over to other champions they are trying to master.
Customize Champion
Players can customize the appearance of their champion from sources including in-game rewards and microtransaction purchases. Customize champion outfits, weapons, poses, emotes, mounts, and companion pets.
Customize Champion
Players can customize the appearance of their champion from sources including in-game rewards and microtransaction purchases. Customize champion outfits, weapons, poses, emotes, mounts, and companion pets.
Customize Champion
Players can customize the appearance of their champion from sources including in-game rewards and microtransaction purchases. Customize champion outfits, weapons, poses, emotes, mounts, and companion pets.
Battlerites
The namesake of the game is where players can customize their champions for the arena. Players can create loadouts or sets of 5 Battlerites. These Battlerites change and modify a Champion’s abilities.
Battlerites
The namesake of the game is where players can customize their champions for the arena. Players can create loadouts or sets of 5 Battlerites. These Battlerites change and modify a Champion’s abilities.
Battlerites
The namesake of the game is where players can customize their champions for the arena. Players can create loadouts or sets of 5 Battlerites. These Battlerites change and modify a Champion’s abilities.
Play Flow and HUD
Play Flow and HUD
Play Flow and HUD
Lobby
The lobby sets the stage for the battle to come. Join your friends as a party or find teammates at random. Champions are displayed with their customizations.
Lobby
The lobby sets the stage for the battle to come. Join your friends as a party or find teammates at random. Champions are displayed with their customizations.
Lobby
The lobby sets the stage for the battle to come. Join your friends as a party or find teammates at random. Champions are displayed with their customizations.
Choose Your Loadout
Before the match begins each player will choose the loadout of Battlerites they would like to use in the arena. The same circular motif is carried over from out of match Battlerite loadout customization.
Choose Your Loadout
Before the match begins each player will choose the loadout of Battlerites they would like to use in the arena. The same circular motif is carried over from out of match Battlerite loadout customization.
Choose Your Loadout
Before the match begins each player will choose the loadout of Battlerites they would like to use in the arena. The same circular motif is carried over from out of match Battlerite loadout customization.
Combat Clarity
For the HUD, my approach was to contribute less visual noise to the gameplay. I accomplished this by simplifying a lot of the elements, including the removal of the containing shapes at the top and bottom of the HUD. I also simplified the way cooldowns are handled, opting to not move the ability icon and display the timer inline to the artwork. Typography is also more legible by increasing weight and contrast.
Combat Clarity
For the HUD, my approach was to contribute less visual noise to the gameplay. I accomplished this by simplifying a lot of the elements, including the removal of the containing shapes at the top and bottom of the HUD. I also simplified the way cooldowns are handled, opting to not move the ability icon and display the timer inline to the artwork. Typography is also more legible by increasing weight and contrast.
Combat Clarity
For the HUD, my approach was to contribute less visual noise to the gameplay. I accomplished this by simplifying a lot of the elements, including the removal of the containing shapes at the top and bottom of the HUD. I also simplified the way cooldowns are handled, opting to not move the ability icon and display the timer inline to the artwork. Typography is also more legible by increasing weight and contrast.
Tab
Players can view statistics and selected Battlerites for each player in the arena by hitting the Tab key.
Tab
Players can view statistics and selected Battlerites for each player in the arena by hitting the Tab key.
Tab
Players can view statistics and selected Battlerites for each player in the arena by hitting the Tab key.
Early Match
Gameplay from early in a match.
Early Match
Gameplay from early in a match.
Early Match
Gameplay from early in a match.
The Breakdown
Once a match is over, players are presented with a breakdown of details from each round. Check out what Battlerites each player was using along with how much damage, defending, and disabling each champion did.
The Breakdown
Once a match is over, players are presented with a breakdown of details from each round. Check out what Battlerites each player was using along with how much damage, defending, and disabling each champion did.
The Breakdown
Once a match is over, players are presented with a breakdown of details from each round. Check out what Battlerites each player was using along with how much damage, defending, and disabling each champion did.
Contact