Discord Case Study: Bookmarking Messages

Discord is a messaging app with more more than 250 million users as of July 2019. Its chats are organized by communities and offer personalization through custom emotes. For years it has become gamers’ messaging platform of choice, surpassing VoIP apps like Skype and TeamSpeak.

Communication in games are difficult so Discord offers a solution for that. The fast-paced communication within Discord inspired me to design a new bookmarking feature to help users to quickly access past messages.

Prototype

👥 User Research

I’ve conducted two rounds of user research interviews with 7 Discord users with varying backgrounds in usages of the app. The key pain points of the app are determined, focusing on the ability to keep up with messages.

Insights:

Messages are hard to follow because there are no threads or bookmarking feature.

It’s difficult to recap major events on Discord when the user has not logged on for a few days.

The current notification system prompts users to mute the entire app.

Users want to read the most important information first.

Main User Problem: It’s hard to keep up with messages on Discord.

📊 Market Research: Team Communication

Slack is similar to Discord with the feature of servers (“workspaces”). It has a thread system to aid in keeping up with multiple conversations.

Messenger is another app users use to message friends and in-game friends. There is no channel system to organize conversations.

Skype is what most gamers interviewed used for VoIP before Discord. It takes up much larger bandwidth.

Teamspeak is another VoIP platform with a more complex onboarding process than Discord. It’s not free to host a server.

Before Discord, Skype and Teamspeak were used for VoIP. Discord rose to popularity with all it’s core features being free to use, low bandwidth, and simpler onboarding. Discord earns revenue through the Nitro subscription and company merchandise. Nitro offers premium features with more user personalization, higher quality video, and more.

Discord was originally used by gamers to communicate during a game as a more robust platform that in-game chats. Now, it also targets the business communication space.


🌩 Solution Brainstorm

I recruited two participants for my brainstorming session using Miro, a real-time whiteboard. We concluded to add a completely new feature — bookmarks.

Currently, Discord allows admins of a server to “pin” any message which appears in a channel-specific tab. However, “important” is subjective and users consider different messages to be important to them. I proposed an idea of a personalized bookmarking feature where each bookmark is specific to the user.

Our brainstorm is summarized as follows (the original one can be found in the appendix at the end of this case study):

Brainstorm summary of problem spaces, How Might We’s, and solutions

At the end, we came up with 2 areas to explore:

1️⃣ Develop a bot to determine the priorities of messages.

2️⃣ Bookmark, categorize bookmarked messages, and create a point of access — I ended up going with this one.

The personalized bookmarking feature is more feasible. It does not require programming a bot using artificial intelligence and machine learning.


📖 Solution Design: Bookmarks in Discord

Instead of introducing a whole new feature for users to learn, I use actions that users are already familiar with. I combined the concept of bookmarking and pinning messages to reduce cognitive load. The bookmarks are integrated in the main user flow of Discord.

Content Requirements:

Ease of keeping track of important information from many servers.

Efficiency: Accessing time-sensitive information quickly.

Accessing old messages for messages quickly.

Information hierarchy diagram

📝 Low Fidelity Explorations

I started my design with a low fidelity sketch taking inspiration from the existing Discord user interface and then adding some of my own ideas.

🖥 Medium Fidelity Explorations

I explored different user experience flows of the bookmarks feature using Figma. The features are split into three stages: Adding bookmarks, accessing bookmarks, and deleting bookmarks.

Adding bookmarks uses a similar interaction for the user as doing other actions with the message.

Exploration 2.1 is chosen because the bookmark display in 2.0 can be mistaken as a server with similar information architecture. 2.1 is inspired by the horizontal scrolling feature of stories in other common apps. It also differentiates between the vertical scrolling of server navigation.

I moved forward with exploration 3.1 and 3.2. 3.1 is a continuation of 2.1. 3.2 gives user more control as they have the option to remove the bookmark from the chat as well. This makes it faster for the user if they mistakenly bookmarked the wrong message directly in the chat.

I also explored the design of specific screens and conducted usability testing.

1C is chosen with the bookmarks access button in different colors. The different color distinguishes it among the other features.

2A is chosen. The dynamic horizontal scrolling enables users to access more categories.

This bookmark display type did not get chosen.

🎨 Visual Design Explorations

Before moving on to the high-fidelity prototype, I explored the visual design and conducted another round of usability testing.

1B is chosen because the highlight provides more contrast to the user.

2B is chosen. It introduces a new function, search, as well as number of bookmarked messages in each category. These two features are from usability testing feedback.

3B is chosen because the different color highlight of the bookmark differentiates it from an @ mention that already exists in the app.

🎨 High Fidelity Prototype

Interact with the prototype here.

📊 Metrics

Success can be measured by examining user satisfaction, task completion rate, retention rate, and advocacy.

User satisfaction would be measured through qualitative interviews. Task completion rate would be measured through how many users used the bookmarking feature vs didn’t use.

I would conduct A/B testing to compare Discord with and without the bookmark feature. Retention rate and advocacy would be determined.

The retention rate of the bookmark feature and time users spend on Discord would also be tracked over time to examine the usage.

Advocacy would be tracked based on how many users invite others to the server with the bookmark feature launched.

Additionally, I would look at how many users paid for the Nitro subscription with and without the bookmark feature.

📏 Edge Cases

Spring cleaning: Delete mass amounts of bookmarked messages at once.

Further personalization: Customize the orders of bookmark categories in all locations.

🌅 Conclusion

Communicating through a game is inconvenient. Discord offers a convenient way to communicate. Often times it becomes hard to keep track of messages as chats often move quickly. I designed a new bookmarking feature to enable referencing past references to be more efficient.

The challenges were that there was no UI kit available, so I recreated it. I also learned the importance of user testing at every design update.

💫 Appendix

Original brainstorm ideas (via Miro):

👤 Discord UI Kit

To aid me in my high fidelity prototype, I created a UI kit and conducted a spacing study.