XBOX

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.

Update: Oct'20

Microsoft has finally updated the official XBOX iOS app with a better information architecture (although they cut back the features drastically).

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 more with less" in Metro Design Language. On the contrary, this app has too much of the information which is overwhelming.
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.

Visual Design

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