Xbox One is an all-in-one entertainment system. Successor to the Xbox 360, Xbox One integrates live and on-demand TV and movies with music, gameplay, social and communication features. Gamers can track achievements and share video highlights from gameplay. Entertainment lovers and info junkies can watch live TV, browse the web, listen to music, video chat and play Blu-ray discs. Better yet, all users can do two activities side-by-side, like watch TV while tracking fantasy football scores. Every user has a personalized Home screen-their profile, color, games, apps and favorites-that travels with them, wherever they sign in. Automatic recognition means Xbox One lights up and signs users in when they enter the room. From there, it’s showtime, and people can move fluidly through their favorite activities with voice commands, gestures, a controller-and even a phone or tablet.
THE CHALLENGE
The new gaming and entertainment system from Microsoft required an interface that delivered on the promise of high-powered hardware for hard-core gamers and ease of use for general entertainment enthusiasts. We needed to develop new user experience patterns, while respecting the familiarity of the beloved Xbox 360 and Microsoft's Modern Design Language.
The interaction model required elements of magical delight—automatic sign-in, voice commands, hand gestures—that provided cues when needed, but always elegantly allowed movies, TV, music, games, and apps to be front and center. The design also had to account for multiple users at once, a split-screen experience, and tablets and phones used as input devices. Users needed to be able to master interacting with the system with little to no instruction, using the input method of their choice, and start having fun fast.
THE PROCESS
The first step was Discover/Explore. We reviewed user feedback and interviewed experts in brand, market research, technical capabilities, and large-screen interactions. Deliverables: Whiteboard sketches, drawings, wall reviews, mood boards, UI motion and gesture studies, low-fidelity prototypes and sound explorations. Next came Define/Design. We established design principles, success metrics, and the user model. Deliverables: User flows, common controls/page patterns, wireframes, visual comps, high-fidelity interactive prototypes, usability tests, in-home observational studies, and packaged reviews/scorecards of all. Finally, Polish, which started in the previous phase and continued through this iterative phase of beta testing and internal QA. Deliverables: Changes to the final code in the shipping product (e.g., bug fixes, addressing feedback). Tools used: Adobe Creative Suite, Cinema 4D Studio, Microsoft Office, Jscript, Actionscript, Processing, C#, C++, XAML, and WWA.
THE SOLUTION
The solution offers intuitive interactions and contextual prompts that feel natural and minimize the time to viewing, listening, gameplay and social fun. That speed-to-fun is the key expectation our customers have of their all-in-one home entertainment system, and the design delivers on it in ways both pragmatic and delightful.
The digital out-of-box flow gets hardware, account, and sign-in going with simple, clear text and typography, and illustrations and animations to help get the basics right (e.g., Kinect sensor placement and angle). Colorful and lively personalization options are offered and then immediately experienced in the signed-in first-use state, turning a potentially boring set-up experience into a "wow, this is all about me" moment when the Home screen appears. Just before settling into the first screen, an energetic video highlights the key capabilities of the system and concludes with a visual prompt to teach an important concept: The Xbox button on the controller will take you Home from anywhere.
From there, lightweight text hints complement the default tiles that appear, with the goal of guiding the user to further personalization of the experience--your recently used items will appear here, pin your favorites here. A set of pre-pinned defaults subtly demonstrate the utility of pinning, and a collection of how-to videos and interactive tutorials allow learning and exploration at the user's own pace. Users can choose to dive into these materials for immersive, experiential learning, or follow the contextual prompts that appear as they naturally navigate the areas of the system (e.g., "Hint: Say "Xbox" to see voice commands"). The immersion continues as people use the system--gestures let them navigate to their content and start a game, a voice command lets them record a game clip, they add their own voiceover and share their achievement with their community. The design of Xbox One makes people the stars of their entertainment system.