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.

Gold Circle_1pt filled shadow.png

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.

Gold Circle_1pt filled shadow.png

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.

Gold Circle_1pt filled shadow.png

Boosts

Boosts

Boosts provide bonuses to certain aspects of gameplay. These aspects could include gathering resources or attacking opponents.

Gold Circle_1pt filled shadow.png

Avatar

Avatar

The player can change all of the hero's avatars. They can also add and change the name of the hero.

Gold Circle_1pt filled shadow.png

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.

Gold Circle_1pt filled shadow.png

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.

Gold Circle_1pt filled shadow.png

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.

Gold Circle_1pt filled shadow.png

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

Architecture.png
Callouts.png

Main Screen Callouts

Real Gameplay

Playing the Hero feature during a Live Development soft-launch.

Blank Phone.png
 

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.

Hero No gear.png
Gear Inventory.png
Hero with Gear.png
Change Avatar.png
Gear Presets.png
Change Name.png
No Gear Inventory.png
Upgrade Mansion.png
Action Bar.png

Continue onto: