Tommy Chapman
107
Xûr
    • Live
    • Design
    • Development
    • 2017
    • HTML 5
    • Responsive CSS
    • ECMAScript
    • React
    • Redux
    • Node.js
    • WebGL
    • Swift
    • Adobe Photoshop
    • Adobe Illustrator

For users who need to know where Xûr is and what he's got! Xûr is an NPC – non-player character - from Bungie's Destiny franchise. His role is as a vendor to player's character's, Guardians and he visits for a short time each week.

Xûr is a fictional entity of the video game Destiny 2. He is a high value target that regularly offers players quality wares. 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.

With his visits, he brings an assortment of highly sought-after items which appear with somewhat randomly frequencies.

This app helps players track and interact with the mysterious fellow sent by The Nine.

Contents

  1. History

    How the Xûr came to be

  2. Design

    The ideas and rationale behind the design

  3. Apps

    The same great web app with native flourishes

eb73a5f8-0d1b-4b77-acd5-c9055da282cdeb73a5f8-0d1b-4b77-acd5-c9055da282cd

History

It started with an annoying problem: Where is Xûr, what is he selling, and can I make it look really pretty? I set out to answer this question and over several weeks and many iterations, this is where I landed.

Version 1 The first version was all about learning the ropes of Bungie's API and how I could use the information therein to dynamically generate the view. I _believe_ this first take was PHP-rendered. I had rudimentary thoughts on what features I wanted but I hadn't yet properly thought out the UI.Version 1 The first version was all about learning the ropes of Bungie's API and how I could use the information therein to dynamically generate the view. I _believe_ this first take was PHP-rendered. I had rudimentary thoughts on what features I wanted but I hadn't yet properly thought out the UI.

Version 1

The first version was all about learning the ropes of Bungie's API and how I could use the information therein to dynamically generate the view. I believe this first take was PHP-rendered. I had rudimentary thoughts on what features I wanted but I hadn't yet properly thought out the UI.

Version 2 This design felt like a misstep. The intention was to use in-game screenshots of the vendor himself, but it pushed important UI too far past the page fold. This was the first version where I started using a custom API from which to consume JSON for all content.Version 2 This design felt like a misstep. The intention was to use in-game screenshots of the vendor himself, but it pushed important UI too far past the page fold. This was the first version where I started using a custom API from which to consume JSON for all content.

Version 2

This design felt like a misstep. The intention was to use in-game screenshots of the vendor himself, but it pushed important UI too far past the page fold.

This was the first version where I started using a custom API from which to consume JSON for all content.

Version 3 An experiment tracing screenshots of in-game map UI. It was a lot of work considering what followed.Version 3 An experiment tracing screenshots of in-game map UI. It was a lot of work considering what followed.

Version 3

An experiment tracing screenshots of in-game map UI. It was a lot of work considering what followed.

Version 4 I was able to extract the original map images from the game data. I was more pleased than I ever had been with my efforts at this point.Version 4 I was able to extract the original map images from the game data. I was more pleased than I ever had been with my efforts at this point.

Version 4

I was able to extract the original map images from the game data. I was more pleased than I ever had been with my efforts at this point.

Version 5 A significant departure from previous designs, I was never a fan of the lack of balance and low degree of symmetry. I set a max width for the design and separated functions into columns; location, inventory, and history.Version 5 A significant departure from previous designs, I was never a fan of the lack of balance and low degree of symmetry. I set a max width for the design and separated functions into columns; location, inventory, and history.

Version 5

A significant departure from previous designs, I was never a fan of the lack of balance and low degree of symmetry. I set a max width for the design and separated functions into columns; location, inventory, and history.

Version 7 A completely different take on all that I was doing and a precursor to what followed. This is where my projects, Xûr and Clovis Bray (now known as Braytech) diverged. I reversed my approach to designing and developing where I focused on large displays first and small displays second, and instead first built for phone. At the time, most of my users were there.Version 7 A completely different take on all that I was doing and a precursor to what followed. This is where my projects, Xûr and Clovis Bray (now known as Braytech) diverged. I reversed my approach to designing and developing where I focused on large displays first and small displays second, and instead first built for phone. At the time, most of my users were there.

Version 7

A completely different take on all that I was doing and a precursor to what followed. This is where my projects, Xûr and Clovis Bray (now known as Braytech) diverged.

I reversed my approach to designing and developing where I focused on large displays first and small displays second, and instead first built for phone. At the time, most of my users were there.

It wasn't long before I realised that if I was going to go to all this effort specialising in Xûr, I should consider how else I could capitalise on my effort. That's when I decided to spin up a MySQL table or two and begin taking note of where he was and what he was selling.

This effort laid the ground working for the History feature which enables a user to see if Xûr had ever sold the item before or if he'd been pushing the same old story for a while already.

This feature evolved over time and was limited only by my imagination and skills. In this final version, users can see not only how many times Xûr has offered the item, but also when. Some items go months between offerings.

All of my work previous to the final version of this project has been with jQuery. Projects such as Xûr can provide excellent opportunities to try new things, push boundaries, and learn completely new and exciting paradigms.

Learning React has been a long, initially thwart with pain, rewarding journey. This version uses React and is powered by many dedicated components designed to handle and serve the purposes of Bungie's API and projects that depend on it. It's been invaluable to pushing myself to greater heights and increasing my broader skillset.

Design

Xûr is a transient vendor in the Destiny world. He comes and goes on a schedule. For newer players, this creates a need for knowing when and where the vendor is.

History

The History feature allows a user to click through previous weeks and seasons of Xûr's activity and is tied to the page's router allowing users to share their view with other users in case perhaps they're trying to settle a bet or help a friend.

Inventory

The Inventory feature displays the selected week's sale items, Xûr's location for that week, and the date the data was retrieved (as soon as Xûr materialises in-game).

The UI of the individual items is multi-faceted.

  • Touching/hovering over items presents the user with a item tooltip.
  • Clicking items takes the user to an item's details page which mirrors the tooltip is terms of information provided.
  • Arrow buttons to the right of items expand and contract item's sales history.

Apps

Xûr 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).

History

Detailed history for each and every week which Xûr has visited the Sol system. Users can browse season by season, week by week.

Item Detail In Destiny, items can drop for the player with random item stats. This view relays those unique stats to users and is embellished with all the functionality required for a player to determine if they should visit Xûr to collect.Item Detail In Destiny, items can drop for the player with random item stats. This view relays those unique stats to users and is embellished with all the functionality required for a player to determine if they should visit Xûr to collect.

Item Detail

In Destiny, items can drop for the player with random item stats. This view relays those unique stats to users and is embellished with all the functionality required for a player to determine if they should visit Xûr to collect.

Frequency Just how often, and when, has Xûr sold `x` and `y` – this feature allows the user to time travelFrequency Just how often, and when, has Xûr sold `x` and `y` – this feature allows the user to time travel

Frequency

Just how often, and when, has Xûr sold x and y – this feature allows the user to time travel