Discord.
Project at a glance.
Discord is a free voice, video, and text chat app used by tens of millions of people to talk and hang out with their communities and friends.
Challenge.
Design a new feature for the Discord iOS app that meets the needs of the user, as well as the business.
Constraints. Work within existing brand guidelines. The feature must fit within the vision of the company.
Role.
Role. UX Designer, UX Researcher, UX Writer
Timeline. 2-week sprint with a team of three
Tools. Figma, Slack, Notion, Discord, Canva, Pen & Paper
Results.
The problem became, ‘how do we combat the high volume of notifications competing for the users’ attention?
Our solution was to consolidate all the points of attention to one place by creating a central home screen. Letting the user pick and choose what they wanted to see, at a glance, was at the heart of our design process.
The research.
Business needs.
While Discord has positioned itself as playfully purposeful, they are still a business. They need revenue to keep their platform online.
Through product/company research we were able to determine Discord’s two primary business needs:
More engagement from their users makes it easier for them to communicate regularly with the people they care about.
Users to make Discord ‘theirs’ by opting in to purchase Nitro, allowing them to upgrade their emoji, personalize their profile, and stand out on their servers.
User research.
We sought out to understand why and how people use Discord mobile. We also wanted to know what works well and what problems or pain points they encounter when using the app.
To answer these questions, we conducted user interviews and usability tests of the current Discord mobile app with five participants.
This was done remotely on Discord, using a voice channel and the screen-sharing feature. We recorded these interviews and later transcribed them with the help of Otter.ai.
Affinity map.
To further understand the user and process the data collected from our interviews, we created an affinity map.
We discovered the following trends:
Users want to easily check, read, and reply to messages
App alerts are scattered and users want more control over notifications
While using the mobile app, users prefer text over voice
User persona.
Based on our user research, we carefully crafted the user persona of Derek, taking into account his goals, interests, behaviors, pain points, and concerns. By incorporating Derek's perspective throughout our product development process, we were able to effectively address his problem and create a solution that meets his needs.
Journey map.
To effectively illustrate the user flow before the solution, we crafted a compelling journey map. This map vividly demonstrates the direct correlation between increased engagement in social activities and the decline caused by poor navigation within the app interface. Essentially, the app disrupts the direct feedback loop of enjoyment that people experience when receiving messages and attention.
Competitive analysis.
Based on the valuable feedback we've received, we decided to delve into a comprehensive competitive analysis of the Discord app. Our primary goal was to gain deeper insights into our competitors' operations and features, with the aim of enhancing the user experience on Discord. Through this analysis, we aimed to identify and understand our direct competitors.
Here's a summary of what we found:
Teamspeak.
Prior to 2015, Teamspeak stood at the forefront as the top VoIP platform for gaming-centric voice applications, surpassing Mumble and Ventrilo in terms of ease of use and functionality.
Following Discord's rise, Teamspeak refocused on delivering a secure and lightweight voice platform, excelling within this specialized niche.
Slack.
Slack effectively prioritizes user content by utilizing bolding and moving unread DMs and channels to the top of the Home screen. Additionally, users have the option to star important conversations, ensuring they remain easily accessible.
Our analysis revealed that Slack achieves the task of opening a mention in just two interactions, whereas Discord requires four. Furthermore, on Slack, a user can open a mention and send a reply in just four interactions. Our aim in design is to simplify this process on Discord.
Comparative analysis.
We conducted a comparative analysis to draw design inspiration from products that are not direct competitors of Discord, choosing those that are best-in-class in their industry. We used screenshots of these products to incorporate elements into our designs, ensuring that users remain familiar with the mechanics even when encountering new features.
Below is a summary of our top two inspirations:
iOS.
When implementing a new feature, our main objective is to ensure that it is user-friendly and easy to grasp, which encourages a higher adoption rate. Apple's iOS user interface is renowned for its simplicity and intuitive nature.
Upon further analysis of the iOS widget feature, we drew inspiration from its functionality to develop the Discord home page. Specifically, we have incorporated the mechanisms for adding, removing, and reordering widgets into our design.
OnePlus.
We aimed to make the new feature user-friendly for Android users, so we decided to understand how Android home screens and widgets function. We discovered several similarities between the Shelf feature on OnePlus phones and the iOS home screen widgets. The Shelf can be accessed from anywhere while using the phone.
Additionally, some widgets can be interacted with. We appreciated that Shelf enables users to add any app as icons into a "toolbox," even if the app hasn't developed a widget.
The design iterations.
User flow.
Every action and interaction was chosen based on pre-existing norms for either Discord or iOS. We saw no need to reinvent the wheel. Instead, we decided that this simple loop for content customization was familiar enough from mobile widget usage to be immediately recognizable to new users.
Ultimately, we were able to create a flow that felt natural and familiar to the user while dramatically reducing taps.
Capsules represent an action. Rectangles represent the app screen. Diamonds represent choices.
Brand guidelines.
Before we began designing we created a style guide for Discord mobile, which included:
Typography
Colors
Logo variations
Brand values & tone of voice
We felt it was important for Discord’s tone of voice and brand values of being playful, original, relatable, and reliable to shine through in our copy.
Design studio.
In order to come up with our preliminary sketches, we conducted a design studio with the goal of identifying ways to create a space for users to access customized content at a glance.
The result was to design a home page that the user could easily modify.
Sketches to low-fidelity wireframe.
Our next step was to take our sketches to the next level and create a mid-fidelity prototype. Based on user feedback, we realized it was vital to keep the left-side server list untouched. This anchors users and keeps them familiar. For consistency, we also decided to leave the bottom navigation bar intact while using the Discord logo to bring you home, where previously it did nothing.
Usability testing.
Objective.
We wanted to visualize and test our design ideas on live users who were familiar with the Discord platform. We made sure a wide range of users were selected for the most accurate representation.
Tasks.
We had the users perform the same set of actions to establish a baseline:
Acknowledge the new feature screen
Give thoughts on the layout of the home screen
Navigate to the home edit screen
Activate a widget
Drag a widget
Navigate back to home
Select a mention
We asked for expectations before certain actions were performed. Afterward, we asked for thoughts on the process, as well as their impressions of the layout.
Findings.
We found that most of our users recognized the iOS widget behavior right away.
More than half the users flew through the task without a single question or misclick.
Clicking a mention behaved exactly as expected across the board.
We needed to change the drag icon on the feature introduction screen, as well as change the wording on certain cards to maintain consistency.
We found that most users recognized the iOS widget behavior right away.
Low-fidelity wireframe to mid-fidelity prototype.
Second iteration usability testing.
Objective.
We decided to validate our ideas about upgrades and alterations to the initial design to further refine the feature. The same users and an additional two users were interviewed for a fresh perspective.
Tasks
The users performed the same actions as in the previous test, but this time, we included the LIVE Friends preview in the user flow. We asked the users for their opinions on how they thought the mechanics of the Active Now and LIVE Friends cards would work.
Findings.
Users were pleased with our changes, especially the LIVE Friends preview dropdown.
The wording changes we made to the copy provided clarity and familiarity for the users. In addition, we removed the drag icon within the feature introduction to eliminate additional confusion.
The “Active Now” card was still met with some confusion despite being taken from the live Discord app. There was also some feedback about our design and copy for the third-party add-on card that must be addressed.
High-fidelity prototype.
The problem we faced was how to deal with the large number of notifications vying for the users' attention. Our solution was to address this by consolidating all points of attention into one place through the creation of a central home screen. Allowing users to select and view what they wanted at a glance was the focal point of our design process.
Next steps.
Opportunities to further improve the Discord users’ experience:
Developing global notification settings to allow users to have more control over their notifications and tailor them to their preferences.
Offering further customization options for widgets to enable users to personalize their Discord experience and display relevant information more effectively.
Exploring the integration of third-party add-ons to expand the functionality and features available to Discord users, providing a more diverse and customizable experience.