Feature Design | October – December 2019
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.
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.
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.
After looking at other common messaging apps, I realized Discord was missing:
Starring and saving content was a large topic that come up during my user research interviews. I focused my feature design on that.
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.
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.
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.
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.
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.
Next, I also explored the design of specific screens and conducted usability testing to decide which version to move forward with.
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.
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.
I thought of some edge cases that could be further explored beyond the scope of this project.
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.
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.
