2020 | Wireframing Exercise
FRONT-END - LOBBY SCREEN
Persistent top bar:
-
Player name, Icon & Level (opens Player Profile pop-up)
-
Currencies (opens related Shop section)
​
Front-end Lobby screen:
-
3D Model of Selected Player Hero
-
News Banner (opens News pop-up)​
-
Settings (opens Settings pop-up)
-
Messages (opens News pop-up)
-
Achievements (opens related platform game mode UI)
-
Area selection
-
Play/"Fight!" match button
-
Training match button
Splash Screen
Lobby Screen
Player Profile Pop-Up
News Pop-Up
Settings Pop-Up
FRONT-END - SHOP SCREEN
Front-end Shop screen:
-
Units Tab:
-
For purchasing individual units and unit loot boxes and bundles.​
-
-
Currencies Tab:
-
For purchasing premium currencies and exchanging for soft currencies.
-
-
Keys are also available to purchase from the persistent top bar.​
Shop: Units Tab
Shop: Currencies Tab
Key Purchase Pop-Up
FRONT-END - DECK SCREEN
For managing decks, units, and emotes.
Deck Tab
Deck: Card Overview
Deck: Emotes Management
FRONT-END - GANG SCREEN
This screen is to support a social "clan" system feature. This space allows players to create, join, and manage social group features. Similar to other games in the genre, it incldues a card donation system, social crate system, chat, and group stats.
Gang Tab
FRONT-END - JOBS SCREEN
The "Jobs" screen is for tracking, actioning on, and collecting rewards from events and challenges with a daily/weekly/monthly cadence.
Jobs Tab
IN-GAME FIGHT HUD
When the player enters a PvP or PvE match, they will be presented with the game HUD. It displays:
-
Opponent information (icon, title, username, "Respect"/ranking)
-
Match timer
-
Player units, emotes, and unit energy
-
When the player selects or drags a unit to place on the battlefield, the accessible (green) and inaccessible (red) placement areas will be highlighted to them
-
When a unit is placed, the unit health appears above the model.
HUD: No Units
HUD: Placing Unit
HUD: Unit Placed