XBOX

Re-thinking the XBOX experience on iPhone

  • Overview
  • Role
  • Problem
  • Ideas
  • IA
  • Visual Design
  • Learnings
Overview

In 2016, I bought an XBOX One and wanted to keep track of my games and achievements using the iPhone app. I found it too confusing to use and did a conceptual redesign from ground up to tackle the foundational flaws.

Role

Product Designer

Problem

The official XBOX app on iPhone has many flaws. I downloaded the app, signed in and landed on my feed. There were too many options on the screen. If you want to check your profile and achievements, good luck with that. Information Architecture, Layout and Visual Design appeared like a Windows 10 Mobile app. People on a particular platform such as iOS are familiar with apps having designs somewhat according to the preset guidelines. They see and use the familiar design everyday in the default apps and apps that they have downloaded from the app store. And that is what they anticipate - familiarity and ease of use.

In iOS, most of the apps use Tabs in the bottom for organising the content because of their ease of use. Tabs are also easier to access being at the bottom of the screens. Those apps avoid having the hamburger menu which on the contrary the XBOX app is using. The moment you tap on the Hamburger Menu you find a plethora of superfluous options just to confuse you to some more extent. They have not placed only the secondary options there, they have put almost everything. Psychologically our short term memory can help us to remember 4-5 items at a time. So if you are using an iOS app even for the first couple of times, chances are high that you will roughly know ‘Where to find What’. That’s why Tabs feel far more better in organising content instead of hiding everything aimlessly in the Hamburger menu.

To summarise -

  1. The information architecture is unbalanced and vague.
  2. Microsoft encouraged the design principle of "Do less with more" in Metro Design Language. Too much of the information is overwhelming in the app.
  3. The app experience is pretty much different than the console.
  4. The app does not take advantage of mobile platform to help tackle some console headaches like On-Screen typing and navigation.
  5. The app does not assist in tracking games.

Ideas

To solve the problems emerging out in the research phase, prioritisation of solution is required -

  1. Virtual Controlling of the console.
  2. Better game tracking to aid in unlocking achievements.
  3. Ability to chat with friends.
  4. Buy apps and games right from the app.

Information Architecture

In order to reduce confusion, I divided the whole app experience in 5 major entities viz -

  1. Social Feed - Post Update, Your Activities, Friends' Activities, Updates from XBOX and Favorite Games.
  2. Store - Buying apps and games, Redeem Code.
  3. Connect - Connect the Console and Control it.
  4. Achievements - Track games, achievements and hours played.
  5. Profile - Personal Info, Message Friends.

Navigation Flow
Visual Design
App Screens App Screens Achievement Unlocked animation Like animation in slow motion Post Update interaction Trending collpase animation in slow motion
Learnings

Although this was just a conceptual redesign, I learnt a lot of things from this project - Time Constraint being the primary one. Instead of focusing on creating the end to end flows first, I got captivated with micro-interactions on the home screen. You could have guessed what happened next. I was not seeing any progress apparently as I was too much busy in making those interactions perfect; focusing on the time-taken by an element, position of the element and other motion stuff. It was only a matter of time when I stopped working on the project. Only after realising this I was able to pick the project again and finish it. This time I did not let my friend - perfection hang around with me. Building the end-to-end flow was a priority. Whilst the interactions were also taken care of which I know are far from perfect.

That's all folks
OTHER PROJECTS
Personal Identity Project
View for Behance Project
XBOX Project
Carol Project
Uber Infographics Project
Horizontal Divider