Heroes
User Story
Heroes are a crucial, endlessly scalable, evergreen investment, and they all remain relevant throughout the game. Players can view a list of their heroes displaying a high-level summary of their abilities, gear, and current status. This list is accessible from the HUD and the Crew Mansion. If enemies take them, the player's ability to progress is impaired, so the player must do all to get them back.
MVP Features
The Hero feature written by the Game Designer. I translated these descriptions into a working UX, UI, Visual Design, and Architecture.
Hero
Screen
Hero Screen
The player sees all of their hero's current status' and actions. The player can equip or unequip gear from their hero.
Gear
Gear
Gear items are equipped onto the hero. Each item has a set of “boosts” attached to it. There are seven slots for gear: head, upper body, lower body, two accessories, and two weapons.
Boosts
Boosts
Boosts provide bonuses to certain aspects of gameplay. These aspects could include gathering resources or attacking opponents.
Avatar
Avatar
The player can change all of the hero's avatars. They can also add and change the name of the hero.
Skill Tree
Skill Tree
The Boss' skill tree gives boosts to gameplay. The tree is fueled by a points system. These points are allotted to different skills. The points come from adding experience to your Boss.
Action Bar
Status Bar
Shows the player the current status and action of the hero. Tapping on the bar takes the player to the hero's position on The City map.
Inventory
Inventory
The player has access to Gear Inventory to equip their hero. From the Inventory, the player can go to the Gear Crafting screen.
Presets
Presets
Presets are combinations of gear that are created and then saved by the user to quickly equip onto their hero.
Screens
These are the in-game screens for the hero feature played during Mafia Wars soft-launch.
Boss
Mole
Dealer
Change Avatar
Boosts
Gear Inventory
Boss' Skill Tree
Architecture
Main Screen Callouts
Real Gameplay
Playing the Hero feature during a Live Development soft-launch.
Process
I usually sketch out ideas, wireframes, and architecture before getting into the computer. Once I have a solid concept, I iterate, going between the sketchbook and the screen flushing out iterations.
Ideation
An evolution of nine different subfeatures. These iterations were the result of a developing UI Pattern and from the feature being rewritten, edited, and updated.
