This feature worked well for switching voice channels, seeing who was talking, or knowing which of your friends left their microphone unmuted (I’m looking at you, Siegfried).

While this focus on voice features was useful, we wanted to make the overlay useable for Discord’s other core features.

About the design process

The Discord design team’s process generally follows the double diamond method.

This process can be broken down into four phases: discover, define, develop, and deliver.

Discover

In order to define what a valuable overlay experience might look like, we set aside additional time for discovery during our design process. During this period, we interviewed both overlay and non-overlay users. We read through our feedback board, played games with our existing overlay, camped in the woods for three days, and spent time brainstorming ideas to bring to our discovery meetings.

During this discovery period, we learned a lot about ourselves, our hopes, dreams, and fears. Figured some stuff out about the overlay too:

We discovered

We should provide benefits to users for every type of game. This includes single player, multiplayer, or massively multiplayer.

This includes single player, multiplayer, or massively multiplayer. Performance of the overlay is a critical part of the experience . If the overlay drops a game’s performance, isn’t reliable, or doesn’t resemble the desktop app, then users won’t want to use it. And who could blame them?

. If the overlay drops a game’s performance, isn’t reliable, or doesn’t resemble the desktop app, then users won’t want to use it. And who could blame them? Use existing design language wherever it makes sense. If we have an existing design component or familiar flow from the desktop app we should leverage it as long as there isn’t a better contextual replacement.

If we have an existing design component or familiar flow from the desktop app we should leverage it as long as there isn’t a better contextual replacement. Text chat within the overlay is something everyone wants . It provides the opportunity to improve engagement, match the desktop experience more closely, and lets us introduce new features unique to the overlay.

. It provides the opportunity to improve engagement, match the desktop experience more closely, and lets us introduce new features unique to the overlay. Camping is a bad place to realize you’re afraid of the dark. Not all self-discovery is good.

Not all self-discovery is good. Reduce friction for main use cases. The actions the majority of our users will be utilizing the overlay for should be simple, familiar, and obvious. These actions include join voice channel, respond to a direct message, and accept an invite.

The actions the majority of our users will be utilizing the overlay for should be simple, familiar, and obvious. These actions include join voice channel, respond to a direct message, and accept an invite. Provide an experience that mimics the joy of using the desktop app. We should aim to include all of the quality of life and fun features of the desktop app whenever possible. It shouldn’t feel like a different product. More like we grew a third arm and we give amazing hugs now.

Define

Our projects at Discord start with a product spec. This document describes what we’re building, who we’re building it for, and the outcome we want to achieve. This process is collaborative, the entire product team — both engineering and design — can weigh in on all aspects of the project.

In the case of our overlay redesign, our discovery phase helped further define the product spec. We updated the spec, reprioritized features, and set scope so the team was aligned before starting development.

Develop: challenges of designing an overlay

Before opening up a design program we started sketching and whiteboarding ideas. The sketches are quick and fairly rough so instead of sharing those, I’ll share the designs that were created from those sketches.