DUISRUPTORS MOBILE NAVIGATION

Background

Disruptors originally created as a mobile game that throws players into a tense multiplayer shoot out where collectible cards can be the difference between victory and defeat.
We created a unique FPS experienced that leaned heavily on the simple concept of "who has the best aim" and built complexity with collectible cards and hero characters that bring flavor to the game with wild effects and passive abilities.

Goals

Take the familiar, stationary setting of a first person training scenario and infuse elements from other popular game genres. We knew that there was an opportunity to create an engaging, player vs player gameplay loop of games like hearthstone in a new creative setting.

Challenge

By combining so many genres together it quickly became difficult to navigate in the confines of a phone screen. Players needed a fast, easy way to customize their character, gun and target cosmetics, as well as an entirely seperate system for organizing their card decks.

My Impact

Along with running art direction I was tasked with creating all navigation systems for Disruptors as well as illustrating in-game ui assets such as the HUD, card frames and player cosmetics.

Initial mode selection and side navigation

Disruptors posed a unique challenge for navigation because of its horizontal orientation. Traditionally, deck building games on mobile opt for a vertical orientation as it is easier to scroll through lists of cards. The decision to use a side bar navigation was made after creating the deck editing screens where we learned that using a vertical scroll was the best way to sift through your deck. This would cause accidental button presses on a top navigation bar, thus the change.

Character selection

Players were given an initial four characters to choose from at launch with a fifth character to launch shortly after. There was a content rollout planned that would add even more characters at regular intervals and the selection module is built with an infinite horizontal scroll to accommodate those plans.

Character traits such as card element, name and passive effect were displayed under large character card to the right.

Cosmetic customization

Users were encouraged to customize their experience with cosmetic options for targets, weapon skins an map skins. Cosmetics were placed in an infinite vertical scroll.

There were more cosmetic category's planed such as HUD elements and character skins and the module to the left was built to scale with growth in mind.

Results screen

At the end of each round players are given basic rundown of their statistics, a currency reward and a victory / defeat status. Copy is FPO as we had not yet decided on which metrics would be displayed.

Game HUD and ui illustrations

I was tasked early on with illustrating ui assets that quickly give players the information they need while also immersing them in a science fiction universe.

• As players destroy targets they gain momentum in a tug of war style competition that is displayed in a meter bar displayed at the top of the screen.
• Character powers are charged over time and their charge status is displayed next to the character portrait.
• Cards are automatically given to the user in groups of two on the far right of the screen. The user activates a chosen card by flicking it onto the screen

Other Projects

Aimlabs web Aimlabs console Bandit Burger Forge e-sports