KAORI TAKAGI
UI/UX Designer and Game Artist
Marvel Strike Force
ISO-8 l SyncPvP l Costumes l Game Icons l Key Art
Responsibilities
Mainly in charge for the ISO-8 UI
Early ISO-8 Matrix concept
UI layout concept
UI Skinning
Icon creation
Unity implementation
Tools
Photoshop
Flinto
Unity
Texture Packer
InVision
ISO-8
The Iso-8 feature is a crafting and enhancement system for individual characters that grants improvements to their stats. This feature will mark the beginning of your ability to customize the characters in your roster and choose which stats on them you want to further improve. This will add an additional layer of strategy and theorycrafting to squad composition and combat.
Matrix early concept
Initial concept of what the matrix design based on designer's thoughts towards ISO-8. Each Iso-8 has a shape, which determines which slot the player may equip it. By completing the ISO8 shape through ISO-8 campaign, the game will trigger a celebratory moment and boosts your character's status.
ISO-8 matrix 2D UI variations
2D UI matrix is a graphic representation appearing in roster and character info screen. It contains all the necessary information players need to know without going to ISO-8 screen. Octagon icon represents the class your character is currently being equipped. The level of your class is represented with yellow pips below. Each petal-like containers surrounding the class icon represents the crystal with CTA indicators telling the status of each crystals. The level of each crystals is also indicated with pips that's part of the crystal container.
Character info screen with ISO-8 feature introduced
Finalized 2D UI Matrix was then implemented into the character info screen for better UX flow. The screen's layout was revisited to give enough space for legibility. It was also important to communicate users that by tapping on the 2D UI Matrix will take them to character's ISO-8 stats screen.
Roster UI/UX layout variation with ISO-8 feature introduced
Roster screen is one of the most common screen players will visit to customize their characters. By including ISO-8 icon would help players see the broad idea of each character status of its ISO-8.
Layout exploration was made to find a good way to organize the information efficiently. Some of the exploration includes additional status with anticipation of an unannounced feature.
Equipping ISO-8
Once players acquire crystals through ISO-8 campaign, a player can then equip in ISO-8 matrix.
Each type of Iso-8 Crystal can be equipped into respective slots in the Iso-8 Matrix. A player can now choose from various class gem to equip for their character.
Acquired crystal amount appears on the top row of the left section. If a player does not have a crystal to equip, the Matrix will indicate with a "find" cta icon and will take you to a campaign with crystal rewards. Bottom right detail of the left menu show many crystals are required to upgrade to next level of crystal. Players will have an idea on how much boost will be applied after equipping the crystals through bottom left status description.
ISO-8 Fuse/ Equip screen
