Xbox Live Career Celebration

September 23 2014

After shipping Durango, we started re-imagining Xbox One’s UI. One of the areas of interest is using data visualization to celebrate a gamer’s career. In this project I had some great fun extracting and playing with data.

To make games recognizable at a tiny scale, I developed a color coding system for Xbox game genres. There were over 6,000 games in the catalog and they were tagged randomly when they are published. After scanning the tags and descriptions, I manually picked a few dozen most common, non-generic keywords, categorized and assigned weights to them. I ended up with 5 pretty reliable genres:

Genre Legends

An early experiment “Tree” was to draw every single achievement of the gamer on one timeline. For a hardcore gamer, it stretches thin and hardly any pattern is visible.

Major Nelson's Career Achievements

So I tried aggregated achievements by week. This was what we call “Melting Ice Cream”. When people were looking at their own history, they were able to identify significant events in their lives that led to more/less gaming time.

Major Nelson's Career Achievements By Week Major Nelson's Career Achievements By Week

Then I tried to aggregate achievements by game. Each game’s life cycle is defined as starting from the first achievement, ending with the last achievement. The peak of each parabola indicates how many total gamerscores were unlocked for that game. This is in no way an accurate representation of how committed the user is to that game, for some games can be played intensively even after all achievements are unlocked. Unfortunately, the Xbox 360 service did not track actual game sessions. Still this graph invoked a lot of interest around the team, because it’s something people can instantly jump in, comprehend and relate to.

Major Nelson's Career Games

A side-by-side comparison between two distinctly different gamer styles:

Major Nelson vs. DaddyChurchill's Career Games

Since the geometric shape was insignificant, I took the liberty to play with some organic elements. In this “Garden” each game is a tree, and a tree grows and dies over time. When an achievement is unlocked, the tree branches and gains health.

DaddyChurchill's Garden

Projecting it to polar coordinates gets us “Fireworks”:

DaddyChurchill and MysteROBvious's Fireworks

Stallion83, the user who held Xbox Live’s gamerscore record, played A LOT of games:

Stallion83's Fireworks

By comparing one’s career with a friend, a gamer not only learns how similar they are, but also gets challenged and motivated by the question “who’s the better player?” I tested a linear layout of top shared games:

Top Games Comparison

And a free-form, packed-circle layout to accommodate more content:

Game Progress Comparison

Taking into account with the constraint of the dashboard (both memory and screen real estate), I proposed a signature visualization called Gamer DNA. It analysis the gamerscores one earned in each category, and shows the preference or tendency they display as a gamer. This shape is easy to read in a glance. It can be displayed on every gamer’s profile, used to compare friends or analyze a team’s strength.

Gamer DNA - kyoujin

data visualization JavaScript