A study on tweaking the voice communication app that keeps gamers happy

Tea Chang
Tea Chang
Jan 24, 2018 · 10 min read
Discord Desktop App post-tweaks

“It’s time to ditch Skype and TeamSpeak.”

Discord is a popular voice chat app used by 87 million gamers around the world. The app quickly took the gaming world by storm with its sleek design and player-friendly philosophy, trumping VoIP predecessors such as Skype, TeamSpeak, and Ventrilo.

Perhaps their greatest achievement was effectively enhancing and connecting social spaces (or hybridized third space) for the gamer, introducing access to multiple communities in the form of servers, all from one app.

In this guerilla usability study, I took a closer look at Discord’s desktop app specifically, interviewing users for insights on how I might better navigation in an environment jam-packed with information.

Although I don’t work for Discord, I enjoyed discovering the types of challenges they likely dealt with when designing the app and coming up with solutions for emerging ones.


Taking a bite of the discord

Examining the Discord app was an interesting challenge because unlike most apps out there, the majority of its usage occurs over voice.

The digital parts of the app act as a space to help facilitate different types of communication, from voice to text, asynchronous to real time. As a result, the app itself has many features and functionalities that operate independently from each other. This manifests in many smaller, disjunct flows rather than an overarching one guided toward a specific goal.

What Discord looked like at the time of my study

Interviewing seven users revealed two major usability themes that I would design my solutions around:

Efficiency

Gamers are looking to minimize time spent performing certain actions like messaging a friend, or inviting new people into existing servers so that they can return to the most common task at hand: playing.

Clarity

Users claimed navigating to or using certain features felt unintuitive, which resulted in abandonment or frustration. They requested simple visual or architectural changes that might help a friend feel more at home when switching to Discord in the future.

Perhaps the most important observation from the interviews were that all participants preferred to perform tasks directly from the server screen, where they spend most of their time interacting with other people. This screen is where users can choose to join into voice channels or chat with other users. Every user I interviewed had at least one server they chose to frequent and camp in for extended periods of time, even when inactive.

From there, I chose easy visual comprehension and direct access from the server screen as my core guiding principles when designing solutions.


Defining Wumpus

Discord has become so embedded in the lives of these users that many could not imagine a scenario where it did not exist. The people I interviewed all used the app daily, a common behavior of the core Discord user.

I took care to note the context of their usage, with the most relevant observations below:

Wumpus , as a persona. The original Wumpus graphic was made by Discord.
  1. Users are most often in the comfort of their home when using the app because they are computer gamers. They tend to use the mobile version when away from their computers, whether momentarily or in transit, to keep up with their servers. From the moment their computers are on, Discord stays open for easy access and continued use.
  2. Users were already familiar with many of the features and functions that the app affords because they had previously used some competitor. As a result, the learning curve was minor. Borrowing design patterns from other, similar apps would be useful in helping the user adopt to new changes.

Using the notes I gathered, I started thinking about viable changes.


Designing with the player in mind

After thematically breaking down the usability issues, I mapped out my priorities based on the impact to the core functionality of using Discord as determined by the average of user ratings, and how important that particular problem would be to the user.

I chose these dimensions knowing that Discord spends much of its time listening to user feedback in order to enhance and update their app.

A few fixes were grouped together into one problem as I sought a single solution for them. Here, I wanted to focus on why the user was requesting the changes and not necessarily how to solve for each individual problem.

1. Creating invites with unquestionable certainty

Currently, there are three ways to create invites for your friends:

Quick Tips
When you first download Discord, a window in the top left area shows quick tips to help you get started. While this window’s contents can be different across servers, one version includes a wide “Invite People” button. However, closing this window means you will never see it again.

Instant Invite
Text and voice channels in a server have an instant invite button on hover, or if it is active.

Server Settings
Every server also has their own settings in a dropdown at the top left. From there, an invite button shows as the first option, distinguished in Discord blurple.

Although quick tips is also the most impermanent way to invite people compared to the other two options, users always leaned towards using this button first in order to trigger the invite modal if it was available. The sheer visibility of this option allowed users to easily know where to go when inviting someone.

In contrast, the channel’s instant invite button gave some users confusion about whether the invite would lead them directly to that channel or to the server.

For good measure, I used both the icon to invite people and the text with the intention of possibly shrinking this button down for users who rarely invite more people in the future.

Knowing that users wanted an obvious and direct route to one of the most important functions of the app, I added a slightly different version of the wide invite button to the top left corner.

2. Reaching the friends list faster

Discord packs a ton of information into the main server view. One thing it misses is a more direct path to your friends list. No doubt this was purposefully designed to distinguish between the two modes of access from servers to friends.

But to users, Discord is the hub used to connect with any and all friends who are online, regardless of if they are in your current server or not. Taking an extra step to see your friends list to message someone new can be inconvenient when leaving the rapidly updating text channels.

The indicator next to the Friends List shows the number of friends online

In order to make the friends list, and consequently messaging, more accessible, I converted the member list to a slider that allows you to toggle back and forth between active server members and your friends. In doing so, I also took the liberty of removing the icon used at the top to open and close the list. Instead, I added a simple arrow to indicate that the drawer could be closed.

3. Seeking out the server owner

Imagine going into a server filled with hundreds of people and wanting to find out who owns the server in order to get in touch with them. How do you identify that person?

Users in my interviews were unable to find out how to do this, and chose to resort to word of mouth instead. Roles, used to grant members administrative powers, are sometimes wrongfully perceived as the actual hierarchy of permissions in a server. Since the server owner always has the highest admin rights, their name may never show up at the top of the member list unless they specifically set a role for themselves.

In this case, although Stacey shows at the top of the list, she does not actually own the server.

Discord can show you who owns the server, but it requires digging in to the server settings and permissions to do so. They use a simple crown next to the member name to indicate who owns the server. I extracted this crown to be made public in the member list, an option I figured could also be turned off at the owner’s discretion.

4. Changing nicknames

A nifty feature that Discord provides is being able to change how your name displays in each unique server. You could be Pepe in one server, King Pepe in the next. But many users had no clue where they could go to change their nickname, and even skimmed over the menu options in searching for it.

The problem here was that reaching the changing nickname menu was hidden in dropdowns and right clicks. The most intuitive path for users was to click their name on the right-hand member side, or their profile picture at the bottom left.

These mini user profile cards appear when left clicking any user’s name anywhere in the app.

In order to make this feature easily accessible, I scaled the existing new message icon down and added it as a small button on the user profile. Pressing this simply activates the change nickname flow.

5. Mute Distinction

Discord allows users to mute themselves, as well as mute others. However, there is no existing way of distinguishing quickly between who muted whom. Here’s an interesting story that a user provided, illustrating in depth:

Jake goes over to Derek’s house to play games. Derek, not wanting to hear him talking twice over Discord, mutes Jake and continues playing. Jake returns home the next day and he joins into a Discord channel as usual, where Derek and friends are in the middle of playing League of Legends. Occasionally, Jake adds in commentary, and amidst the chaos of voices thinks nothing less when Derek ignores his advice. Later on, Derek realizes he had forgotten to unmute Jake, mistakenly having thought that Jake had been the one to mute himself.

That’s a lot of words wasted. Muting yourself or others isn’t exactly uncommon either. Many users use it as an alternative between “I’m Busy” and “I’m still here.” Sometimes users are simply in settings that aren’t conducive to talking. Without contextual information, or better memory, the inability to tell what type of mute is being used creates a potentially painful lesson.

Thankfully, the solution to this problem seemed elegantly simple. Currently, if a user mutes themselves, a red slash is applied on their mic at the bottom. I borrowed this pattern to apply to a user-initiated mute on someone else. Here, the color red serves as an apt indicator of a hazardous action, allowing users to easily understand the implications.

6. Bookmarking, not pinning

Sometimes in the tumultuous onslaught of spam happening in chat, a special gem needs to be saved. Likely, it’s a meme you want to immortalize, or some important link. Apps like TeamSpeak allow users to pin text to the channel, so that it’s first thing you see when you log in. However, unlike Discord, the chat clears every time you log out.

Discord’s version of the pin allows you to save a snippet of the message that you can access later on by clicking the pin button in the top right corner. The snippet acts as a preview, which is linked to the original message. Upon clicking it, the user is taken to that message by scrolling up through the history of messages in that text channel.

Some users thought the pin was confusing and acted more like a bookmark function than anything. To increase clarity here, I changed the pin to a bookmark instead.

I wasn’t able to design a new pin function during the time of my study, but I did record my ideas on that in another post.

The Final Design

You can see the overall changes below, summed up with 6 distinct parts.


Happy players

I tested with five more Discord users after making my changes. The most radical change was the organization of the friends list. And while 4 of the 5 users adopted it quickly and used it right away as a means of accessing their friends list, one user did cite that the right-hand organization seemed unnecessary.

Overall, all of the participants thought the design was more user-friendly, especially for beginners. They were able to understand the different mute types right away, and were more confident in their ability to quickly create invites, change their nickname, and identify the server owner without confusion.

Wumpus, the adorable Discord mascot

Building communities that champion your product

Funnily enough, users being interviewed opened with the thought that Discord was pretty well-designed already, and that anything they had to offer was mainly a nitpick. Being able to be a part of this research reaffirmed my love for the gaming community, as it was rewarding to see how passionate each of these users were for the success of the product.

As a big fan of Discord, I’m excited to see them continue to take the world by storm as it has become my favorite app for communication. It’s easy to imagine a new playground for Discord, one where users are not only gamers, but employees facilitating team conversations, and other social communities connecting across the globe.

If it was your first time being introduced to Discord, I hope you had fun exploring its features with me. Check out the beautiful app and its capabilities here.


EDIT: My server admin visibility change made it into a Discord update! :)

Thanks for checking out my case study on Discord. To see the prototype in action, check it out here.

I also took additional notes, delving in a bit deeper on some of these fixes individually which you can find here.

Cup of Tea

A sip of the user experience of new media

Tea Chang

Written by

Tea Chang

Product Designer with a love for creative details, compelling stories, and video games

Cup of Tea

A sip of the user experience of new media

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade