Xbox.com Redesign

The previous Xbox.com redesign was back in 2010 and with the launch of Xbox One, it was time to modernize everything again and make improvements across the site. I was brought on as Sr. UX designer to help revamp the website for launch within 3 months and it was a fun experience.

Starting At the Ground Level - Information Architecture

One of my main responsibility was to look at the entire website's information architecture and update it to accommodate modern needs. With social, home entertainment, games, and improvements to Xbox Gold accounts I made sure the result was a sustainable hierarchical structure that can scale. Admittedly due to time constraints, most of the decisions were made based on past study reports, card sorting with users, coupled with internal feedback but we were confident the new structure would take us a long way.

The New Navigation

Naturally after the architectural framework was done we set out to redesign the global nav -- which is what most users will be interacting with on the site. We explored dozens of designs to breath more life into the future navigation and also designed specially for the tablet and mobile experiences.

On desktop the new navigation design freed up 132% more screen real-estate for content and matched Xbox One's new user interface perfectly. One of the biggest hurdles when redesigning the nav was actually not the design itself, but in convincing stakeholders that we must consolidate 'Video' and 'Music' into a single 'Entertainment' category and this took an entire month of work. Presently (as of 2016), the Entertainment nav tree has grown folds already to accommodate more content and I am glad to see the efforts I put in being well worth it.

A Modular Design Approach

One of the spotlights of the redesign was making the site responsive and always looked at its best regardless of content. To achieve this the team approached the designs in a modular way right from the beginning. Various different modules that could be used on the site were crafted to allow maximum flexibility in displaying different types of content while maintaining site integrity. The modular approach enabled marketing teams to make frequent updates to the site content efficiently from selected templates and not break the fidelity of the design.

It was quite a rigorous process going back and worth with internal and external stakeholders to make sure we could accommodate all content types and developed a modular system that could scale and work with one another. The result was a set of templates along with samples and clear guidelines.

Social Systems

Our last design sprint was spent on a major feature of Xbox One -- the improved social experience. The new social experience includes new ways to make friends, new social activity feed, new achievement experience, and new shareable content such as gameplay videos.

The biggest hurdle in designing the online counter-part of the social experience was to make sure the designs were compatible for Xbox 360 and Xbox One users and their content, especially when many users still have both systems. With deadline approaching the team still designed to push the envelopes of how we can make the then-stagnant activity feed engaging for the next generation of users. Again the modular approach was taken in designing and refining templates for different content, system, and types of users (surprise! Not all Xbox users are gamers). We went as far as designing content that don't exist yet on the Xbox One system in anticipation of possible future features and updates, or in hopes of influencing the console team to consider them for future releases.

Get a glimpse of the before and after user profile and brand new activity feed below:

A True Team Effort

The entire redesign involved intense team effort and collaboration. There were countless brainstorming sessions, multiple design iterations in a single day, bouncing source files around none-stop, and the much needed 'Halo game-break' where we can finally be enemies. Nothing was under our radar, as even design improvements were made to support, account management, and payment pages.

Check out all this on xbox.com.

Role

• UX / Visual Designer      • Information Architect      • Prototyper