UI/UX Design & Implementation

I was the sole UI designer implementing features for the majority of the development of Destiny 2: Forsaken, the first and largest expansion to Destiny 2 to date. I worked closely with artists and engineers to build UI for flagship features for the release including the new ‘Gambit’ PvEvP mode as well as the new ‘Triumphs’ and ‘Collections’ activity and achievement tracking features, from initial concepts through final polish. I built features intended to scale for years of releases and content, to be used by a variety of teams and designers, while working to maintain the UX standards which have continued to set Destiny and Destiny 2 as award-winning industry leaders in game UI/UX. In addition to the new features of the release, I worked on the usual updates for a Destiny expansion, including adding new planets and activities to the director and worked to integrate live-team features such as the Eververse vendor storefront and quality of life updates.


 

Gambit: HUD & post-game results

In Forsaken we introduced a brand-new game mode to Destiny 2, which combined our existing player-versus-environment and player-versus-player modes, for which I was the primary UI content creator. I built and animated the in-match HUD, including the all-new team state and invasion displays, as well as post-game results flow.

Unlike existing PvP modes in Destiny and many other games, we had to show more information for this new mode. Teams would collect points by accomplishing goals and killing enemies, but those points would then have to be “banked” or deposited at a specific location. This gave opportunity for an invasion mechanic, wherein one player could invade the other team’s game instance, attempting to kill the player holding the points before they could be banked.

With this novel game mode, we had to show not only the points each team had collected and how close they were to winning, but how many points they could have if deposited, whether there was an invasion happening, how many rounds remaining, and how close the scores were to triggering major match events like spawning boss enemies. We had to convey all of this information in a compact way that would be easily readable on the fly to players, while still keeping to Destiny’s minimal visual aesthetic. We used a combination of color, transparency, motion graphics, and remixes on existing PvP match visuals to deliver all of this in a concise and understandable way.

Additionally, the post-game results screens for Gambit were based upon the existing PGCR for PvP and PvE matches, but as with the HUD we had to incorporate a number of new elements to the information shown.

 

 

Triumphs

In Forsaken, we added two major new features to the Destiny 2 UI - ‘Triumphs’ and ‘Collections’ - giving players an in-game hub to track their activities, acquisitions, and achievements. I was the sole UI content creator for these features for most of the release’s development, taking them from initial concepts to final polish.

These screens presented a unique challenge, in that we intended to show much more information in a much more dense and deeply-nested format than anything that had come before. I worked to build a robust and scalable UI system to present the information in a clear, usable, and beautiful format, which could handle subsequent releases for years to come, as well as working with artists to create new visual languages to communicate all the new information states to players.

We had to introduce players to a new set of states and information that was unique to the new feature, yet could be a shared language between Triumphs and Collections, which would at the same time be easily understandable to new and veteran players alike, as well as keeping with the visual and UX design rules established for the look and feel of Destiny. We needed to create all new visual language for all the states introduced in these screens, including hidden, in progress,, tracked, complete, unclaimed/claimed, and “sunsetted,” for which we used a combination of highlight and attract animations, colors, opacities, and borders. The screens were also built to handle various states of single or multiple categories and pages, without over-burdening the layout with too much or too-dense information.

The Triumphs feature also introduced the ability for players to equip titles gained from their in-game achievements, added to the player inventory screen.

 

 

Collections

A sister to Triumphs, Forsaken resurrected the Collections feature from Destiny 1 — highly expanded and redesigned, with cleaner layout, navigation, and much more extensive information. I built the Triumphs and Collections features to have distinct landing pages, but share a central architecture for their sub-screens, allowing for quick iteration and easy scaling for future updates, as well as a shared visual language for player to understand and a consistent visual layout.

At its core, Collections was built to use the same basic tech as Triumphs but with a unique look and with additional features of allowing for gear sets. We also needed to show multiple progression and completion states within a single badge, which used unique tooltips but used the same visual and color languages as Triumphs and other areas of the game, but maintaining a unique look and feel to set the features apart and give players a sense of excitement and satisfaction.

One of the things that makes the Destiny UI so usable is the conceptual button assignment. Too often games will assign whatever button happened to be unbound in a given menu or screen, and as part of Bungie’s UI team I worked to keep our inputs consistent and tied to actions — information, confirmation, destruction, etc. When creating a feature like Triumphs & Collections, a significant amount of thought and effort went into ensuring that the features not only adhered to a consistent user interaction language, but that they were designed to be as intuitive as possible to not require constant tutorialization or prompting, allowing us to devote more on-screen real estate to the features themselves.

 

 

Subclass Screen redesign

In Destiny 2 I helped with the visual revamp to the subclass screens, to update the look and feel from Destiny. I had pitched the color-matching of the nodes to the subclass colors back for the initial Destiny 2 release, but unfortunately it was punted until Forsaken. It was a small change which had a huge impact on the feel of the subclass screens, tying together the UI, key art, and gameplay design of the classes into a feature that felt cohesive.

In addition to the visual update, I implemented the redesign of the new node system — more visually distinct from the grid-based one seen in previous Destiny releases, as well as some new animations to really make the screen stand apart and give visual interest. With the addition of the more dynamic visual fx and animations, I also implemented additional parallax layers to add depth and vibrancy, further enhancing the look and feel.

 

 

User & competitor research

In addition to creation and implementation of UI features, I also helped to further our understanding of players and our competitors by profiling, researching, and presenting data to our team, so we could understand how best to design or change strategies and features, and keep our game competitive and up-to-date in an ever-changing arena. I analyzed and compiled data on various features and their implementations across other games and generated reports and presentations for the UI team and Destiny leadership, as well as researched into player reactions to specific changes and formulated recommendations from that data. My research helped inform direction for creative leadership as well as design in multiple disciplines, including gameplay, UI, and monetization. This included extensive competitor and player-response research used to inform the design of features like Triumphs & Collections, Eververse content, and roadmaps for future Destiny content releases and sunsetting of old content.