Blood Brothers 2 – Character Details Screen

One of the more complex screens to design, as it would involve a multitude of data that needed to be presented to the user in a clean and sensible layout. The idea developed to utilize a Tab system to better categorize the different sets of information and allow the user to navigate the layout with greater ease, while being able to accommodate a large chunk of text and values. Four tabs were decided upon, Stats, Gear, Skill and Bio. This was a useful design as it had been decided upon that the Character Artwork would need to take up a good portion of the screen space to showcase it in its entirety as this is one of the only places in the app where it can be fully seen without obstruction.

The Stats tab is the landing for this screen and what greets the user upon entering, which gives them an overview of their character's current state, such as its level, rarity, current experience, and its four main stats (Hit Points (Life), Attack, Defense, and Wisdom). It also shows if the character has any "Soul Upgrades" equipped. This is the tab where the user can level up their character by training them, costing in-app currency. When a character has reached Max Level, it can be "ascended" to a higher tier and the user will then level it up to a higher Max Level. When the highest Tier has been reached the character can be evolved to a higher Rarity (gaining new skills and stats entirely). To ensure this is communicated correctly to the user, the Train Button contextually changes when the character is available to be Ascended or Evolved.

The Gear tab is where the user can customize their character's stats by equipping various items or even other character souls. Different Characters have a differing number of available empty Gear slots to utilize. Equipping items will give the characters a boost in their stats, but they're tied to the item so if it is removed, the stats will revert. Tapping on an Empty slot will bring up the Gear and Soul selection scroll list where the user can scroll through the available items that can be equipped. Extra features were added such as the ability to Automatically Equip the best available Gear, or to Swap the Gear with another character.

The Skills Tab is just an informative display showing the user what Skills the Character possesses, as well as marking the value of how many turns a user must wait in battle before the skill is available to be used (Skill Count).

The Biography Tab only contains a Text box with a brief little blurb about the Character and its origins and part in the story.

Task

Implement a Tab design layout accommodating organized data sets while also maximizing the aesthetic of the artwork