Case-Study-Header-Large

Background

Disclaimer: Microsoft/Xbox neither sponsored nor endorsed this project.

  • Project type: Speculative
  • My roles: End-to-end product designer
  • Duration: September-November, 2021

This project tasked me with adding a feature to an existing app or service, with the constraints of maintaining the branding and visual design of the existing product.

I worked on Xbox Game Pass, which is a subscription-based service that grants users access to a rotating catalogue of 100+ games they can download or stream to their Xbox consoles.

Problem

Because the Xbox Game Pass service offers a varied selection of so many games, it's difficult to find something of interest to play. How might we make that discovery process faster and easier for users?

Solution

Add a suite of discoverability features to the Game Pass app for Xbox consoles that recommend games to subscribers based on their playing history, their friends’, and the larger subscriber base.

Challenges

My user interviews invalidated my original hypothesis about the project, and I struggled throughout the process with testing my prototypes in a way that accurately simulated the console Xbox experience.

Main-Image

Final Result

A new place for picks

While the Xbox Game Pass app currently has a "Picks for you" tab on the homepage, it's not distinguished from other identical tabs on the page.

I wanted to draw attention to this new page, so I placed its homepage tab just under the main interface buttons and added a "New" banner.

Homepage-Hi-Fi-V1
Game-Card-Comparison-Annotated

Added detail to game cards

The original design for game cards within the app, while functional, also left a lot of empty space, especially under the game’s title. To take advantage of that space, I added:

1. A banner with information about a game's status on the service

2. Icons of Xbox friends currently playing that game

3. A visual representation of a game's score on the review aggregate site Metacritic

4. A short description of the game

Every pick's a winner

From this central hub, a user can quickly and easily navigate to several types of game recommendations depending on the game they're looking for at the moment.

Picks-for-you
Game-Modal-Changes-Annotated-Horizontal-1

Love it or blacklist it

While the existing game details modal in the Xbox Game Pass app is functional, I added more, well, details to the details page. This is also where users can give the recommendation algorithm direct feedback on suggestions to improve them.

1. A game's score on Metacritic, including the number of critic reviews it's based on

2. A simple upvote button that tells the system to recommend more games like this one

3. An equally simple downvote button that tells the system this game and similar ones aren't a good fit

Friends-Are-Playing-All-Games-V1

Squad up with friends

These lists display game recommendations based on what a user's best Xbox friends have been playing lately.

See what's trending

The "Most popular games" section features arrow icons to indicate which games have moved up or down the charts in popularity.

This can be particularly helpful for multiplayer games. The more people there are playing an online game, the better.

Most-Popular-Games-All-Games-V1

User Research

Xbox-Game-Pass-PC-Family_Key-Art

Secondary research

Finding users to speak with was a challenge due to gatekeeping and strict rules on the online platforms where gamers typically congregate. Eventually, I got permission to post on r/XboxGamePass to ask for interview participants. 62 users responded.

Game Pass subscribers buy and play more games than non-subscribers

• Some users rely on third party tools like gamepassport.net to filter the Game Pass library

• Game Pass's primary competitors have many more tools for curation and discovery

Screen-Shot-2021-10-27-at-5.06.21-PM

User survey

Finding users to speak with was a challenge due to gatekeeping and strict rules on the online platforms where gamers typically congregate. Eventually, I got permission to post on r/XboxGamePass to ask for interview participants. 62 users responded.

• Users were frustrated with the lack of filtering options in the Game Pass app

• Users wanted review scores of some sort displayed for games in the catalogue

• Users wanted a "Because you played this game, try this game" feature

Quote-Card-1
Quote-Card-4

User interviews

I also spoke to three subscribers in short, 15-minute interviews. They represented a demographically diverse set of users from all around the globe.

I asked them about their general experience with the service and a potential playlist solution I was considering. I learned that:

• Users were frustrated with the poor quality of game recommendations on the service

• Users were open to social recommendations so long as they weren't "shoved in their face"

• Users worried they didn't have enough Xbox friends to make social discovery features useful

User-Journey-Map-Cropped

The user journey

To better understand and visualize the areas where users were getting stuck when trying to find a new game to play on Game Pass, I created a journey map.

• Users feel overwhelmed by the amount of games on Game Pass

• The limited recommendations the service already makes are irrelevant or inaccurate

• The inability to filter the catalogue for relevant games is the biggest pain point in the journey

Targeting the problem

Initially, I hypothesized that the solution to the discovery problem would be to add a feature that allowed users to view and create "playlists" of games on the service.

My research revealed users preferred personalized recommendations based on the games they were already playing.

How-Might-We-Transparent

A recommendation station

To solve the discoverability problem, I decided to create a central recommendations hub page that would house several discovery features, including:

"Because you played" — recommendations based on a specific game a user has played

• "What your friends are playing" — a personalized list of games popular with a user's top Xbox friends

• "Most popular games" — Recommendations based on what's trending among all subscribers

Game-Pass-Discovery-User-Flow-V4

Testing & Revisions

Preference-Test-Annotated

It's just a preference

To determine the best layout for the Picks for you page, and which sections users would most like to see at the top of the page, I ran a preference test between three versions.

80% of users preferred version 1 of the "Picks for you" layout that displayed the three new recommendation blocks at the top of the page

Screen-Shot-2021-10-29-at-3.22.15-PM

Testing trigger fingers

Due to platform limitations, I wasn't able to test my high-fidelity prototype with an Xbox gamepad like I would've liked. Instead, I ran a first-click test with static images of the designs and a series of follow-up questions. While not ideal, it still provided valuable insights.

• 90% of users successfully completed each of the 10 tasks in the test

• Users were confused by the icons on the game details modal, namely the thumbs up/down icons

• 28% of users found the Picks for you page to be too "busy" visually

Game-Modal-Updates

Revision: unclear icons

The revisions I had to make to my designs after user testing were minimal, and many of them were a result of not having access to the original product's icon set. The new solution isn't perfect either, but requires further testing.

• Changed the thumbs up/down recommendation refinement icons to up and down arrows

• Updated "Join club" icon from a controller to a group of people

Picks-for-you-revised

Revision: visual clutter

A sizable amount of users said they found the overall pages to be too busy thanks to the sheer amount of information presented. To address that, I cut out some of the unnecessary visual indicators.

1. Removed "New release/Leaving/Trending" status banners from game art

2. Removed icons indicating friends are playing certain games

However, I retained the Metacritic scores because users overwhelmingly loved their inclusion.

Reflection

Image-from-iOS

What challenged me

• Recruiting interview participants

This was one of the most challenging parts of the project. As much as gamers generally love to share their opinions, getting them to agree to a phone call can be like pulling teeth.

• My hypothesis was incorrect

I made the mistake of going into this project with a solution already in mind, and my research revealed my solution wasn't one users were all that interested in. It nearly derailed the project.

• Designing within a framework

Previously, I've only done projects that built new products from scratch. Working within an existing framework and maintaining a product's branding was paradoxically freeing and limiting.

• Testing with a gamepad

I really wanted to build a prototype that supported gamepads to test it as accurately as possible, but there aren't any affordable tools on the market to facilitate that kind of remote testing.

What I learned

• How to design for larger interfaces

Until this project, I'd only ever designed for PC and mobile interfaces. Learning to design for TV and other larger displays was a challenge, but I'm glad to have the experience.

• Sometimes less is more

The tight scope of this project (no more than 80 total work hours), really pushed me to keep my often overly ambitious impulses in check and focus on what was feasible to deliver.

• UX in the games space is nascent

That surprised me considering it's an industry where user interaction is the core experience. But across competitors and in Xbox's own product I saw how much room there is to improve.

• I really want to work on an actual game

I've always been an avid gamer, but since starting this project I can't help noticing all the flows and interactions that could be better in the games I'm been playing. I didn't see that before.

Image-from-iOS-3
Image-from-iOS-2

Next steps

• Test revisions

Though the revisions I made were small, I still want to test the new upvote/downvote icons I chose on the game details modal. I'm not sure they're any clearer than the thumbs I used before.

• Add filter and sort options

The ability to search or narrow the library with advanced filters was one of the most-requested features among users, but tackling that was outside the scope of this project.

• Re-test with gamepad support

I wasn't able to make this happen so I'm not fully confident in my testing results, but there must be a way to create a prototype that supports a gamepad and then send that to users to test remotely.