Server Video

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.

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.

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.

Videos

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.

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.

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.

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.

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.