UI Design | UX Design
Affinity Diagram, Card Sorting, Competitive Analysis, Information Architecture, Proto-Personas, Prototyping, User Research, User Testing, Wireframes
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.
I divided my research and design process into three major steps:
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.
There were 5 tasks in the timed trial:
Opening up a game
Watch a video on any media player
Change your profile picture
Connect to WiFi
Download a game
“Expert Gamers” will have the fastest timed trials through all 5 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.
These 5 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.
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:
What is the first thing you do when opening the interface?
What is the easiest task for you to do on the interface?
What is the most difficult task?
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
Bring back what worked in the older Xbox interfaces.
Give users the ability to customize their main nav (Gaming vs Watching Shows)
Simplify the steps between initial and final interaction of a desired flow.
Reduce the amount of wasted space in the interface.
Re-introduce a simpler way to interact with friends.
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.