Table of Contents
Project Type
Usability Test & UX Design
Timeframe
May 2021
Methodology
Usability Heuristic Evaluation, Severity Ratings,
Overview

Discord is a messaging and voice app, created for the gaming community. Since launching, the app’s audience has grown tremendously, leaving room for improvements to the overall usability of the platform.

A Usability Heuristic Evaluation of the audio chat features within Discord's desktop application was conducted. Ratings were assigned based on the severity of the issue and the most severe were redesigned to help improve the customer experience and enhance usability.

The Test

User Tasks

We found significant issues in the user experience of Discord’s audio chat room feature. Most significantly, customers may find it difficult to adjust their sound within audio channels. In our evaluation, we will score the usability of the following features:

1. Joining an audio room from the home dashboard
2. Sound adjustment within an audio room

Severity Rating Scale

We do not believe this is a usability problem
This is a cosmetic problem and needs not be fixed unless there is extra time available on the project. 
Minor usability problem; fixes should be given low priority.
Major usability problem; fixes should be given high priority.
Usability catastrophe; it is imperative to fix this before product launch.

Results

Visibility of System Status

The problem

The “Voice Connected” message denotes that the customer is connected to an audio chat, however, the message is located to the bottom left of the screen and can easily go undetected. Once the user navigates to a different screen, that is the only indicator of their specific location within a server.

Suggested redesign

Include breadcrumbs in the form of tabs at the top of the window to indicate a change in status when the audio channel is joined to avoid confusion

Match between system and the real world

The problem

Using words like “Server” and "Channel" to describe rooms or groups differs from mainstream terminology and confuses newer community members.

Suggested redesign

Use more familiar terms like “Space” or “Workspace” so newer users understand their meaning and function.
Clear differentiation between “Channels” and “Server” spaces. This can be accomplished with simple headers in lieu of the current sidebar navigation.

User Control and Freedom

The problem

Once customers navigate into a page, there is no “back” or “cancel” button easily available, which makes control and freedom difficult.

Suggested redesign

Include navigational tools at the header that allow users to move back and forward throughout the app and easily find audio and other locations they have recently visited. These functions were previously unavailable and help improve the users control and freedom.

Consistency and Standards

The problem

Discord uses a “deafen” control, which may confuse customers. The behavior of these controls is also an issue. “Deafen” automatically activates “mute” whereas mute may be activated alone.

The notifications use an inbox Icon, which appear to represent DM, but they are actually found on a completely different page.

Suggested redesign

Include information icons to help users identify the difference between “mute” and “deafen” or include informative icons that help the users identify the difference.

Error Prevention

Pass

If mute has been unintentionally selected, and sound is detected, a notification “Your microphone is muted” appears within seconds.

Recognition rather than recall

The problem

Voice channel icons differ at channel labels and audio options. Therefore, users do not immediately recognize the options at the bottom left of the screen represent their options within their current channel.

Suggested redesign

Use consistent icons for call options and channel labels

Flexibility and efficiency of use

The problem

Some of the advanced settings offer quick, one-click audio solutions to common audio issues compared to the complex settings prioritized at the top of the page.

Suggested redesign

Reorganize the audio settings to prioritize quick, one touch solutions and provide additional guidance on the current settings

Aesthetic and minimalist design

The problem

At the server screen, there is crowding at the right side with a surplus of elements associated with online friends. Discord allows the user to toggle their friends list within the server, but that space is dedicated to that functionality.

Hierarchy is maintained at menus, but headers lack contrast compared to supporting information. This increases the user's time spent searching for their option.

Suggested redesign

Allow viewing of settings, help, notifications, and DM's at this location in lieu of the default friends list.
‍
Give headers higher contrast and larger text to clearly define grouped information.

Help and Documentation

The problem

Help is provided to the user at both screens, however a chat box, or on-screen guidance is not present. Upon clicking both locations, the user is navigated to a “user manual” web page. The instruction material is available, but getting help is a timely process being that the user has to identify the issue and then find its solution.

Suggested redesign

Include audio related help within the settings page, guiding the user to the setting that resolves their issue. Further, add icons at each end of the audio/video slides that guide the user.

The Redesign

Space (server) functionality

- Servers   Spaces
- Easily navigate back, forward and access history
- User control over panel content
- Icon consistency

Heuristics Represented

Visibility of system status

Match between system and the real world

User control and freedom

Consistency and standards

Error prevention

Recognition rather than recall

Flexibility and efficiency of use

Aesthetic and minimalist design

Error prevention and recovery

Help and documentation

In-call options

- Floating audio tool bar when connected
- Clearly marked disconnect button
- Unmistakable status when "connected"
- Deafen mode   Silent mode
- Notification when sound is detected while muted

Heuristics Represented

Visibility of system status

Match between system and the real world

User control and freedom

Consistency and standards

Error prevention

Recognition rather than recall

Flexibility and efficiency of use

Aesthetic and minimalist design

Error prevention and recovery

Help and documentation

Voice and video settings

- Hierarchy and efficiency of the voice & call options
- Clarity of specific setting function
- Advanced vs basic settings
- On-Screen access to help

Heuristics Represented

Visibility of system status

Match between system and the real world

User control and freedom

Consistency and standards

Error prevention

Recognition rather than recall

Flexibility and efficiency of use

Aesthetic and minimalist design

Error prevention and recovery

Help and documentation

Design System

Molecules

Organisms

Microphone adjustments

Toggle Settings

Input-Output

Video Settings

Server Menu

Space Menu

Tool Bar