Mockup1.jpg
 

Microsoft Xbox One Redesign

 
 

2019

UI Design | UX Design

3 Weeks

Affinity Diagram, Card Sorting, Competitive Analysis, Information Architecture, Proto-Personas, Prototyping, User Research, User Testing, Wireframes

 
 

 
 

Final Design Screens

 
 
 

Background

Microsoft has iterated on their Xbox One interface design since the days of the original Xbox 360. Many users across multiple platforms have complained about the constant update to the interface, asking for old components to come back, removing new features that have little usability. I took a deeper look into the components of the Xbox interface to see how usable the console really is. Usually, redesigns focus on visual aesthetic without consideration of a product’s usability, so the goal of this redesign is to increase the usability of the Xbox One interface based on user research and key design principles.

 
Xbox One Interface 2018

Xbox One Interface 2018

Friends List

Friends List


 

Design Process

I divided my research and design process into three major steps:

 
designprocess copy.jpg

 

User Research

User Observations

I gathered several users from different gaming backgrounds (casual, experienced, expert) to complete certain tasks on the Xbox One while being timed. The purpose of doing a timed trial is to set a benchmark on the usability of the interface. During the user observation sessions, I took note of successes and struggles within the tool, gathering specific quotes to summarize their experience.

 
“Wait I was just at the home menu. I pressed like two buttons and now I have no idea where I am right now.”
— Casual Gamer
calv.jpg
mason.jpg
“I’m used to having a home screen, but what’s with all these new features and tab? I’ve never even heard of a mixer.”
— Expert Gamer
 

There were 5 tasks in the timed trial:

  1. Opening up a game

  2. Watch a video on any media player

  3. Change your profile picture

  4. Connect to WiFi

  5. Download a game

  6. Accessing Friends List

Hypothesis

“Expert Gamers” will have the fastest timed trials through all 6 tasks, with one or two outliers from “Experienced Gamers.” “Casual Users” will have trouble in all other tasks besides task 1 due to the complexity of completing those tasks.

Results

These 6 tasks were chosen to cover all types of use cases within the Xbox One Interface. I wanted to see how easy it was for users to accomplish these tasks based on their “gaming skill level.” Out of 10 users, all were able to complete task 1 very quickly. Task 2-4 were challenging for most users, and “expert” users did not complete all tasks the fastest. Some “casual - experienced” users accessed videos more often than games on their Xbox One, which made them more familiar with video functionality than expert gamers. To my surprise, watching a video on the Xbox One was painfully difficult amongst all gamer levels. Some users said they never used this functionality on the Xbox One and struggled finding the right media outlet to watch a video.

 

Timed Trial Results

 
 

User Interviews

After the timed trials, I asked a series of 5 questions to gain an understanding of the user flow of the interface from different personas. It also helped me understand the features that are commonly used within the existing interface. The 5 questions are:

  1. What is the first thing you do when opening the interface?

  2. What is the easiest task for you to do on the interface?

  3. What is the most difficult task?

  4. On a scale of 1-10, 1 being low and 10 being high, how easy is it for you to accomplish your goals on this interface?

  5. What are the top 3 features you use in this interface?

Overall, users of all levels access games as a priority. There are a few cases where certain users prioritize watching shows or using the Xbox One to do something other than playing games. Many users find it overwhelming to display loads of information at once; it acts more of a distraction and distorts focus. Also, most gamers found the nested menus unintuitive. For example, going into 4-5 levels deep of interactions to access a certain setting component. Regardless of skill level, customization of the interface and home page is a high priority.

 
User Interviews

User Interviews

 
 

Open Card Sort

With each user, I conducted an open card sort activity to further understand groupings of elements on the interface and the different user priorities. Users created their own groupings of elements based on what they preferred and had full freedom of the types of elements they could include.

 
 

After doing open card sort activities with all the users, I came across a few main groupings and themes from all the final card boards. Below is an image of the compiled results.

 
Compiled Card Sort

Compiled Card Sort

 
 

Current Information Architecture

Analyzing the current information architecture of the Xbox One interface helps me understand the current user flow of the system, and gives me insight into the spacing and layout. A quick look at the IA shows that the current interface has states where white space isn’t utilized at all times, giving the sense that there are missing components or unloaded modules. Also, a lot of hero images and callouts take up the whole screen at first load, forcing the user to scroll just to get to filters or specific searches. There are also inconsistencies within certain screens, where filters are sometimes at the top of a screen, and at the middle for other screens. These inconsistencies are parallel with the overwhelming aspect of the pain points the users described.

 
 
 

Secondary Research

To fully grasp all the thoughts and opinions about the existing interface, I turned to the internet to level set the expectations and criticisms from the users. I looked at the Xbox subreddit and other gaming forums such as NeoGAF and found that many users had critical negative opinions about the existing Xbox One interface. Amongst these critiques, there were thoughts about how the vertical and horizontal spacing of the interface wasn’t intuitive, misleading promises about no advertisements, and a horrible use of white space.

 

Reddit thread about critiques

False promises about advertisements

Unintuitive horizontal and vertical scroll

“The top ⅓ of the screen is now taken up by giant white text of the last used game or app. The entire rest of that area is just blank. No info, no game art, nothing. Just empty space with white text in the middle.”
— Reddit User
“Removing the notification tab is totally nonsense...”
— Reddit User (965 Upvotes)
“The design isn’t for me and seems like a step back from the last iteration which was quite intuitive.”
— Reddit User (599 Upvotes)
 

I also looked into a few YouTube videos and found that 90% of comments on the actual release of the interface on Xbox’s official channel were negative and complained about reverting back to old interfaces. I also watched a few videos about user’s opinions on why these interfaces didn’t work and suggestions to improve what already existed. Below are several screenshotted comments.

 
Screen Shot 2019-04-11 at 8.22.52 PM.png
 

Lastly, I did a revisit to all the previous interfaces from Xbox 360 and Xbox One. This helped me understand the history of the system and where they started, how they evolved, and the reasoning behind their design decisions. As the years go on, usage of white space seems to be less utilized, almost separating the background and the actual call to actions 50/50. Advertisements were introduced in 2011 for the Metro Design and lived on through the Xbox One.

 
 
 

Affinity Diagram

Based on the user observations, interviews, card sorts, and secondary research, I created an affinity diagram to visualize the pain points in the user interface.

 
 
 

Competitive Analysis

Aside from the existing research, I looked at other gaming platforms with similar interfaces on the market to see the pros and cons of Microsoft’s competitors. PS4 has a similar interface to the Xbox One, but one significant difference is the single row horizontal scroll that streamlines all recent activity. The Nintendo Switch has a similar row scroll that only functions horizontally, and does not have a vertical scroll that shows more icons. The WiiU has three rows of buttons but limits it to those three, focusing more on the horizontal scroll as well.

 
 
 

Ideation

Proto-Personas

Calvary, 23 years old, “Experienced User”
Calvary uses his Xbox One mainly for watching shows on Netflix and browsing streams to watch on his downtime. Although he used to be a pretty hardcore gamer, he enjoys watching other people play more than playing himself these days. Once in a while he will pop in a game and give it a go, but he mainly looks at other apps, watches streams, and socializes with his friends online.

Mason, 27 years old, “Expert User”
Gaming is second to breathing for Mason. He’s always been on top of the newest released console games and has done playthroughs of more than 20 games. He is super competitive and spends most of his time playing multiplayer games where he interacts with other players through text and voice chat. He loves doing raids in certain games which requires him to start and join group parties and coordinate between multiple users.

 
 
 

Design Principles

  1. Bring back what worked in the older Xbox interfaces.

  2. Give users the ability to customize their main nav (Gaming vs Watching Shows)

  3. Simplify the steps between initial and final interaction of a desired flow.

  4. Reduce the amount of wasted space in the interface.

  5. Re-introduce a simpler way to interact with friends.

 
 
 

Sketches & New Information Architecture

 
 
 

UX Flow

Users start with one out of five home page options (Games, Friends, Apps, Streams, Store) based on their customization choice. The starting screen leads to all four other options and vice-versa. The side navigation on the left includes the profile editor and other settings including wifi and display settings. The settings bar is grounded throughout the interface, accessible within all five home page options. Users are able to edit their custom nav bar through an editor button next to the nav bar.

 
 
 

Implementation

Final Designs

 
My Games.png

Simple, To the Point

One row horizontal scroll keeps the Xbox One interface intuitive and straight forward. Top navigation for main menus and bottom navigation for important settings.

My Apps.png

Specific Places for Specific Apps

No more filtering through multiple screens to find Netflix. The top apps are in front of your face, with options to check for updates, browse all apps, or customize the top apps.

Friends.png

Say Bye to Nested Lists

No more are the days of navigating through layers of interactions to just invite a friend to play games. Friends, wifi connection, and other important settings are at your fingertips on the main menu with clear module pop ups.

Streams.png

Watch Streams, not Ads

Experience an immersive dashboard that highlights top live streams from games to IRL content. The space used for advertisements is replaced with useful information about streamers, the categories, and their content.

 
 

Prototype Example Flow Comparison

 
Old Design Friends List

Old Design Friends List

New Design Friends List

New Design Friends List

 
 

User Testing

I took the same 10 users and re-did the timed trial tasks to see if there was an improvement in the speed and functionality of the Xbox interface. All tasks saw an improvement in navigation time, specifically “Accessing Friends List,” which saw a 77% increase in speed and functionality.

 

New Timed Trial

77% Faster Accessing Friends List

59.5% Faster Watching Videos/Streams
 
 

Reflection and Next Steps

Overall, the redesign was a success in terms of creating an interface that was more intuitive to both casual and experienced gamers. I saw an increase in usability and functionality within the Xbox One navigation, took advantage of white space with bigger elements and less ads, and brought back old interface elements that were working like the friends list modal.

With more time, the next steps would be to refresh the prototyping using Figma or Invision Studio to create a full experience within the interface so users could see digitally how the different flows are accessed. With the digital prototype, I would re-test the timed trial tasks to see if they match the paper prototype results.