2022 (4 months)

Discord Voice Integration with Xbox

Xbox decided to partner with Discord to help players connect and play with their cross-network communities. As a design lead on the growth and acquisition team, I was working towards unlocking this path so players can find increase the pool of available friends they have access to. Our vision was to extend the Xbox brand beyond just the console into an ecosystem that included all of gaming.

Key responsibilities — Design execution
Impact — 2.5M+ monthly active users within the first 6-months of launch

As more games support cross-network play, there’s no centralized place to play and communicate with friends no matter where they are at the same time.

Xbox players report having less fun because their friends were not available to play at the right time and as a result, had to go coordinate with multiple social networks to get play setup.

Discord, which was already widely used for cross-network communication and coordination by PC and mobile gamers, was an ideal partner to pilot this investment.

Before this work, we did previously work with Discord to enable players to link their Xbox accounts and Discord accounts together, there wasn’t any substance or benefit to the user if they did connect accounts.

Process

The goal was never to design another Discord, but to open a path for players to join and communicate while they were playing games. In order to join a Discord channel, a series of actions needed to be taken in an order at the navigation level.

1. Choose a server

2. Choose a channel within a server

The Xbox guide works in a similar way where an object is selected, and subsequent information that is layered over top, is a deeper dive into the original selection. This insight gave us a well-defined direction to work towards an experience that looked like Xbox, but players familiar with Discord would have an easy time using.

We placed the entry point here because social experiences on Xbox have traditionally been concentrated in the Guide. This was due to it’s flexibility of being able to be brought up at a moments notice. It also ensured easy discovery for Xbox players who visit this page in the guide for all of their communications.

Xbox players can now see all of their Discord servers directly on the Xbox Guide. I partnered closely with the engineering teams on both sides to make sure metadata like server images, and names could be made available.

On the channel level, I had initially made an exploration similar to what Discord had with a detailed preview of who was calling. My thought process was that defaulting to familiarity was going to help reduce cognitive overload. The feedback I received from the team encouraged me to think more about the Xbox player’s perspective when interacting with a page like this.

• While pressing on the channel name might be a familiar join action on Discord, it isn’t a pattern that’s used on the Xbox guide.

• Showing the full roster on the voice channel level hides the other channels that servers may have. While that concept might work on a desktop app where scrolling and selection are more free form, controller input isn’t as flexible.

• Lastly, the Discord experience heavily revolves around gathering in a voice channel. However, this view is visually dominated by individuals.

Post-feedback: Revised solution

Shrinking active callers and bundled them together with the name of the voice channel allowed room for many voice channels to be shown without having to scroll. I removed any unnecessary information from this level to keep the focus on joining channels.

I moved more detailed information as well as a explicit ‘Join channel’ call to action on a third (roster level) to create final clarity. Since the player is now solely focused on one voice channel in one server, there is now more screen real estate to provide those details.

The in-call interface is designed based off of the existing Xbox Party Chat experience but with a few tweaks to language. I partnered with content designers to ensure strings like “Deafen” matched what was being used by Discord to bring clarity to players.

Learnings

• Don’t deviate from familiar patterns. Focus in on familiar mental models will improve ease-of-use.

• Stay focused on the best customer experience. It’s easy to get lost in the complicated deals that companies need to make in order for partnerships like this to work. Things will be back and forth and staying focused on creating a great customer experience will help keep everyone aligned on the goal.