- HTML 5
- Responsive CSS
- Adobe Photoshop
- Adobe Illustrator
- Adobe Lightroom
Braytech is a companion app for Bungie's Destiny which enables players to track their progression and find answers to their queries through various views which mimic and elevate Destiny's own interfaces with insightful features and additional curated data.
It's an exercise in challenging and elevating my skillset as a web designer and developer. It's a long running project that's seen many iterations and has changed me as a developer and a person. The name originates from Destiny's fictional tech and research corporation, Braytech.
Destiny 2 is an action shooter that takes you on an epic journey across the solar system. In the cinematic campaign, you’ll enter a world filled with compelling characters and fight to take back our home. Battle alongside friends with multiple cooperative modes or challenge others in intense multiplayer matches.
Breaking down how Braytech came to be, where it all started, and some general thoughts on the larger personal development impacts it's had upon me
Getting to know the beautiful interface which inspires me and and lays some of the style baselines for Braytech
How Braytech solves some of the problems associated with interfacing with Bungie's API and explanations of some of the key choices I've made in building it
Looking at the Triumphs view's interface and drilling down into its key component, the triumph record itself
An overview of the Collections view
Google Maps but for Destiny 2
The view which users come back to Braytech for every week
Management of inventory and access to vendors
Tracking adventures and priority goals
View, filter, and bookmark activity reports
Massaging a UI system designed for large displays to work well for small displays
The same great web app with native flourishes
It all began with a desire to build a better web site to track Xûr, an NPC (non-player character) in the Destiny universe. I purchased a domain name, oldmatexur.com, on 2017-11-05T11:22:05Z, and started writing what would later become Braytech. You can read more about Xûr first, if you'd like.
Everything was a new challenge. I was constantly learning new, better ways to solve the same problems. I wanted to do more and push beyond the scope of my original concept.
These projects have served as an opportunity for me to evolve my skillset and to bridge the gap between my knowledge of jQuery and React—leaps and bounds.
On 2018-06-27T21:43:47Z, Bungie released an API feature update. With this update, I was able to fulfill a very common and dire dilemma for Destiny's players through Checklists. When I released support for these new checklists, I began to garner some attention for my efforts. I continued to experiment and added more features. The codebase was growing large and messy.
Bungie released a transformative set of API updates on 2018-08-28T23:12:58Z in preparation for a major game release that unleashed countless possibilities and inspired me.
With everything I'd learnt and all of the positive reactions I'd received, it was time to take then-named Clovis Bray and my professional skillset to the next level.
I was spending every day buried in Braytech learning React and playing a tiny bit of the actual game. I slowly learnt different web APIs that I previously didn't need such as Local Storage, Indexed DB, and Promises (huge fan of the async await syntax).
I've since focused my efforts on recreating and reimagining in-game UIs for web browsers by bringing in-game features to the web and by innovating on a few of my own inspirations. It's hard to imagine having the usership I do now.
Braytech is especially popular with mobile users and I am very proud of my accomplishment in making its mobile experience first class.
510 Git commits later and I can truly say that learning React through Braytech has been one of the best things I have ever chosen to do.
Destiny 2's UI
One of the best ways to not alienate your userbase is to use what they already know so well. Simultaneously, this was an excellent opportunity to flex my CSS muscle and to reimagine a normally fixed-width design language for a responsive web.
The following are some primary examples of the UI that I used as a guide.
Bungie's API offers two pathways for fetching player data; OAuth which requires a user to actively authenticate the app with their profile, and publicly available data that is subject to the user's privacy preferences on Bungie.net. In building Braytech, one of my focuses has been minimising user friction. As such, Braytech doesn't depend on or require that users authenticate the app in order to use it, but some features do require elevated privileges.
On its face, Braytech asks the player to enter their "gamertag" and their profile data, characters and all, are fetched for use.
Braytech, much alike the game, takes a character-first approach to its design. Most features are from the perspective of the selected character's perspective including but not limited to; player inventory, progression, quests, etc.
One of my favourite features is a background function which regularly fetches the player's latest profile data. This allows Braytech to reflect the player's progress in near-realtime.
I've based the design around the game's profile header, going as far as to order core views in the navigation area to align with the game where possible e.g. Clan, Collections, Triumphs, Character, etc. Many interface elements have been built to match the game's as closely as possible, with great consideration for a responsive design. This can be a tricky business at times, sometimes requiring unique designs dependant upon use case.
Braytech's Triumphs view is one that I'm most proud of. It's effective though beautiful and highly useable regardless of device. Initially, I placed my focus on retaining the layout the Triumphs root view from the game (see above), but for a responsive web app., it doesn't make a lot of sense.
I sought out to make better use of that space and not long after, I moved the almost complete records feature to the Triumphs view itself and later added tracked records.
One of the more creative features I implemented was for reading lore definitions, which are attached to records that are children to the lore presentation node.
Even now, I have new ideas that to most seem bland but to me, they're kinda... fun. As I write this, I'm thinking of some sort of "quick find type ahead feature" to quickly jump to a familiar record.
In Destiny, Collections are based on the same structures as Triumphs, both technically and visually. Resultantly, their implementation and appearance are similar albeit some exceptions such as item sets which require extensions.
Maps are a data-rich extension of the game's own map interface. Features include checklists (both custom and API-derived), additional suburb text markers, transient event markers, relations made between points of interest and other features such as triumphs, and over 700 screenshots.
As with all other areas of Braytech, each map "node," where appropriate, has its own tooltip with visually rich information, including a screenshot, to aid the player in locating points of interest.
Destiny has an activity cycle that rotates once per week. Each week, different activities are featured and extra rewards are bestowed for completing them.
The Weeklies view chronicles what's happening in many areas of the game world on a single glanceable display. It brings together items to be collected and records to find triumph in, helping users to focus their precious play time.
This view is also user-customisable with drag and drop modules. This is especially useful for small displays where users may wish to focus on specific activities.
A substantial aspect of playing Destiny is managing your inventory. Many third party apps aim to tackle the problem of inventory management in different ways; while some implementations offer many features, Braytech focuses on simplicity, convenience, and ensuring the user doesn't become disorientated by item actions.
Destiny's user experience for tracking mission progression and other objectives was once a point of substantial pain for players, especially those new to the game. Prior to Destiny receiving a substantial additions to its user interface, I implemented the following views for Braytech.
A view to filter and display a player's quest progression and a view which lists each of those quests steps, both past and future. Being able to see all of a quest's steps is a popular feature.
Following Destiny's update, I made adjustments to better match the game's own design.
Destiny generates and hosts activity reports for most everything a player participates in-game. These reports (internally named post game carnage reports or PCGRs) include information about the activity played, who it was played with, and what those players accomplished.
As is the case with most other aspects of Braytech, the Activity view is exceptional on both large and small displays. No other third party app displays reports better.
Post Game Carnage Reports
Activity reports offer different statistics based on activity type, which Destiny has many of. Accordingly, Braytech shows different stats at different times, as well as additional information about included players when appropriate.
Each participant row can be expanded to reveal most statistics and any additional information which may be relevant to the activity to which the report belongs. The participant's name is controlled by a "member link" feature which allows the player to rapdily view basic information about that participant.
Reports scale well to various display size breakpoints, reflowing content in a way which retains all information without breaking the constraints of the visual design. This also ensures that reports are as useful and easy to scan on small displays as they are large displays.
Reports can be bookmarked and reviewed later from the Bookmarks sub-view, as well shared to others via a simple URL.
Destiny's UI was originally designed to be used on large displays such a televisions at an aspect ratio of 16:9 or very near to it. For displays that don't meet these constraints, its UI paradigm can become somewhat inflexible.
Through itteration and some trial and error, I've arrived at a very happy medium. It can be difficult, at times, to cost-effectively design components (or versions of them) that work excellently in both worlds. For example, features that depend on tabular data. Sometimes, small displays simply aren't intended for the use cases that larger displays are.
With Braytech, almost all features work as well on small displays as they do large, and where absolutely necessary, information density is reduce to accomdate smaller displays.
Some features, such as the Activity view, are implemented differently to enable them to occupy the entire width of the display. In this case, no compromises are necessary.
Braytech is available in three different app stores, but the iOS version goes the extra mile. With widgets and a customised browser control, the iOS app blends native features with a powerful PWA (progressive web app).
The iOS app uses a customises the web control to make the PWA feel more native. Amongst the changes, Braytech extends its UI behind the system status bar. This is one example of several niceties that raise Braytech above a standard PWA.
Custom URL schemes are used to catch public Braytech URLs and pass data internally between the PWA and native components such as widgets.
I believe that widgets (when implemented well by both the OS and the widget developer) can be really cool. Destiny didn't have any widgets and I thought it would be an excellent opportunity to bring my insight and taste to the iPhone's first set of widgets for Xûr, and later, Braytech.
These widgets require zero configuration and reflect user specific data once the user has used the app. I'm particularly proud of this. Widgets use a custom backend, Voluspa, to process both generic and user-specific data. Some widgets, such as Clan, render image content specific to the user's clan dynamically.
Destiny has many non-player characters called vendors. These vendors offer players quests, items, rewards, and wisdom. These vendors may offer an inventory of rotating items, requiring the player to stay vigilant.
Third party companion apps, such as Braytech, opt to solve this user problem through features that display inventory data in real time but they require the user to commit their time to opening the app and navigating to the data. This is what widgets are made for.
Designing these widgets took me a moment. I wanted to blend the aesthetics of the OS widgets and Destiny. I think the former is especially important. Accordingly, in order tor ecreate the feel of Destiny, I used simple gradients with related colours, and relied heavily on the game's typeface to create structure.
This is an ongoing project. As such, this archive item may be incomplete.