DISCORD!

Year: 2022

Role: UI/UX & Visual Designer

Platform: Desktop

PROJECT OVERVIEW

Discord, a platform initially built as a hub for gamers to communicate and build communities with one another, has continued to amass millions of users for the purpose of building art communities, school servers, LGBTQ+ spaces, and much, much more.

Many users are joining dozens of different servers — ones for work, study groups, art communities, and more. Because of this shift in users, however, users will need to be able to more effectively separate and organize their multitude of servers, in order to keep track of the various servers and communities they participate in.

The goal of this project weas to develop various solutions and remedies to support Discord’s shift towards a broader audience.

USER RESEARCH

82% of users reported that they were active on servers unrelated to gaming!

I first started my research by conducting a survey to understand the different types of usages for Discord outside of gaming. This survey was primarily conducted to see if the initial problem space was worth exploring—was Discord truly growing past gaming?

From this survey, it was clear that there was strong evidence suggesting Discord’s audience is growing outside of its original focus on gaming. I then conducted an interview with eight respondents who claimed to use Discord outside of gaming, in hopes of understanding any current needs or frustrations they might already be facing.

After these interviews, I placed my findings on a whiteboard—one section focused on what users claimed they needed, and another section focused on frustrations and problems users claimed to be facing.

Some of the needs and frustrations were ones that I had no control over, such as client vs. local storage for favorited GIFs. Other insights, such as a user’s struggles with Discord’s mobile application, would have warranted an extensive research project to understand why. I chose to push these needs and frustrations aside, prioritizing needs that were more achievable with time constraints.

KEY POINTS & DATA SYNTHESIS

What good is our data without a little bit of introspection?

It was clear that there were two themes beginning to show in my research:

1. The need for versatility

Multi-purpose users that utilize Discord outside of gaming felt that there wasn’t enough in place to cater, browse, and organize the way they interacted with their servers. By introducing new ways for users to personalize and streamline the way they access different servers and chats, we can let users interact with functionalities that suit their needs.

2. Improved User Control

Users who utilized Discord in more academic/professional settings felt there wasn’t enough in place to adequately separate such servers from their more personal, recreational ones. This lack of separation led to most users haphazardly creating alternate accounts to avoid certain frustrations, such as public connections on their profile cards. By developing different options for users to tweak the way they interact with the platform, we can avoid such user frustrations in the future.

There were several opportunities for Discord to focus on developing features for its growing user base. I chose to develop and refine my problem statement as a result.

How might we design solutions to support Discord’s shift to a wider audience?

I then moved into developing user personas to guide my design process—making my research easier to digest and empathize with.

REFINED PROBLEM STATEMENT:

IDEATION

After refining my problem statement to base my designs around, I came up with different solutions for the various pain points voiced during my interviews. These were placed onto an impact/effort matrix to gauge which ideas would contribute most to the project under the time constraints set for the project.

WIREFRAMES & LOW FIDELITY

With five solutions selected, I was confident to start sketching my wireframes and creating my low-fidelity mockups. For each design, I would test out different layouts for each feature and took notes on how certain animations would play between touchpoints. I did this for all five design solutions.

FINAL SOLUTIONS!

01. Visibility Settings!

A user testimonial that stood out during interviews, was an instance where the user was approached by a stranger from a mutual server they were both a part of. This stranger, having noticed their linked gaming profiles, began asking them about their hobbies and interests in an attempt to court them.

This user quickly realized that this third-party connection on their profile was something they’d like to keep private to strangers, haphazardly creating an alternate account to maintain privacy.

While other design solutions could have been proposed to allow users to swap between alternate accounts—the creation of an entirely new account should not be the primary solution to maintaining privacy.

02. Pop-out Chat!

Out of the 43 surveyed, 85% of users claimed to keep Discord on a second monitor at all times. However, on single-screen setups, every user preferred to alt+tab between windows, with many citing this repetitive action as tiring while multitasking.

Discord’s client has a hard time scaling horizontally, forcing the sidebar to be visible at all times. This can make multitasking hard on single-screen setups, with at least half a user’s screen estate being occupied by Discord’s client.

Pop-out chat allows users to more easily multitask with a pop-out chat functionality! This design focuses on being adaptable while retaining navigation patterns found on Discord’s native client.

03. “My Saved!”

“My Saved” is a dedicated space for users to view their favorite channels and DM’s. Here, users can bookmark chats into different tabs—personal, curated pages that freely allow them to organize their chats as they please. This design was created as a way to allow users to quickly hop between their most valued channels without having to manually skim through their entire list of servers and chats

Because “My Saved” can hold a large variety of channels across different servers, I wanted to make sure readability was emphasized in its design. To do this, channel categories are instead substituted by their respective server icon, in order to help users quickly understand where these channels are coming from.

04. Redesigning Server Folders!

When interviewed, six out of eight users who used server folders organized their servers based on thematic groups (i.e. school, hobbies, etc). A common frustration, however, came from the visual design of the folder icons, creating a visual clutter that made organizing servers an annoyance.

Creating server folders with distinct, clear identities helps users comfortably separate different types of server environments that don’t require creating an alternate account.

FINAL USER TESTING

What good are your designs without a bit of testing and feedback?

After having my functioning prototypes, I conducted usability tests with four participants to see how my designs would fare. From these sessions, I was able to gauge the following:

Testing Highlights:

  • “Pop-out” chat felt fluid and easy to navigate at first touch to all users!

  • The redesign of “server folders” allowed for a separation in server spaces that reduced visual clutter and cognitive overload.

  • The usage of “privacy sliders” was intuitive to all testers.

The primary criticism voiced during usability tests was within the “My Saved” design system, with a few users unsure of its functionality and usage, at first glance. While this likely may have been due to a lack of onboarding screens—exploring why and how would be the next focus for this project.

REFLECTION

What ultimately started as a project of curiosity turned out to be one of my favorite UX projects to date. This was one of the first UX projects where I got to interview random strangers over call—which was really fun! I also got to practice my visual design skills a ton, with a few users surprised to tell them that the prototypes I had made weren’t official!

If you’re interested in learning more about this case study, feel free to reach out!

UP NEXT Timid!