top of page
TopNav-OOBE

Xbox One OOBE Experience

CONCEPTION, DESIGN DIRECTION & UX/UI DESIGN

With the launch of a new console Xbox One, it became the best opportunity to start from scratch on creating a new Out of Box Experience (OOBE) for Xbox. An experience that reflected the new features and technology of the console along with the latest changes to the design and brand of Xbox.

black-xbox-360-xbox-one-logo-xbox_white.

In late august 2013, I was asked to step in and take on the challenge of creating the end to end experience of OOBE in time for the 2013 Xbox One Launch. Previously, a six-person design team were half working on the project and only had created some sketches and thoughts around a few of content areas for the experience.




The project lacked a thorough understanding of the entire flow and user experience for the new console system, a brand personality and the special considerations and challenges that can arise with setting up a system in someone’s home. OOBE was an important piece of the Xbox One console that desperately needed help and was running out of time.

3031982-xboxone.jpg

Creating a new OOBE

All systems go! Sweet! Awesome! But there’s a catch…. You have two months to lock down what OOBE is in order to meet the first deadline launch date of RTM (Release to Manufacture). Which means that the OOBE look & feel and uber experience needs to locked because part of OOBE will be hardcoded into the motherboard of every Xbox One Console. Now Go!

​

Where to begin?

Because of the importance of RTM and the locked date for the core design. My immediate focus was to define the overall architecture, UX flow and figure out what the brand for OOBE would be. I knew of course that any key UX patterns and UI style would need to be defined in this wave to ensure the systems’ needs were covered, as well as achieving a seamless experience. One additional consideration that I needed to keep in mind was how to ensure that any design created would have the longevity and flexibility for the future of OOBE experiences to come.

 

One down, one to go!

With RTM completed, I had an additional month to adjust content, work on teaching moments, define and create marketing content and guidelines, and of course fit & finish additional areas. Some areas of course continued to change due to late breaking modification from product owners, changes to the product itself and changes in strategy.  The whole project really became a bit of a dance between planning for the future while designing for today.

 

Reading the tea leaves

This project entailed a tremendous amount of dedication, cross organization communication, rapid learning, envisioning and prototyping, branding/marketing insight and long nights to complete. 

I was extremely proud to have worked on this project, accomplishing what I did for the time that was allotted. I was also thrilled to recently see that the work and thinking that I had created is still alive and proven to be relevant even in the most recent versions of the Xbox One console system.

IMG_2709.JPG
1455986_10152080297287223_1879285510_n.j

The UX Structure

The OOBE experience consisted of 6 primary areas and well over 65+ pages of content. In addition, the system encompassed troubleshooting, teaching moments and additional setup for TV, etc.

     UX
Slide02-fixed.png
D_OOBE_Essentials_Flowv3.jpg

The Essentials

The essentials were the 'RTM' core setup and the basics needed in order to obtain the proper updates per location, time, etc. All screen in RTM were hardcoded to the motherboard of each Xbox One.

RTM
Slide08.PNG
Slide09.PNG
Slide10.PNG
Slide11.PNG
Slide14.PNG
Slide16.PNG
Slide17.PNG
Slide18.PNG

Kinect Setup Videos

With the new design of Kinect there were numerous new considerations around the system, from placement, to how to properly hold a Kinect and how best to set it up. Below are a few of the videos that I directed and designed to help teach on how best to interact with the Kinect.

CLEAR YOUR PLAYSPACE
SUGGESTED PLACEMENTS
KINECT HANDLING
KINECT ADJUSTMENTS

Kinect Sensor Setup

The Kinect Sensor setup consisted of 4 main parts from user detection, room detection, sound/voice setup, and authorization for auto sign-in. One of the more interesting pieces to work on in this section was the sound wave visualization as it needed to convey the depth and dimension of sound within the limitations of Xbox One's flat design esthetics.

Slide20.PNG
Slide21.PNG
Slide22.PNG
Slide23.PNG
Slide24.PNG
Slide25.PNG
Slide26.PNG
Slide27.PNG
Slide28.PNG

Power Setup

The power setup with a teaching moment was a late breaking add to OOBE experience. This section was created after receiving feedback via beta and field testers that they were unsure of what Instant-On meant (especially in EU), and by default chose Energy-saving as it seemed more direct. After the creation of Power setup teaching moment, the number of people choosing Instant-On doubled.

Slide30.PNG
Slide31.PNG
Slide32.PNG
Slide33.PNG
Slide34.PNG

Account Sign-in & Setup 

Account Sign-in and Signup played a super important role for the 2013 Xbox One, as it was one of the first official ties between Windows MSA and Xbox Accounts. The role of this section was to make the merging as seamless and pain-free as possible. For existing Xbox users, the steps were very minimal to sign-up as their Xbox accounts easily migrated. For first time Xbox users from MSA accounts, the key was to minimize the steps as much as possible, making it as effortless to sign-in, setup a gamer pic, color etc. and get playing. Two of the new signature moments within sign-in/signup for all users was the introduction of the new Xbox One gamer pics with the new color palettes and the highlighting of Kinect identification to the user in setup as well as intro hello screen.

Slide36.PNG
Slide37.PNG
Slide38.PNG
Slide39.PNG
Slide40.PNG
Slide46.PNG
Slide47.PNG
Slide48.PNG
Slide49.PNG
Slide50.PNG
Slide51.PNG
Slide52.PNG
Slide53.PNG
Slide54.PNG
Slide55.PNG
Slide56.PNG
Slide57.PNG

Gold Membership

After extensive research from testing, our marketing partners requested a new prominent 'Upsell' area to help teach the benefits of Xbox Membership and increase adoption of sign-up through OOBE.  The pages were created as templates for use by external and internal partners for Xbox One sales. In addition to the screens a complete style guide was created to ensure partners adhered to the rules around imagery, brand use, etc.

Slide60.PNG
Slide61.PNG
Slide62.PNG

First Launch

I wanted to ensure that even a new person to Xbox would understand how to select something. As a final step before getting to the dash it seemed like the perfect spot to leverage a controller and have a teaching moment. And just like that it did... It taught everyone how no matter the language. 

Slide66.PNG
MEDIA
bottom of page