Discord is a messaging/social networking app with over 100 million monthly active users as of June 2020. Discord's community driven focus is to provide users with a platform to which these users can communicate among each other within topic-based channels. Within personalized servers users can share custom emotes, organize events, and build personal connections.
I do not work for Discord, and the views in this case study are strictly my own. As a budding designer, I acknowledge that my vision for this project is overly ambitious and at times reliant on assumptions of business goals. In a perfect world, I'd love to work alongside the Discord team with direct access to these resources to guide my work. Until then, this case study is meant to be an exploratory learning experience is a product I deeply admire.
An accessible feature that aims to help users create and manage their friends list into customizable groups.
When communication among users form friendships, leads users away from communicating on the community server to direct messaging. As I brainstormed ideas, I took notice of a common pattern of pain points with the friend’s page. It brought me to attention that making communication with many users can lead to a large friend’s list, which could pile up into a complex mess of users to navigate across.
After establishing the data leads my reasoning toward:
Discord’s current Direct messaging & Friend’s page feature becomes cluttered after a considerable amount of added users it becomes overbearing on the user to find a friend they are looking to message, call, or play with.
From here, I focused on creating a feature that would help Discord users with this matter. These conversations led me to the following opportunities:
Currently, Discord allows users to create their own servers and groups chat, which they can customize. However, these features are not complete solutions to organizing their friend’s list and experience using Discord.
I had set my proposed idea for a personalized group feature.
Using site mapping displays how users are currently interacting with Discord’s established friends lists. This map integrates the tool of being able to organize your friend’s lists in the user flow by allowing users to create new group categories. Allowing users to add friends into a new group or place them in an already created group. This user flow doesn’t obstruct on the current design system of Discord for ease of use.
I began experimenting designs of a Friend Groups feature for users with ever-growing friends list from their experience in various servers they take part in and be able to organize those friends to which they interact with them (i.e. games, entertainment, etc).
In the development, I would structure the group functionality into the current framework of the Discord app without making major changes so it could be accessible to users. I initially designed this by creating the friends group feature within the direct messages section of the app. Then I moved into developing its display in the friends tab of the app, since that is the main friend’s page.
For the prototype, One focus that I had set out was designing within Discord’s design system and using it within the groups feature. This focus was both a measure of understanding how the layout and implementation would occur on mobile and desktop. When designing for the desktop, some aspects where changed from a separate page to create a new group to an overlay. I made this change to match Discord’s system of creating a new server and inviting people so it streamlines with the user flow.
Once identifying my target audience of Discord users, I user tested my prototype with 5 Discord users ranging in their use. I interviewed these users for about 45 minutes via Discord’s voice call in which they screen shared their interaction with the prototype.
They were free to explore the prototype to which they then give their thoughts on how this feature will work.
When exploring designs for different sections of the groups feature and testing them with Discord, users allowed me to understand more about what design remains consistent within the design system and what I can change. The project’s focus views how the user will interact with their friends on the Friends page itself where the Groups Feature flows with design system.
For the Friends Page, I initially place the Groups Feature on the side of the Friends Page so that it can hide by sliding to the left, similar to how servers are present. As I tested that design, it lead to increase cognitive load on the user who mistaken it for the server list. I revised the design by my placing the “Your Groups” feature at the top of the Friends page so it will be the first thing people to see if they want to view what friends are online within those groups. When creating a new group, users have the option of which users from their friend lists can place or remove friends into a group.
After the interview, some notes that I would remark on the current Discord design system and prototype for my revision were:
1. Some had expressed that their friends list is very much cluttered.
2. They expressed that this tool will help them organize who they interact with.
3. This option allows them to find friends for a specific game or who they interact on a frequent basis.
The Friend Groups bar provides the means of easy access to your friends located at the top of the Friends tab where they can be neatly organized and be distinguished from each other. Your Groups can be organized by your choice of categorization.
You can create new groups where you can customize its name, cover image, and choose what friends you want to specifically have in these groups.
You can edit your groups whether that be deleting needed groups, and also have the ability to rearrange the placement of how your groups are displayed on the groups bar.
Communicating with friends through in-game chat is often inconvenient. Discord offers a simple and convenient way for communication. Frequently it is becoming more difficult to keep track of friends’ messages as channels continually move quickly and friend’s list piles up. I designed a new group feature to enable organizing friend’s lists to be more efficient.
This was my first solo UX project, having to make all my decisions throughout the design process on my own was something I had to learn. Working with teams is great for getting multiple perspectives and was something I had to compensate through usability testing feedback and evaluating that information to make the revisions needed. Another challenge was recreating Discord’s user interface in Figma from scratch, both on the mobile and desktop version learning is design system from screen shots.
