Image of a hand holding a phone with the Discord app open.

Discord

Adding a feature to Discord's mobile app to help elevate the stream experience amongst friends

Introduction

Discord is a free voice, video, and text chat app that allows people ages 13 and up to talk and hang out with their communities and friends. Users utilize Discord to talk about many things ranging from art projects and family trips to homework and mental health support. While it is a home for many communities of different sizes, it is mostly utilized by small and active groups who talk regularly.

Role
I contributed to the overall design process and oversaw aspects related to user flows, wireframes, rapid prototyping, and usability testing.

Additionally, I conducted user research and contributed to synthesizing research findings to produce viable ideas.

Project Scope
The project was completed in 4 weeks with weekly meetings with my mentor for guidance.

Tools
Figma, Google Forms, Maze, Zoom

Image of the logo of Discord.

Problem discovery and the solution…

At the moment within Discord’s mobile app if a user is watching a stream within a voice channel, to chat with the group the user has to toggle between the chat screen and the streaming screen which takes away from the user experience of enjoying simultaneously watching and chatting with friends at the same time.

My goal for this project will be to create a feature that will elevate the user experience when utilizing the Voice Channel product on the mobile app within the time constraint of 80 hours. The feature I would like to work on implementing would allow the user to have a side-by-side view of the stream they are viewing and the group chat to allow for a better experience overall.

Let’s examine the current flow:

  • Image of the server screen inside of Discord

    1.

    The user needs to tap on the current person streaming. If another user has the "Live" symbol next to their username that means they have a current stream active. Anyone within the voice channel can watch.

  • Image of the stream screen of Discord

    2.

    To enter the stream, the user will need to click “Join Stream”, “Join Voice” (unmuted), or “Join Muted” (communicate mainly with text).

  • Image of a stream playing within Discord

    3.

    Here the user needs to tap the screen to show more options.

  • Image of the stream screen being tapped opening menu buttons at the bottom of the screen

    4.

    To find the text chat on the app, the user needs to press the message icon to access the text channel.

  • Image of a text channel within Discord

    5.

    From here the user will be taken to a new screen only containing the chat. They will only be able to hear the stream from here.

The Process

Research

  • Competitive Analysis

  • User Research

  • Creating a Persona

  • User Scenarios

Interaction Design

  • User Flows

  • Wireframes

Iteration

  • High-Fidelity Prototypes

  • Usability Testing

  • Test Interpretation

  • Priority Revisions

During my research phase, utilizing secondary research and user research, I want to understand any current pain points with the Discord mobile app along with the voice channel streaming and chatting features.

My research objectives included: 

  • Understand and find the current items that work and what items are problem areas on streaming services.

  • Understand the main reasons why users utilize Discord.

  • Learn if there are consistent problem areas in utilizing the mobile app for Discord.

Research Phase

Competetive Analysis

For my competitive analysis, I researched different streaming and live chat platforms. My main takeaways come from mobile versions of YouTube and Twitch. These are formats that are tailored for streamers and followers.

Both applications offer the availability of watching a stream and live chatting simultaneously. In portrait mode on a phone, you have the availability to watch the stream on top and view the chat or comments on the bottom. When in landscape mode, you have the availability to view the stream and chat side by side.

Secondary Research

Image of 3 animated people in a huddle
Image of a chart moving upwards

Outside of being an app that is targeted toward video game players, there has been a rise in how many users utilize the app for socializing. Users can create servers based on any kind of topic and join communities based on their likings or they can just create a server with friends to hang out virtually.

Mobile Downloads:
‍In 2021, on iOS, Discord was the most downloaded free social network app in the US.

In 2021, on Google Play, Discord was the highest-grossing app for communication in the US.

Image of a chat bubble

About 70% of users use Discord for gaming/streaming.

There is 4 billion minutes worth of conversation exchanged daily.

The average user spends 280.6 minutes per month on the app.

I created a survey utilizing Google Forms to collect quick data on what users think about Discord. The users ranged from primarily desktop application users to those who utilized both the mobile and desktop app simultaneously.

User Research

  • To communicate with friends

  • Play games and simultaneous

Common Reasons Downloaded

  • Servers and voice channels

  • Video and screen sharing

  • Bots

  • Nitro

  • Direct messaging

Most Utilized Features

  • The mobile app can be too sensitive when swiping or tapping on the screen

  • Toggling screens when watching a stream can be frustrating

  • Voice channels user flows can be confusing

  • Some features on the mobile version, compared to the desktop version, are lacking or are not included in the app

Common Pain Points

Creating a Persona

"It would be nice to have an application that can be accessed on both a desktop and a mobile device where I could meet up with friends virtually and watch movies or shows as well as just have a main place to communicate with friends while playing games together."

- Johnny Chester (Persona)

This aspect of the project was really fun for me. I use Discord often, so I was able to create and pull ideas and thoughts from personal experience and my user survey results to create this persona.

User Scenarios

To help me get into the mindset of the user, I created a few user scenarios to work off of to prepare myself for the design phase.

  • I want to play games and chat with my friends while utilizing a text chat simultaneously.

  • I want to play games and chat with my friends while utilizing voice chat.

  • I want to watch my friends stream their games.

  • I want to watch my friends streaming and utilize text chat.

  • I want to watch my friends stream and talk over voice chat.

As a user…

Interaction Design

User Flow

My user flow for this specific feature focused on a user joining a server where a friend is currently streaming.

Within Discord, users can join on a microphone (voice chat) or by typing messages within a text channel. These options are featured in the user flow I created for this project. However, for the purpose of the feature I wanted to create, I focused more on the user joining a stream muted and utilizing the text chat function. In the end, this flow really helped me organize the steps out before designing the final feature.

High-Fidelity Wireframes

Since Discord is an app that is already in existence, for this case study and with the guidance of my mentor, I started working with high-fidelity wireframes versus starting with a low-fidelity wireframe. Within this phase, I utilized screenshots from within the app itself to help me create screens that were very close to the existing app.

I got a lot of inspiration from mobile versions of Youtube and Twitch. The two allow users to watch a video or stream and view a live chat or comment section simultaneously. However, a common con of these apps is that items can feel packed within the amount of space offered. When it came to building out this feature I wanted to create something that was flexible and customizable by creating a scaling option for the screens and allowing breathing room for the chat and chat features and the stream itself.

  • Image of Youtube's current layout of videos and comment sections (in portrait mode)

    Youtube

    Inspiration #1 for my design.

  • Image of Twitch's current layout for streams and live chats (portrait mode)

    Twitch

    Inspiration #2 for my design.

  • Image of the high-fidelity prototype created for this project.

    First Iteration

    My High-fidelity wireframe for this feature.

Iteration and Implementation

  • Login screen for discord
  • sign in screen for discord
  • start screen for the discord app - opens on last Direct Message opened
  • List of servers for discord
  • voice channel panel inside of a discord server
  • screen for user to join current streams
  • current stream playing - untapped
  • current stream playing - screen tapped by user opening bottom and top menus for messaging, closing the stream, muting and unmuting, and turning on the users camera.
  • screen with the #General chat open with a drop down to change the chat to a different text chat channel
  • text chat channel screen #2

High-Fidelity Prototype

Above you can find all the screens created for my prototype.

My main goal when it came to creating a new feature was to improve the streaming experience for the user. My hypothesis going into testing is that users will enjoy being able to view the content they are watching as well as simultaneously chatting amongst friends.

When building my prototype, I knew that I wanted to create an experience that was nearly spot on to the current application. At times there were frustrations figuring out how to make certain animations, buttons, and features similar to the app. In the end, I was really proud of the new feature and the creation of the prototype in itself! If I had more time, I would definitely want to go into a deeper dive on how to improve the current flow, since, for new users and those who don't use the mobile app often, it takes a little to learn how to get to the end point of joining a stream and finding the stream chat from there.

The Prototype

Within this prototype, you can view a stream window and text chat all on one screen!

Testing Objectives

The main objectives for the usability testing on this case study were to:

  • Observe how users navigated through the app.

  • Discover how they felt about the overall design, flow, and layout of the new feature.

  • Investigate if this new feature is helpful in elevating the stream and chat experience on the mobile app.

  • Number of participants: 6

  • Average time spent with each participant: ~20 minutes

  • Time for each participant to complete all tasks/scenarios: less than 5 minutes

Summary of the Findings

For now, one of my main priority revisions for this project was to make the scaling function more prominent. Based on feedback received from the user testing, a participant inquired about having a feature to scale the stream window or scale the chat window in size. Although I had one already implemented it was apparent that it was both small and hard to understand what the purpose of the button was. I adjusted the design of the scaler to be more prominent in its feature by drawing inspiration from Samsung mobile devices as they currently have a similar feature in place within their phones!

Priority Revisions

  • Image of the original prototype created with a small adjustment button in-between the stream and the chat

    Original prototype created

  • Revised Prototype

Next Steps

The next steps would be to test again to see if the new changes to the feature hold up in a new usability test. We can also from here do a deeper dive into the flow as a whole and see how we can improve it to make it easier for new users of the mobile app to understand. When I ran testing, it was obvious to see that there was a difference in how the program works from desktop to mobile and so far the desktop app has a better, quick, and easy-to-learn format and flow but when switching to mobile, it's a different story. So looking more into how we can improve the mobile flow is something we can look into in the future.

Let’s create together!

MORE CASE STUDIES

An end-to-end application to help reduce the stress around parking in big cities.

Btwn the Lines

The Bloom

Restructuring a local cafe’s website to help create a more efficient ordering process.

Premise Health within Dell Tech

Examples of UX Writing created during my time with Premise Health.