Bloodsuckers
As a team, drain a large portion of the opposing bank's contents in a single round.
117
Braytech
- Live
- Design
- Development
- 2018—
- HTML 5
- Responsive CSS
- ECMAScript
- React
- Redux
- Node.js
- Swift
- 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.
Contents
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
History
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.
An example of a root presentation node, the Triumphs view. At the top you can see what I refer to as being a profile header—a header with profile data—displaying some rudimentary information, the player's currently equipped emblem (the background and icon, a significant aspect of player customisation seen repeatedly throughout the game), and a list of core player views.
An example of a presentation node of a presentation node—seen here are the nodes for player class triumphs. Presentation nodes can have children such as presentation nodes, triumph records, collectibles, and more.
A Triumphs Seal—seals are typically composed of Destiny's most challenging triumphs and award a unique player title that is displayed beneath the player's name in the game world.
A discovered lore book open for reading—Destiny is a world full of deep and interconnected lore. Players discover and collect pages of various lore books which can be read from this view at their leisure.
Destiny's Quests view—where players track their quest progression and bounties.
Players can choose to inspect a particular quest item for more information on the state of their journey.
Similarly to Triumphs, Destiny has a Collections (for collectible items such as weapons) view based on the same presentation nodes structure.
Almost all items in Destiny can be inspected, revealing more information, perk options, and a beautifully rendered model of the item.
Braytech
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.
Triumphs
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.
Example: triumph record
State 1/4: objectives incomplete
A plain record (no highlight), a tracked record (green highlight), a completed though unredeemed record (cyan highlight), and a complete and redeemed records (gold highlight). These colours correspond directly with in-game styling in order to maximise user understanding and align closely with user expectations.
Screenshot of Triumphs view showing player's total triumph score, parent nodes, almost complete records, and user-tracked records. Users can click or tap the small green tracking icon on any record in order to add it to a "tracked records list."
Screenshot of a Triumphs view presentation node exhibiting records in their various states including; incomplete, tracked, and completed.
Screenshot of a Triumphs view presentation node for "Lore." In Destiny, "Lore" is a primary delivery method for storytelling. Braytech provides a pleasant reading experience and the ability to bookmark pages.
Collections
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.
Screenshot of a Collections view presentation node. Destiny's tooltips for items typically only show certain "perks" and their names. I opted to display all of an items active perks as well their types in order to make the data more useful at a glance.
Screenshot of a collections item being "inspected," where all of its characteristics can be viewed. Weapons and armor can be customised, enabling a preview of stat and visual effects.
Maps
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.
Screenshot of Maps view exhibiting checklists and POI inspect UI
Weeklies
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.
Screenshot of Weeklies view
Screenshot of Rotations, a sub-view of Weeklies which uses a more traditional calendar view to help users plan across days and weeks
Character
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.
Screenshot of the Character view demonstrating item tooltips with actions
Quests
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.
Screenshot of Quests view. Quest items can be filtered by origin. This is a critical feature for less-experienced Guardians who are trying to become better acquainted with the game and use their time well.
Screenshot of a quest item being "inspected," where its full quest line is on display.
Activity
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.
Screenshot of Activity view
Screenshot of Graphs, a sub-view of Activity
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.
Screenshot of an expanded activity report
Small displays
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.
Screenshot of Triumphs view
Screenshot of a Triumphs view presentation node
Screenshot of Character view
Screenshot of the Character view demonstrating item tooltips with actions
Screenshot of Activity view
Screenshot of an expanded activity report
Screenshot of UI which enables players to quick switch between their game characters
Screenshot of the search HUD feature
Apps
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).
Customisations
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.
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.
He's lived many lives, and as master weaponsmith for the Tower, he supplies Guardians with only the best. Track his daily specials on weapon mods.
As curator of the mysterious Black Armory, Ada-1 is uniquely equipped to supply Guardians with precious assets. Track her daily specials on armor mods.
Challenge your might and plunder the Sol system's Lost Sectors for exotic rewards.
Master Rahool offers Guardians an exchange service, allowing them to repurpose their unwanted materials.
Test your metal in Saint-14's thunder dome (sponsored by Osiris).
Share in some clan spirit by adorning your home screen with this widget of comradery.
This is an ongoing project. As such, this archive item may be incomplete.