PROJECT

Discord Bookmarks

Feature Design | October – December 2019

PROJECT

How might we make it easier to keep track of messages?

Skills

Product Design

User Research

Tools

Figma

Team

Me (solo project)

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.

Final Prototype

Research

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.

Market Research

I looked into other team communication platforms. Based on user research, Discord users often uses these other applications.

Understanding common ways other messaging platforms enable users to keep track of messages gave me an understanding of common feature patterns.

Takeaways:

After looking at other common messaging apps, I realized Discord was missing:

  • Starring and saving content
  • Threads
  • Recaps (summary of updates)

Starring and saving content was a large topic that come up during my user research interviews. I focused my feature design on that.

Problem

I combined the data from my user and market research to identified a problem to focus on: 

It's hard to keep up with messages on Discord.

Ideation

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

Summary

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.

Solution

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.

Low Fidelity Explorations

I started my design with a low fidelity sketch. I took inspiration from the existing Discord user interface and then adding some of my own ideas to have an interface users are familiar with.

Medium Fidelity Flow Explorations

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

1. Adding bookmarks

2. Accessing bookmarks

3. Deleting bookmarks.

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.

Both explorations include all touch points - removing a bookmark via the bookmarks window and via the live chat to enable user control. This also makes it faster for the user if they mistakenly bookmarked the wrong message directly in the chat.

Testing & Iterations

Next, I also explored the design of specific screens and conducted usability testing to decide which version to move forward with.

Usability Testing

7 users went through the prototype's different versions to run through the tasks:

1. Add and remove bookmark from live chat message

2. Find and remove bookmark in bookmark page

I moved forward with version of the screen that led to a higher task completion rate.

High Fidelity Prototype

Interact with the prototype here.

Metrics

In the future, further testing should be conducted to collect more quantitative and qualitative metrics. Post-launch metrics could also be analyzed to measure business outcomes.

Edge Cases

I thought of some edge cases that could be further explored beyond the scope of this project.

Takeaways

Summary

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.

Challenges

There was no UI kit available, so I recreated it. This was also my first time using Figma, and being able to utilize components effectively was a learning curve. Through trial and error, I managed to understand components and how to use them.

Lessons Learned

  • User testing is critical at every design update to ensure the design still aligns with user experience and business goals. User testing also brings up more touch points and use cases to consider.
  • Focus more on the process and storytelling, avoid too much text about details. This is my original case study.