Discord Concept: Bookmarking Messages

[Update: For the latest version of this case study, go here: https://grace-ling.com/discord-case-study-bookmarking-messages/]

This was the first case study I’ve ever done, and I have a lot of improvements since then.

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.

However, 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.

People don’t want to miss any information on Discord, but they have a hard time keeping up with messages.

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 — everything is linear.
  2. It’s difficult to recap major events on Discord when the user has not logged on fora few days.
  3. Most users use Discord to also communicate with friends outside of games.

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 bookmarking feature.

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 find the most important information first.

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 Crystal Torres and Jane Choi for my brainstorming session to determine whether to improve upon an existing feature of Discord or to add a completely new feature — bookmarks.

Brainstorming session

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

  1. Develop a bot to determine the priorities of messages to be sorted
  2. Allow users to bookmark and categorize messages and create a seperate feature on Discord that allows users to find the messages they have bookmarked — I ended up going with this one.

Designing Bookmarks on 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.

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.

Low fidelity design brainstorm

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

Medium fidelity for adding bookmarks

I added the function to bookmark within Discord’s existing action menu to decrease cognitive load for the user. I also added the ellipses to each individual messages so users can tell that they are actionable items.

Medium fidelity for accessing bookmarks

I designed two ways to display bookmarks — 2.0 is inspired by the channel feature and 2.1 is a horizontal scroll spin-off from the existing vertical scrolling feature for server and channel navigation.

Bookmark button placement explorations
Medium fidelity for deleting bookmarks

I designed two ways to delete messages — 3.0 being deleting within the chat and 3.1 and 3.2 deleting through the bookmarks feature.

Visual Design Explorations

Discord UI Kit

To help me with my high fidelity prototype, I made a UI kit and did a spacing study.

High Fidelity Demo

https://youtu.be/wNBHuG8Olas

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.

Designer @ Electronic Arts, Illustrator, Design Community Leader | Art IG: @Candyleaf_ | Portfolio: grace-ling.com