Discord Categorized Homepage
Helping users find their communities and friends in an efficient, clean way.
Outcome
A solution for organizing Discord servers
Role
UX Designer
UX Researcher
Tools
Figma
Adobe Photoshop
Timeline
2 Weeks
THE CHALLENGE
One tiny sidebar can hold up to 200 servers.
Discord mobile users often have to manage extremely long lists of servers on a small vertical sidebar. This can be extremely tedious to navigate on a daily basis.
DESIGN PROCESS
From start to finish
INITIAL DIRECTION
Hypothesis
I believed that users would want to get community suggestions on Discord to help them join more servers.
However, this was not the case. There were far more UI and organizational issues that affected their navigation.
TARGET USER
The average Discord User is:
-
18-34 years of age
-
likely to be a gamer
-
has a large social network on Discord
-
tech savvy
RESEARCH METHODS
To better understand my users, I conducted these types of tests:
-
Direct experience interviews on Discord
-
Analogous experience analysis on Slack and Reddit
-
Moderated think aloud protocol
-
Remote unmoderated test
-
System Usability Scale surveys
CHANGE IN DIRECTION
Discord culture is extremely unique in comparison to other platforms.
I initially hypothesized that users would want a way to connect with others by joining more suggested servers.
I was surprised to find out through direct interviews about Discord that users in fact did not want ways to find more servers. There is a desire for privacy on Discord, and users actually prefer but rather a way to better organize or navigate their current ones.
ARCHETYPES
Types of users I interviewed
Gamer
Wants to use Discord to stream games and chat with other gamers live, uses it as a tool to group together for team games.
"It's a pain for me to navigate through all my folders on mobile to find the right server for a specific guild raid."
Networker
Wants to use Discord to socialize on a variety of topics, uses it as a messaging forum to chat with people online.
"It's hard to leave all my old community servers that have been overrun with bots."
Collaborator
Wants to use Discord for school or work, uses it as a collaborative workspace to keep up with project updates.
"I want to be able to organize my servers to meet with my teammates, but the folders don't really have a labeling option."
MODERATED THINK ALOUD
Establishing a baseline
Through this, I was able to determine that the Discord mobile app needed a better way to organize and label servers to help users have more control of and navigate their own servers.
I further tested users by giving them a series of tasks regarding server organization in order to get a control test to see how they currently navigated through their servers.
PROTOTYPING
Starting small with folders
I started prototyping by looking into different variations of folder organization. During this time, I also did a competitive analysis of Slack and Reddit, two analogous experiences, to see ways they handled their information architecture.
PROTOTYPING
Going larger by revisiting the overall information architecture
I ended up prototyping two versions for A/B testing - a sliding sidebar and a categorized homepage.
RESEARCH METHOD
Categorized homepages were high impact and easy-to-use
Through A/B testing and studying System Usability Scale survey averages, I was able to determine that the categorized homepage prototype was the easiest to use as well as the highest impact.
FINAL ITERATION
Keeping it simple
In my final iteration, I changed the categories into a gridded icon structure rather than horizontal scrolling based on user feedback and after also consulting a software engineer.
MY THOUGHTS
A dive into doing quantitative research
One of the most valuable things I learned from doing this project was learning how to derive insights from doing quantitative tests. I also really enjoyed learning about the cultural differences of Discord as a social media platform from other analogous platforms.