Xbox One 'Uniquely Me'
DESIGN DIRECTION, UX & UI DESIGN
Directly after the launch of Xbox One in 2013, Xbox leadership asked for a new design direction and concepts around what Xbox Home might look like for future releases. This is the result of the that request.
After the launch of Xbox One in 2013, leadership wanted a new design direction and concepts around Xbox Home for a future launch. Based on my expertise I was asked to help work with the teams to define the project vision, the goals, and the three distinct directions for the teams. I was also asked to direct and design one of the directions to ensure its success and outcome.
As with any project it is important to do some research around the product, the users, goals and competitors. Being that the 2013 version of Xbox had just shipped, a lot of insights existed and ideas were still super crisp and on point for the Xbox design group. The team had already gone through a UX research pass leveraging the common methodologies earlier in the year so it was the perfect time to take action. Numerous meetings were setup for the Xbox Design team to brainstorm, ideate and map ideas around what the next system could be.
Research and Defining
Core Principles
After extensive view of the team’s feedback and consideration around the Xbox fundamentals, three key principles naturally gravitated to the surface. Below are the three principles and the description of each with their guiding statements.
Simple
Home is clear and understandable.
It is clear how to get to any experience from home. It is not complex, confusing or redundant. Home makes it easy to start something new or switch between activities. Actions taken from home are predictable and reliable.
Guiding statements:
-
It is clear what is available on the system
-
I understand how to get to any experience from home
-
I can go home to start something new or switch between activities
Reflects Me
Home is a customized and
personalized experience.
It makes social and content discovery more personally relevant. It offers control over the appearance of home and what is featured.
Guiding statements:
-
It is customized by me: I have control over the appearance of home, what appears on home, and where things are.
-
It is personalized for me: Personally relevant information is provided that helps me strengthen social ties, and discover new content and experience on the service.
-
I can provide feedback that makes personalization more relevant and tailored
Iconic
Home is innovative, aesthetically pleasing, and sets the trend for the future.
It is a key signature experience within the system that helps to set a bench mark for others to follow and helps to define the overall tone of what Xbox One brand is. It is exceptional, authentic and inspirational.
Guiding statements:
-
It is easily recognizable
-
It is easily adoptable and so user-friendly that it can disappear into a person's daily routine
-
it is relevant and inspires the culture around me
-
It is delightful, enjoyable and i want to use it.
Core Definitions
The two core themes personalization and customization came to the forefront often in discussions, in the team exercises and seemed to be the natural direction the team wanted to gravitate towards. After the final collection and synthesis of data it confirmed what the core themes and definitions should be. By creating the core definitions, the teams were able to keep honest and have a natural benchmark to ensure they were staying on mark with their work.
Personalization
Personalization refers to a system’s use of a user’s information (their behavior, demographic information, user-provided information, etc.) to make an experience unique to the individual. At its core, personalization means the service serves up content or information or experiences that are tailored in some manner for the individual based on what the system knows about him or her. Consider what information (such as behavioral information) may be useful in allowing a system to personalize an experience, and what types of personalized content users may find valuable in particular contexts.
Customization
Customization refers to instances when a user tailors an online space to suit his or her desires or needs. On the Xbox, such customization means choosing themes, creating a unique avatar, or ‘pinning’ content that is important to the user. Customization is the process of making all the changes to an online space that indicate the space is ‘mine. Consider things users opt to customize, how to facilitate customization, and some things to avoid in customization.
Creating something 'Unique'
With all the key pieces in place it was now time to dive into what this new system was to be for the area that I was focused on, the “Uniquely Me" experience. At first, I thought a lot about the information that was shared and what I personally would want to see. I then decided to take a step back, re-examine things and put myself in the shoes of the different types of people who would be using the console. It was then when I really started to see what the vision was and how best to define who it was really for.
Vision
While we may all have similarities each of us is unique in how we see things, organize our stuff and like our spaces to be. Why should our digital environment be any different?
Uniquely Me allows you as an individual to customize your space just how you wanted it. From your favorite movies, to the games you love to play, it’s your choice how you want to see it. Your Xbox is your personal home and should feel likes how you want it. Because it's...
Uniquely made by you.
For you.
Our Goals
1
Create a home experience that focused on user control and allows grouping, reordering, resizing, renaming, wallpapers, and more.
2
Basic app pins do not afford the user increased control. To accomplish this this hierarchy of content is broken down to allow and level exposure on home.
3
System analysis over user-created groupings will augment the content with contextual recommendations, suggestive actions, background tasks, and more.
Features & ideal Takeaways
The Features and Ideal takeaways that we concluded for "Uniquely me" were the following:
-
This home experience focuses on user control and allows for grouping, reordering, resizing, renaming, wallpapers and more.
-
Basic app pins do not afford the user increased control. To accomplish greater control, hierarchy of content must be broken down to allow the proper level of exposure to home.
-
System analysis over-user-created groupings will augment the content with contextual recommendations, suggestive actions, background task, etc.
Finding the right flow
When looking at Home and the relevancy of the role it played. It seemed super logical to create a few key primary areas within the system for someone to easily identify how to navigate where they are within the system. (I.e. left equals Xbox as a system, home being my most recently used, and the playground consisting of the content I wanted laid out exactly how I want it.) The main content below highlights the breakdown of how the playground sections worked.
WIREFRAME
Home
An anchor to build the experience upon, users are provided a series of pre-defined areas to make unique ensuring a common structure across systems
Playground
A place where the user can experiment and make their own and offer a great deal of flexibility, within bounds, to deepen engagement and discover new stuff.
Consistently Custom
Users are provided a series of pre-defined areas to make unique ensuring a common structure across users
Increase Scale
Seamless introduction, when appropriate to degrees of customization complexity: home modules, playground clusters and pages
Creating a visual foundation
The visual style was created to be clean, simple, yet easily customizable for a unique experience per each panel. By allowing the use of different content boxes and sizes with display options (i.e. icons, image, etc.) and the use of multi hues and colors at play, it allowed for an array of multiple options while still maintaining a templated structure and optimal usability for memory retention.
UI DESIGN
INITIAL SETUP
CUSTOMER USER HOMESCREEN
PREMIUM THEMED HOMESCREEN
Giving it unique personality
One of the key frustrations and concerns that I had was around how to reduce friction, especially in how to move and organize sections, content and even panels within the system. While we had used Kinect for voice and selection, there had yet to be a full use of gestures for moving large multiple blocks of content within the UI of the system in this manner. After thinking of the movement and how best to feature it, it only seemed logical that the best hero opportunity here was to leverage Kinect in this experience. But that wasn’t the only way to interact on Xbox, as we also had a controller as an input too. So additional thinking to simplify the controller was needed to ensure that the use through button press would also be seamless. Below is an example illustrating the use with the Kinect and controller.
DEVICE INTERACTION
CUSTOMZING HOME
CUSTOMIZATION ENGAGED
CUSTOMIZING WITH GESTURE
CUSTOMIZING WITH CONTROLLER
Going through the motions
The three videos below are a compilation of two main side navigation modals, a home panel view with additional user created content, and an example of content re-ordering via gesture and Kinect.
