Discord Case Study: Bookmarking Messages

Like gamers, I appreciate a way to communicate in real time, and often in-game text and voice chats are not convenient. Discord is a messaging app that uses text, voice, video, and custom emotes. Chats are also organized by servers (communities) and channels (topics within a community).

Discord offers text, voice, and video chat, as well as screen-sharing and custom emotes, which is more robust and organized in the in-game chats of games. The fact that Discord’s chats don’t disappear doesn’t disappear unless the original poster deletes them makes it easier for communication compared to the disappearing chats in-game.

Prototype

Prototyping tool used: Figma

💬 It’s hard to keep up with messages and the content shared on Discord because:

1) There is no way to save messages to reference for later for individual users (separate from the pinning message system that only server admins may use).

2) Discord’s notification system prompts people to mute the entire app because the chats move quickly and important information gets pushed back quickly.


👥 User Research — Understanding why messages are hard to keep track of

I’ve conducted two rounds of user research interviews with 7 Discord users ranging from users who use Discord once a week and users who use Discord more than 20 times a day. The first round was general questions about Discord to identify key pain points, and the second round were questions around the main pain point I identified — keeping up with messages.

Before doing my second round of interviews, I formulated a hypothesis: If people want to stay in touch with friends easier, then a thread system would help them not miss messages or important links.

The insights I found were:

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

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

3) Most users use Discord to also communicate with friends outside of games.

Initial People Problem: People don’t want to miss any information on Discord, but they have a hard time keeping up with the content shared because there is no thread system.

📊 Market Research — how other apps enable bookmarking

Slack is another app similar to Discord with the feature of servers (“workspaces”). Slack has a thread feature, which makes it easier to follow conversations when there are multiple conversations going on at the same time.

Skype is what most Discord users who use Discord for games used before migrating over to Discord. One user prefers Discord over Skype is because it’s more lightweight and takes less on the CPU. Skype also has limited messages, whereas Discord as unlimited.

Messenger is another app users use to message friends and in-game friends. However, some did not prefer messenger because there are no channel system for organization.

People want to read the most important information first.

🌩 Solution Brainstorm

I initially thought that threads would be the solution to helping users keep up with messages, but then I discovered that being able to quickly navigate to the messages with key information or links is the most important to users.

I recruited two participants for my brainstorming session using Miro, a real-time whiteboard, to determine whether to improve upon an existing feature of Discord or 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 where all members of the server and channel can access. However, “important” is subjective and users consider different messages to be important to them. Thus, I proposed a personalized bookmarking feature on Discord to help users keep track of the messages that contain the information that they personally feel that are important so that they can keep up with the messages that they feel is important.

During the beginning of our brainstorm, we thought of the new features to be either a recap system or a thread system. However, we chose to go with bookmarks because:

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 to be sorted based on the messages a user “stars.”

2. Allow users to bookmark and categorize messages and create a separate feature on Discord that allows users to find the messages they have bookmarked — I ended up going with this one.

The other feature that was under consideration during the brainstorming session is the ability for a user to “star” individual messages than having a bot to determine which messages are important and then deciding bookmarking that for the user. This one did not get chosen for the final feature because there is less user control and may encourage people to not check Discord as much to reply to their friends because the bot summarizes everything for them.

The personalized bookmarking feature is also more feasible because it does not require programming a bot using artificial intelligence and machine learning so it would lead to a shorter development time.

📖 Designing Bookmarks in Discord

Instead of introducing a whole new feature for users to learn, I decided to use actions that users are already familiar with and combine the existing pinning feature on Discord and the bookmarking actions in browsers to reduce the cognitive load to new feature on-boarding.

I designed a bookmarking feature where users have the option to bookmark individual messages and then categorize them for them to refer to later. The bookmarks could be viewed at a new scene, which can be found under the friends list button on top of all the servers.

Content Requirements:

  1. If the users on Discord had the ability to join many servers, they should have the ability to be able to easily keep track of what is going on in all of them.
  2. If users use Discord for time-sensitive communication, they should be able to find the time-sensitive message quickly.
  3. If users use Discord to ask questions for help about a game, they should be able to find their answers quickly and refer back to them at any time they need.
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.

I then broke my feature design into three stages based on function — Adding bookmarks, accessing bookmarks, and deleting bookmarks.

🖥 Medium Fidelity Explorations

Medium fidelity exploration – Adding bookmarks

Adding bookmarks uses a similar interaction for the user as doing other actions with the message – such as copying the text. By having the bookmarking option in the same action menu pop-up as all of the other actions the user could take reduces the cognitive load for the user.

Medium fidelity exploration – accessing bookmarks

I decided to move forward with exploration 2.1 because the bookmark display in exploration 2.0 can be mistaken as a server with similar information architecture. Exploration 2.1 is inspired by the horizontal scrolling feature of instagram stories. Also, since to navigate between servers on Discord, horizontal scrolling is used so I maintained a similar scrolling interaction design throughout the bookmark feature.

Medium fidelity – deleting bookmarks exploration

I moved forward with exploration 3.1 and 3.2. Exploration 3.1 is a continuation of exploration 2.1. Exploration 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 in the chat as they don’t have to tap to the bookmarking tab in order to remove a bookmark and can remove the bookmark right away.

Before moving on to my visual design explorations, I also explored the design of specific screens of my medium fidelities.

Medium-Fidelity Exploration: Bookmark button placement

I decided to move forward with 1C with the bookmarks access button in different colors than the friend’s icon right below it because it gives it more emphasis and draw’s the user’s attention more.

Medium-Fidelity Exploration: Bookmark screen horizontal scroll

I moved forward with 2A because the dynamic horizontal scrolling enables users to access more categories than a static list of categories in the original design.

I chose to move forward with the horizontal scrolling navigation because it’s similar to Discord’s native vertical scrolling navigation that takes place when the users want to find the different servers that they are in.

Medium-Fidelity Exploration: Bookmark screen vertical scroll

I did not end up moving forward with this bookmark display format because the vertical text-based layout could be confused with a server. This structure is also busier than the horizontal scrolling one which can overwhelm the user.

Medium-Fidelity Exploration: Default chat

I moved forward with the original design because in 4A, having a shortcut to bookmark on every message makes the user interface look crowded. It may distract the user away from the main content of Discord – the messages.

🎨 Visual Design Explorations

Visual design exploration – bookmark categories on action pop-up menu

I moved forward with 1B because the highlight provides more contrast to the user so it’s clear to them which category they are selecting to have the bookmark in. I decided to keep the “Choose Category” bookmark symbol and text because it provides information on which step the user is in the action of adding the bookmark.

Visual design exploration – bookmark displays on bookmark menu

I moved forward with 2B because it introduces a new function, search, as well as information about how many bookmarked messages there are in each respective category. The user can search for categories or keywords of specific bookmarked messages, which can potentially decrease the number of actions the user has to take to find their bookmarked message.

Visual design exploration: bookmark displays in chat

I moved forward with 3B because the different color highlight of the bookmark makes it less confusing for the user. This new purple color is the same as the Discord purple, but with more transparency. Currently, the yellow highlight of the original design is used when the user has an @ mention in the message.

👤 Discord UI Kit

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

Colors
Icons and Typography

I created all of the icons with Figma’s pen tool.

Assets
Spacing study

🌅 Conclusion

Communicating through a game is inconvenient, so Discord offers a convenient way to communicate. However, often times it becomes hard to keep track of messages, so I designed a new bookmarking feature to save users time when they want to reference a past message.

💫 Appendix

Original brainstorm ideas (via Miro):

Original brainstorm ideas using Miro for collaboration