Role

UX Designer

Product Strategy, Interaction, Visual design, Prototyping & Testing

Overview

With the advent of Game Pass, game sampling became a more prominent activity within the Xbox ecosystem, and there was a need to streamlining the browsing experience.

The challenge

When Game Pass launched on Xbox, it provided a surface for users to peruse the available library to them, get bites of information to help them decide if they would be interested enough to download each game and play. The problem was whenever a game tile was invoked, it would require the Xbox Store app to launch each time to direct link to a details page for the game, which would require time for every instance of the app being called.

The proposal

After brainstorming with the stakeholders and devs, the proposed solution was a UI that would streamline the browsing and game install process and bypass launching the Store app altogether. Since the purpose of the Xbox Store app at the time was either to upsell subscriptions or sell the game individually, the experience wasn’t tailored to already existing Game Pass subscribers. So why send them to the Store at all?

Thus, the Flash Card was born.

Wireframes and flows

The principles for Flash Card was to be fast, snackable, and uninterrupted. The main goal was to get the user playing the game that they chose as fast as possible – what’s the shortest path from choosing a game to playing it?

While…

Providing an alternate path for the user should they seek to learn more about the game, whether through their friends, add-ons, updates, or their personal status with the game.

Modules and variations

Putting it all together

Cloud streaming integration

With the dawn of Xbox’s XCloud, it was only natural to integrate cloud-streaming gameplay into the Game Pass experience. The Flash Card provided an easy plug and play opportunity to add the feature seamlessly, without users requiring to install the game and allowing them to start playing even faster. It also provided a surface for users to not have to decide whether to play via streaming or locally, allowing a range of preferences for those wanting higher fidelity gameplay (locally installed) versus immediate gameplay (streaming).

The way I had designed the Flash Card, only a few simple adjustments were required to integrate cloud streaming without sacrificing visual real estate or adding the users’ cognitive load. But if the user were to seek additional information, such as what cloud-streaming entailed, the Flash Card readily provided such information without disruption.

Results and takeaways

The design of Flash Card to alleviate the amount of time it takes for users to browse, install, and play games via the Xbox Store has increased engagement from subscribers by over 50% and continues to grow. The integration of cloud-play has only increased the percentage and has resulted in more interaction with games in the library, notably more for indie games. The benefit for users overflows into benefits for game developers participating the Game Pass program, and has since piqued more interest from additional developers looking to join.