Powering Up: Behind the Scenes of the Microsoft X-Box One Console Launch

A photo of a television, which is mounted to the wall. On the screen is the Home Screen UI of the X-Box One. The designs feature an early iteration of Microsoft's Metro design language.

Project Overview

I contracted for Microsoft from October 2012 through the launch of the X-Box One console in November 2013.

While working for Microsoft, I collaborated with Software Engineers, UX Designers, and other various stakeholders to solve and deliver complex user stories for the X-Box One product.

For the first few months of my tenure I had the pleasure of working on the Windows 8 Music, Video, and Games applications before pivoting to the console.

An image of the X-Box One Achievements App Home Screen. There are tiles situated horizontally. The top two thirds of the tile is a square image for the game art. Below the game art is the game title, date the last was achievement unlocked, gamer points, trophies, and percent completion.

Microsoft X-Box One Achievement app home screen.

The majority of my time was spent working on the Achievements, Friends, and Party applications, which were coded with common web technologies: HTML, CSS/LESS, and Javascript, among other languages.

An image of the X-Box One locked achievement screen for the game Fez. The achievements appear as tiles in two rows that scroll horizontally off-screen.

Microsoft X-Box One locked achievement screen for supported X-Box 360 titles.

An image of the X-Box One unlocked achievement screen for the game Minecraft. The achievements appear as tiles in two rows that scroll horizontally off-screen.

Microsoft X-Box One unlocked achievement screen for supported X-Box 360 titles.

One of the best practices I picked up during my tenure was the BEM, or Block Element Modifier, methodology. This methodology gives architecture to the presentation layer of a website by making everything modular and reusable.

An image of the X-Box One user profile screen. On the left side of the screen is a large profile pic with some profile stats. There is a stylized list on the screen, next to the profile picture, with a large amount of white space between each item. The list reads: appear offline, choose color, set gamerpic, customize avatar, and privacy settings. Each label is underlined.

Microsoft X-Box One User Profile screen. The base list of options has a lot of white space and the button has a pink corner clip.

Some objects, such as the list and highlight below, could be used throughout the entire UI for the console. A base style is accessible for each app and can be overridden depending upon the app type (sidecar vs. full screen).

Microsoft X-Box One Friends App feed screen. The list of options is styled similar to the default list.

An image of the user profile screen with the list of blocked profiles opened on the right side of the screen. The blocked profiles list is similar to Friends News Feed and User Profile screens, but with less white space and no underlined labels.

Microsoft X-Box One Friends App blocked users sidecar. The list of options here is compressed.

At the time of this project, CSS animations were still a very new and very limited technology. One of my favorite contributions to the X-Box One is the quacker (yes, like a duck) animation in the Party application. This little half-day project was a fun way to learn the basics of CSS animations. And, as with all products, they did eventually end up removing the animations in a redesign of the console UI. But! I originally build the quacker on Codepen as a proof of concept! Check it out here.

An image of the X-Box One Party App, which is loaded on the right quarter of the screen. This list shows members that are in a party with a status indicator next to each username. There is also a list here that is similar to other lists but has icons for each item.

Microsoft X-Box One party sidecar screen.

Working with Microsoft to deliver the X-Box One has been one of the highlights of my career. I experienced an incredible amount of growth in short time as a result of this opportunity. 🎮

Project Details

My Role
User Interface Development

Project Type
Product Design

Team
Studio A Launch Team

Core Competencies
UI Development, Software Development

Skills
HTML, CSS/LESS, Javascript, Agile, Scrum

Project URL
https://www.xbox.com

Copyright
Microsoft

Other projects