Battlerite (Fan UI Redesign)
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.
Splash / Loading
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.
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 are able to view and purchase champions, chests, collections, and cosmetics. Currency is either earned through playing the game or by buying gems through the micro-transaction store.
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 Abilities
Learn more about a champion’s abilities. Along with breakdowns of abilities and their “EX” modified counterparts, players can check out quick clips of the ability in action so they know what to expect in the arena.
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.
Customize Champion
Players can customize the appearance of their champion from sources including in-game rewards and micro-transaction purchases. Customize champion outfits, weapons, poses, emotes, mounts, and companion pets.
Lobby
The lobby sets the stage for the battle to come. Join with 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.
Gameplay from early in a match.
Players can view statistics for each player in the arena by hitting the Tab key.
Combat
Keeping things clear and easy to manage during combat is important. The interface needs to get out of the way of the action but also make it easy to know what is happening.
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.
Details
Hovering over each statistic will display a breakdown of how much damage, shielding, or disabling each specific ability did.
View project on ArtStation
