Server Video

Bringing video, voice, and streaming to millions of people using Discord everyday.

Server video design on mobile and desktop devices

Discord is one of the most popular social apps in the world but our video chat was limited to groups of 10 people. Our team was focused on bringing video to everyone.

Two phones displaying people using server video

Discovery and Definition

The team had a strong understanding of what we were building from day one. During the time of this project, Discord was repositioning itself to be more inclusive to all types of communities. We needed a video feature that could serve everything from a study group, to friends streaming games to eachother, to remote learning.

We had three primary goals:

  • Unify our three existing video features into one.
  • Build a video chat experience that could scale to 50 people.
  • Provide a seemless experience between iOS, Android, and Desktop.
Illustration of our three projects merging into one
Merging our three features into one.
Six people using our legacy version of Discord Video chat in 2017
Our legacy video chat for up to 10 people.

Designing a system

Server video was going to be released on desktop, Android, and iOS at the same time. We wanted the feature to be familiar if you switched between platforms (which is common for our users) by using the same patterns, visual language, and components.

We designed and developed for each platform in tandem.


I started design by solving for how videos would be displayed, starting with a two person call.

Each person had their own 16:9 tile so we wouldn’t need to letterbox their video. Their name and additional states were also displayed in case they were muted or had their camera disabled.

Two video tiles from the Discord Server video desktop, one with a video enabled and one with just an avatar.
Two video tiles from the Discord Server video on iOS, one with a video enabled and one with just an avatar.
A pink rectangle with a mac book in the middle, on the screen are two women having a chat over discord server video

Grid View

Discord has two major channels in which users talk. Text channels and voice channels. Once a user was in voice, they could enable their camera. Given the shape of our video tiles, a grid felt like the most logical way to display everyone who was participating.

The engineers and I sat down to explore how we would the grid would change as more people joined.

Group of people hanging out on server video, displayed in a grid of rectangles.
Mobile grid of people using video on mobile to chat together.
A screenshot of all the prototype flow examples tested for Server Video on mobile.

Focused View

Once we had a fuctioning grid of people with cameras we ran into a new issue. Our grid view scaled successfully to our goal of 50 people, but that meant most video tiles were too small when you needed to focus on someone specific.

It felt natural to click on a video to make it the full width of the UI, but that came at the cost losing sight of what everyone else was doing.

To solve this, I designed and protoyped a step between the grid view and a full view, which we named the “Focused” view.

This focused view made the entire experience more social. You could make one person or screen a priority, but still see others as they spoke, react, or laughed.

Three simple collection of rectangles that demonstrate the different arrangement of videos for the focused, grid, and full views available in the server video feature.
We decided on three different states, grid, focused, and full.
Collection of screens and lines that show prototype behavior for server video.
Macbook showing the 'Focused View' of Server Video in action with someone cooking on stream.

Including Screenshare

A goal of Server Video was to make sure our screen sharing feature could embed within it.

A unique aspect of Discord is that when someone is screen sharing, you have to choose to connect to it, this is because multiple people can screenshare at once.

Active screen shares were displayed as if they were another member of the voice channel. We added an monitor icon + “Username’s Screen” so users could know who’s was streaming.

Someone live streaming a game on Discord.
Screenshot of the Discord design system and all the variations of the video tiles used in the server video feature.
Two phones showing Server Video being used and someone watching a stream on mobile.

Measuring and validating designs

In order to validate our design decisions we started with static prototypes. These helped us explore multiple ideas quickly that we could then narrow down further to start developing.

Every iteration we had some confidence in would then be shipped to the internal company of 250 for us to use during meetings, after work with friends, and with our most trusted users for feedback.

Once we gathered feedback from these groups we’d ship to a smaller % of userbase to then gather feedback via CX and social media communities.

We then continued to measure success through experimentation and various metrics like feature adoption, average length of a video chat, and data gathered from a feedback prompt.

The Result

After completing and MVP, we released Server Video as an experiment to our users in May 2020. We used CX tickets, feedback from social media, and quantitative data to make some additional changes.

I can’t reveal exact numbers but we’ve seen it’s usage grow consistently since it’s introduction.Server Video has become one of the most popular private streaming services on the internet.

Server Video was depicted in a Netflix show that covered remote life during Covid, teachers use it for remote learning, and people use it all over the world to connect to eachother. I consider Server Video one of my most rewarding projects as a designer. I’m proud to have been a part of this team because of the impact this project has had in people’s lives.

Three phones with screens displaying server video and young women watching their friend stream a social app.

Next Project