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

Destiny Companion v2 Android


Role: UX and UI Design

Responsible for the User experience design, feature design, and UI design for the Companion Tablet Update
 

Lead: David Sinclair


PROBLEM:

The Destiny Companion had no existing footprint on any tablet device

 

Proposed Solution:

Design a Native Tablet Experience

The first solution we went after was a full design for all tablets, including iOS. This involved scoping for work, looking at navigation options, and designing in feature versions to roll out as we completed them.

 

NEW PROBLEM 1:

The features had become so intertwined that the app could not be shipped without a complete feature load. 

 

New Problem 2:

Android had just launched their new Material Design update, and with it a whole new set of rules and paradigms for app design. This meant that the apps had to be designed and built differently to live in their respective ecosystems and act natively. 

 

Navigation was the biggest issue between the two systems.

 

Solution:

Feeling like we had a better idea of how the Android Tablet system was working, we decided to focus on creating designs for that only.

 

We also decided to make one install for both mobile and tablet, essentially getting an update to mobile for 'free' because we were working on tablet.

Early Exploration of the Android Tablet Menu

MILESTONE 1:

The project started out as a waterfall of design to development. We were operating with no real timeframe on the project. The developers needed weeks to set up new frameworks, as we were throwing out a lot of old work.

 

Designs were being created and reviewed, but seldom implemented correctly, if at all. Pill-up of design debt became an issue and the developers felt like they would never catch up.

 

It was determined a new approach was needed and all members involved were invited to three 4 hour (or more) long design scrums and we would continue this until a cohesive plan and design emerged.

 

Yay.

 

Milestone 2:

What came out of those meetings, reviews and designs was a well understood scope, a clear direction, and an execution path.

 

We took a brand new, simpler, and more user friendly approach to all the interactions and major features of the app. 

Tablet_Gear.jpg

This meant, like the iOS changes I had made, moving the most used interactions and features up and presented them in a much more simple design. Again, we pulled the "gear management" from the "details view" and made it highly accessible. 

Early WIP for the Gear section on Android Tablet

Moving key interaction and flows up to higher levels greatly increased usability. 

These new feature shifts and designs landed us a 4.3 rating in the app store (still current rating).

 

Conclusion:

Overall the update took more time than it probably needed to take, but for the people involved in the revamp, it was critical we hit the walls we did. We learned how to work better, improve our process, and were able to deliver a better, improved product.

Destiny Companion v2 iPad

 


Role: Project UX and UI Design

RESPONSIBLE FOR THE USER EXPERIENCE DESIGN, FEATURE DESIGN, AND UI DESIGN FOR THE COMPANION TABLET UPDATE
 

LEAD: DAVID SINCLAIR


iPadMain.jpg

PROBLEM:

The iOS app does not have a native iPad experience. 


This was the big one. We had just come off of working for months on the Android update, kept up with the content of the game (two game updates), and were splitting the team into two halfs to perform more as an agile team.

 

Needless to say we, the two devs and myself, were still trying to juggle the amount of work needed to keep 2 android platforms, and iOS app, and a website afloat with the same feature sets.


FIRST SOLUTION:

Using what we learned from the Android development, we jumped into design meetings and wireframed out much of the same functionality and UX for the iPad app. 

 

However, I spent more time prototyping and designing our new ribbon/tab navigation that has become the norm for iOS in general. This was a bigger task than anyone realized.


Problem:

Features in the app do not bucket together well and have overlap. 
 

Sub Problem:

No one involved in the design could come to an agreement of the arrangement of the app because of different perspectives on who uses the app - hardcore/power users vs. causal.

SOLUTION:

We never did actually come to a refined agreement on how we all saw the app being used. We had at our disposal a mountain of data to support our decisions, but it really depended on interpretation of that data. Kind of like reading hieroglyphics. It's all in how you read it. 

 

This did gave us an insight into what the basic spring off points for the app should be. Each of these sections had a fundamental guiding principle behind it that kept us honest about what features fell under what category.

 

  • Legend - My game progression
  • Community - I want to play with friends
  • Destiny - What's going on in the world of Destiny
  • App Level Stuff - Settings and other app features
  • More - Everything else

 

Our new navigation followed those categories.

 

Triple_1.jpg
Triple_2.jpg