Project Overview
TOOLS: Figma, Adobe Illustrator, Google Sheets
TIME: 3 weeks
TEAM: 4
TASK:
Conduct and analyze interviews in order to find errors that users may make while using the Discord mobile app. Iterate a potential redesign.
With the growing prevalence of online communication, there have been many apps created to allow for ease of connection with others, but none have become as popular as Discord. With almost 200 million active users monthly, Discord has become a top app, employed by a variety of groups for different purposes including gaming, school, and socializing. We decided to look at the Discord mobile app specifically for the purposes of this project. What are some of the features that set it apart from other messaging apps? Can users easily afford these features? Do those features create any trade-offs? We compared the features of Discord to similar mobile versions of messaging platforms (Slack, Amino, iMessages, and Messenger) in order to gain a better understanding of a user’s experience using the app and how we would approach a redesign.
Introduction
Methodology
Each team member conducted three interviews on willing participants. During the interviews, we made sure that the participants were educated in the process, discussing how the interview process would go and also making sure that interviewees would be comfortable sharing their screens. We also utilized the master-apprentice model in which we let the interviewees lead the conversation about their experiences with Discord. This allowed us to create a more welcoming environment as well as letting us gather more information about the participants’ backgrounds and experiences. On average, our interviews lasted around 5 minutes, depending on how familiar the users were with Discord.
We recorded all of the data collected during interviews onto a Google Sheet to make it more visual and organized. This method of logging allowed us to also find trends and patterns more easily in conjecture with dividing our questions into pre, during, and post-task questions.
Distribution of Task Success and Failure
Number of Interviewees
List of people in server
Add friends
Message individually
Message in group chat
Search (e.g. photo)
Reply to message
Join a call
Screenshare
Create a server
Change status
Task
Succeeded
Failed
0
2
4
6
8
10
12
We collected our interview data in this spreadsheet here. On the left-hand column, our
pre-task, task, and post-task questions are listed while the right-hand columns contain our
interviewee’s responses. A glimpse at task performance during the interviews is depicted below.
Data Collection
Error Analysis
Upon analyzing our interviews and observations, we identified five common errors that users made while interacting with the application. We categorized each error as either a slip or mistake.
The first error we identified was an action-based slip. The Design of Everyday Things describes a slip as a user having the correct goal in mind but with a flawed execution (pg. 190). An action-based slip specifically is when the user performs the wrong action.
5/12 users interviewed had struggles with locating the option to create a server. User #11 did not initially know where to go in order to complete this operation. He clicked through the various bottom tabs, as well as looking at the top of their server list, before scrolling to the bottom of the server list to find the plus icon that creates a server. This is an action-based slip as he had the goal of creating the server in mind, but performed incorrect actions in order to complete his goal.
Error #1: Finding the “Create Server” Option
Another action-based slip that 4/12 users interviewed made was when they were tasked with joining a call and sharing their screen. Before locating the correct option, User #9 first clicked the “activity” button. This error and error #1 are due to the designers’ conceptual model that includes a less cluttered interface, which inadvertently causes the user to struggle with finding the specific feature in mind.
Error #2: Screensharing
Another slip we noticed was when we asked users to change their online status (online, idle, do not disturb, or invisible). 2/12 users interviewed had difficulty with this, by first locating the custom status option rather than the online status. During the task, User #1 initially thought that the “add status” button was correct but then realized that she instead needed to click her icon to view the online status menu. This is a description-similarity slip, where the user acted upon the interface that is similar to the target. Because these two different options are both labeled as “status,” it confuses users who are trying to change their online status as they will initially see a status option upon opening their profile. In order for the user to change their online status specifically, there is no clear signifier, and the user’s icon fails to communicate that it can afford being pressed.
Error #3: Status Change
The final error we observed was when users were tasked with finding the list of members in the group space. 4/12 users interviewed found difficulty when completing this task. User #10 explained how on the desktop, there’s the voice and text channels on the left and a member list on the right. He expressed that he believed that the mobile app is not intuitive due to him being able to swipe right to open the voice and text channels, but can’t do the same for the member list. This error is also classified as a rule-based mistake, as users felt they were approaching the situation correctly, but the wrong action took place. This happens because the interface fails to utilize natural mapping. Certain users associate the member list being on the right, so they attempt to swipe in accordance. Instead, the user must open the member list by clicking the channel name, in which the only signifier is a small arrow next to the channel name, but is overlooked due to the user’s knowledge in the head. Due to these issues, the user fails to bridge the gulf of execution.
Error #5: Finding the Member List of a Server
Due to the vast amount of messaging platforms that exist, users may face rule-based mistakes when alternating between them. A rule-based mistake is when the user has appropriately diagnosed the situation, but then decided upon the wrong course of action, as defined in The Design of Everyday Things (pg. 199). With our task that asks users to reply to a specific message in a chat, 3/12 users interviewed made errors. Users #8, #10, and #11 each made the same error of swiping in the wrong direction. Many other messaging applications universally have the user swipe right in order to reply to a message. Discord, on the other hand, has users either swipe to the left or hold down on the message and select the reply option. The user’s knowledge in the head and their experience using similar applications caused them to properly execute actions, but those actions executed the wrong plan.
Error #4: Replying to a Specific Message
Tradeoffs
6/12 of our interviewees stated that they use Discord everyday of the week with time spent on discord ranging from 30 minutes to a couple of hours. Every interviewee stated that they either use Discord for school or communicating with friends. This helps us form the user’s mental model and identify the tradeoffs that contribute to these errors which we can then compare to the designer’s conceptual model.
The designer wanted to create a messaging platform that had group spaces that could contain a large capacity of people as well as a multitude of features. However, in order to have this multitude of features, the ease in creation of certain features was compromised. Users face difficulty with finding certain features, affecting the overall user experience. The user’s mental model consists of an easy-to-use, messaging platform that they can use everyday for their needs. Due to the lack of feature visibility, users are unable to utilize all of the features that Discord offers. These features, such as screensharing, could be especially useful for students who would want to collaborate with classmates on school work, but may fail to be used due to the low ease of use.
Because of the large capacity of people within a server, Discord sacrifices the discoverability of finding this list of people. As stated in error #5, there is no clear signifier to find this member list so users resort to swiping.
0
2
4
6
8
Distribution of Discord’s Most Used Features Among Interviewees
Servers
Groupchats
Direct Messages
Voice calls
Screenshare
Number of Interviewees
Competitive Analysis
5
5
1
1
Ease in Creation
Multitude of Features
IDEAL
5, 5
Discord
1, 4
Amino
2, 4
IMessage
3, 1
Slack
4, 3
Messenger
4, 2
Ease in Creation
1 = difficult to create messaging spaces
5 = easy to create messaging spaces
App
Discord
1
5
4
3
2
4
3
1
4
2
5
5
Slack
Amino
IMessages
Messenger
Ideal Design
Multitude of Features
1 = little to no features
5 = many features
Design Space of Ease in Creation vs. Multitude of Features
For our x-axis, we have ease of creation. This measures how easy it is to create a space to communicate with others. For Discord, our interviews reflect a scoring of one in this category. Overall, 5/12 users interviewed had difficulty creating a server (a bigger group chat space with more features), and 5/12 users interviewed had difficulties creating a regular group chat. The button to create a server is buried at the bottom of the server list, so it’s hard to even find a signifier that says you can create a server. The y-axis, measuring the multitude of features, presents how many features (or intended affordances) the app has. Discord contains many features that other apps lack– voice channels, bots, and different texting channels.
Finally, an ideal design, which our redesign tries to mirror, would make creating group chats or group spaces as easy as possible, and would include a vast array of features that combine the benefits of the other messaging apps combined.
Moving onto competitors, we have Slack. Compared to a server, Slack offers workspaces. The UI allows users to easily find the button to create a workspace, since it is in a tab with the other workspaces, but is visible and not buried under anything else. Slack contains many features, like message drafting and scheduling, but not as many as Discord (e.g. shared gaming in group spaces).
Next, Amino. Amino’s UI has many glaring colors and images on the tab designated for group space formation. With many signifiers in one place, it makes it overwhelming for the user, decreasing their ability to find where to create a server. Although it is more intuitive to create a community (Amino’s version of a server or workspace) than to create a Discord server, since the button isn’t as buried. Furthermore, Amino offers lots of chat features and customization, putting it at the same level as Discord.
As for iMessages, creating a group chat is very simple. The button to press is small and easy to forget, in addition you need to either know someone’s phone number or already have them in your contacts, making this just middle of the road on the x-axis. Yet, iMessages has little to no features compared to the rest of the apps. For example, there is no way to create sub-channels within a group chat to help organize messaging.
Alongside iMessages, we have Messenger. Just like Slack, the ability to create group chats is very easy and intuitive to find on Messenger. Similar to iMessages, Messenger lacks the ability to generate channels within a group space, limiting the multitude of features, thus also hindering the user’s experience.
Discoverability of People
1 = difficult to find others
5 = easy to find others
App
Discord
2
5
2
5
1
5
4
1
4
3
5
5
Slack
Amino
IMessages
Messenger
Ideal Design
User Capacity
1 = small maximum number of people in a group
5 = large maximum number of people in a group
Design Space of Discoverability of People vs. User Capacity
5
5
1
1
Ease in Creation
Multitude of Features
IDEAL
5, 5
Discord
2, 5
Amino
1, 5
IMessage
4, 1
Slack
2, 5
Messenger
4, 3
Our x-axis holds the discoverability of people, which measures how easy it is to find others you would want to contact and interact with. With Discord, 6/15 user interviewees had difficulty (or mentioned difficulty) when trying to find people on the list on a server. In other words, this measures if the signifiers are effective -– ease in allowing someone to find someone else. We believe that Discord greatly hinders the discoverability of people in the app since you have no way of seeing users in a server unless you click on a tiny arrow at the top of your channel workspace. This led us to the rating of a 2. Meanwhile, our y-axis holds user capacity— how many people a group space (ie. servers, workspaces, etc.) or group chat can house. Ultimately, we aimed to find when focusing on this one affordance, does having a design capable of holding more people lead to greater complexity in discoverability of people? Discord can have a max of 500,000 people on a server, which is much larger than most people need. Therefore, we determined a rating of a 5.
Moving onto our competitors, Slack is similar to Discord in terms of discoverability. Users must intuitively know to click on the channel title to see members. As for user capacity, Slack has no limit. Combined this puts Slack at a 2 for discoverability and 5 for user capacity. Amino had no clear way of finding people in their community spaces, which is why we ranked it lower than Discord at a 1 for discoverability. Likewise, Slack has unlimited members in a community, putting it at a 5 for user capacity. By far, iMessages has the most intuitive set-up for finding the list of people in a group chat by clicking on the user profiles in the group chat name. However, this may be confusing without profile pictures or other identifying information as saved contact information. Additionally, iMessages group chats can only have a max of 32. The caveat is iMessages maxes out at 10 if one user in the group is not using an iOS device. This becomes a limiting factor, which is why iMessages is rated a 1 for user capacity and 4 for discoverability. Like iMessages, Messenger allows users to view existing users in a group chat by clicking on the user icons in the chat name. iMessenger group chats max out at 250 people. Although, most of the time people wouldn’t need over 250 members, there are certain groups and communities that are larger and would need bigger group chats, putting iMessenger at a 3 for user capacity and 4 for discoverability.
Now, an ideal design would have a 5 in discovering other people and a 5 in user capacity since finding others easier makes the product a lot more intuitive and preferable; the same goes for user capacity.
In hopes of alleviating such concerns, we decided to redesign the server sidebar feature of Discord. Servers are no longer a sidebar, but rather its own page. With this change, users will no longer will have to scroll and tap between buttons excessively. Users are clearly able to see their servers in one place. Similarly to before, servers can be reordered or put into folders as the user likes. A search bar was added to the top, alongside the user’s profile icon in order to differentiate it from the other tab options.
Redesign
As highlighted in the Error Analysis section, one of the most prominent errors users made was creating a server. The interviewees that struggled to create a server clicked throughout the designated buttons before eventually finding the add server button by scrolling to the very end bottom of the server sidebar. Many users discussed concerns in their response to question 21 -– “Is there anything you would like to change about the app?” User #3 portrayed how the server sidebar is “too cluttered” while User #11 described how the feature in the server sidebar could be “more clear.”
Default (dark) mode
Light mode
Midnight mode
This is Discord’s current design
The “add server” button that could easily be buried if the user has a long list of servers
These search buttons all hold the same function but change appearance and location when transitioning through each page
The user has little indication on how to view the list of members
Once a user selects a server, it will bring them to this page, which is similar to the original design, but with the sidebar eliminated.
The grayed-out section to the right signifies to the user to swipe left in order to view it
The page is now less cluttered due to the list of servers no longer being on the left
Back arrow that returns to the main server page
New “members” icon to signify the user to swipe left or tap the icon in order to view the list of members
Once the user has swiped, the bottom tab bar will transition out in order to access the message bar
Swiping left will no longer reply to a specific message
The grayed-out section to the left signifies to the user to swipe right in order to return to the previous page
The search button is now a static option that remains at the top of the screen
We also added a separate friends tab. For Discord’s current design, users must navigate to the messages tab in order to add friends. Although none of our interviewees failed to do so, we found it could be made more intuitive. We also noticed that there was no clear way to view your friend’s list. This option is oddly located on the user’s profile page.
Mirroring the desktop app, the list is put in alphabetical order and filters are placed above to help users refine what they are searching for.
Redesign Tradeoffs
Our redesign aims to strengthen the ease in creation when it comes to server creation. Our changes provide greater discoverability, thus greater ease. However, strengthening the ease in creation does compromise seeing multiple components of the app at once. Traditionally on Discord, you can see the server list, the respective channels in a server, and the bottom tabs at the same time. However, with the implementation of the new server page, the visibility of the various features does decrease. Users will no longer be able to swipe right and left to close and open various components on the main screen.
Thank you!
