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.