Destiny Companion v1

Role: UI Design and UX Introduction

Initially responsible for the UI design of Bungie.net. Entrusted to full UI design vision holder of the entire companion team.
Lead: Kevin McGinnis & Garrett Morlan

 

My first role for the team at first was to create a visual language for the team and make sure that the UI design was "Destiny" but for mobile. This presented a number of challenges. 
 

  1. The Destiny UI was very clean and text based which meant a lot of care and forethought on spacing and localization needed to go into it. 
  2. The app had wildly different sections (something it still struggles with today) and that in itself presents a consistency issue. 
 

Problem:

Consistency throughout the entire app proved to be the most difficult. The app was coming online with the bulk of its game-facing features late, much like Destiny itself. Bounties, the Grimoire, and Advisors had not actually been hooked up, but where being built into the app as if they were. 

Companion 1.0 iOS

Companion 1.0 Android

Solution:

Early designs for the mobile app always had a problem with consistency, but not just from a UI perspective. The features were just different. A feed in one section was totally unique and had different goals and utility than a feed in another. This presented all sorts of challenges. 
 

Working with the UI artists on the game, I found a fundamental baseline for all sections in the app. Using iconography, clear typography, and contextual game terms, I was able to leverage a lot of what the game was already telling users and continue that UI and UX consistency. 

 

This meant a lot less 'custom' work and more clean, reusable UI. I created detailed red-line documents the ensure that each pixel was accounted for.

This was only as useful as the engineers wanted it to be, however. We were still in growing pains of how to develop and deliver a AAA game's companion app.

 

Certain sections of the app, however, suffered from being directly 'ripped' from the game. They were great UI and UX for a console game, but were not built for mobile. 

iOS Tower / Vendor Screens - Nearly 1 to 1 with the game in design and functionality... minus walking around of course. 

This consistency with the game, however, came at a great cost to standard UX principles of mobile and web.


UI to UX


Problem:

The UX/UI of the game does not always translate to UX/UI of an app.

The game is on console, controlled by a free-cursor and controller, and the app and website are used by thumbs and mice. Almost three completely different worlds were accessing one UX through one UI... and the problems only became worse as we added features to the app.

Android Gear / Gear Scrolled / Gear Details

Solution:

As the app grew, there also grew a need for me to grow into a hybrid role of UX/UI designer. Most companies balk at the idea of having a split role, but by modestly taking on small UX problems, such as interacting of a single feature and worked from "problem to polish".

 

Example:

Moving and equipping gear.  

First implementation steps:

  1. Navigate to Gear
  2. Select "Item Bucket Type" (Essentially the slot of the weapon that would push in a view that had the rest of the items you had of that type)
  3. Select an alternate item (push to item details).
  4. Select 'Manage' from the bottom of the screen and tap action.

Resolution:

Updated Experience:

  1. Select item from item list
  2. Pop up overlay that displays actions
    • View

    • Equip

    • Transfer

    • Lock

  3. Perform Action

This may seem like an obvious interaction, but hindsight is 20/20. Initially we thought gear inspection would be the determining factor in managing different items. The users would go into the item's detail to figure out if they needed that item or not. 

 

But after seeing how the game was being played, it was determined that the users who were doing the bulk of the item management already knew what items they wanted, or that there was more than enough information on the item listview to make a meaningful decision. Basically, we moved the actions up a level to alleviate the need to view the item's detail before performing an action. 

iOS01.jpg