Discord Redesign:
Reimagining the New User Experience
Introduction
Discord is emerging as a popular platform in the educational sphere where students are able to receive announcements, ask questions, and receive help from peers as well as the social scene where users can create servers and message their friends from the computer/phone. Although the database of users largely consists of gamers and a niche community, more and more people are starting to use and navigate the platform. To the new user, Discord can be overwhelming and hard to use.
My Role
I independently carried out a case study on the social platform Discord and researched common pain points, carried out user-specific interviews, analyzed results, and crafted insights.
In the design stage, I brainstormed solutions, expanded on different user flows, explored component designs, and eventually implemented a new user-based checklist feature for people who use Discord for the first time.
Duration
8 weeks
Tools Used
Figma, FigJam, Slack, Notion, Procreate
Process
I followed the Double Diamond design process model which involved the main four stages: discover, define, develop, and deliver. Oftentimes, I end up going back to certain stages because the design process is very iterative.
.png)
British Design Council
Discover
Defining the People Problem
A common problem was first identified and defined. What is a problem scenario that specifically new users have dealt with when utilizing Discord?
When I am calling or texting my friends, I want to have a fun time, so I can build further connections with them.
But I can’t do that well because:
-
It is hard to figure out if added friends are online
-
New users get confused about how to navigate and join other users on the app
-
Often there are too many friend groups and messages to sift through
Main Focus
New Discord users deal with difficulties navigating the app and being aware of all the features that are actually available to them.
I set out to find a solution that would be able to solve multiple problems within the onboarding process.
Parts of the current new user flow
The current flow provides a lot of valuable information but could easily be glossed over and isn’t directly encouraging users to learn to navigate and use the app.
Define
User Research
3 detailed interviews were conducted to learn more about Discord and its different users. I did an affinity diagramming activity and came up with 4 key insights.
Key interview findings sorted into categories
Key Insights
1. There's a learning curve and it's overwhelming
“10 million different channels within a server, how does this even work”
2. Users have an easier time coordinating outside the platform
“I tend to text my friends and use messaging when I want to plan or coordinate with them”
3. Users will ignore certain notifications and find other ways to navigate mentions
4. Users prefer Discord while specifically playing games
“Use it mostly to play games”
Develop
Brainstorming Activity
I teamed up with two fellow Cornell students, Ashley Herrera and Tiffany Guo to come up with solutions to certain problems we found on Discord. We had allotted time to come up with as many solutions as possible by first writing out How Might We's (A) to reaveal opportunity areas (B). Then with the solution spaces, we brainstormed many diverse solutions (C).
A. How Might We's in FigJam
B. HMW's grouped and organized into opportunity areas
C. Final solution spaces with brainstormed solutions
Six solutions after narrowing the brainstorming:
Create a checklist for exploring parts of the app
Create a simple, easy to read infographic to detail the uses of Discord
Have clear instructions on the differences between servers, chats, and other features
Have pop-ups with suggestions if the user is having trouble
Have a hidden feature to de-clutter one’s friend list or servers
Change the way the statuses are presented to be more active and updated
Feasibility and SWOT Analysis
I conducted a SWOT analysis on each individual possible solution to assess feasibility and determine how to move forward.
SWOT analysis done in Notion
Three solutions I decided to move forwards with were:
-
An introduction checklist
-
A hide server and groups feature
-
More types of statuses for Discord
After creating low-fidelity drawn prototypes, I decided on 1. the introduction checklist.
Feature low-fidelity prototypes in Procreate
The Checklist Feature
This feature tackled the three main pain points in the People problem because my feature is going to be targeted towards new users who have trouble navigating the current interface and understanding different features. It will make it easier for new users (2) and help people understand the mentions page to figure out who was directly messaging them as well as statuses (1,3).
Information architecture for the checklist feature
The feature/user flow is meant for new users who have just downloaded Discord. It shows up on the first page and connects with the home page. Because my feature is particularly integrated with the entire app, the checklist step shows up on every page and is completed as the user goes through it. After completion, the badge of completion will show on the profile page which is shown in the diagram.
Medium-fidelity Prototypes
The next step was exploring the user flow for the checklist feature. It was important to decide on the best entry, middle, and endpoint. I explored five different flows and chose three of the best to combine and continue with.
Medium-fidelity user flow exploration
Reasoning
Entry Point
I chose the entry point as being on the main page of the welcome/onboarding page because I felt like it is important to the new user who is trying to set up an account for the first time. It catches their attention and gives them the option to learn more about the features right away.
Middle
The middle steps go through each screen and ask the user to try out different features. They are put in a specific order based on the order of the pages in the navigation bar but also make sense when using the app. You would create a server and then create a channel after and not the other way around because it is not possible.
There is a congratulations page and message which validates the user. The badge is shown also gives them a reward for completing the task. It makes it more fun and invites more people to actually use this checklist feature.
End
My focus was on combining the most effective features from each iteration and combining them to create the best feature.
Visual Design
Before moving onto high-fidelity prototypes, I explored Discord’s current branding, usage of color, fonts, spacing, etc to accurately replicate the style and create a feature that would integrate well with the current UI design.
In order to completely add the checklist feature, I added my own checklist component, checklist badge, and utilized the bold purple color that represents Discord’s identity
Discord UI study and design system
Design Inspiration
Before designing the feature and creating the component, I did the research for design inspiration and to see what was already working.
Checklist design examples
Checklist Component
For my checklist design, I kept it sleek and simple, with the intent of having it feel like part of the screen rather than an extra add on or its own section.
Three different orientations/styles of the checklist component
High-fidelity Prototypes and User Flows
I created three high-fidelity user flows, each starting with a different entry point to access the checklist feature. Each has different iterations of the actual checklist component.
Incorporating user flows with hi-fi prototypes
Deliver
Usability Testing and Final Prototyping
From asking students to test out the final prototype for feedback, four main insights were gathered.
Final prototypes done in Figma
Usability Test Key Insights
1. Users can benefit from having an entry from inside the app as well as when you sign up
2. Users were fond of the changing checkmarks and visual reminders
3. Users think arrows are straightforward and helpful
4. Users would benefit from having the checklist icon obvious and separate from other things
Key Changes Made
-
I made the entry point from the settings for new users as well as existing users
-
There is still an introduction page about the checklist list and a back option
-
I kept the minimizing checklist option so that it wouldn’t cover the navigation bar or the server icons on the side
-
But, I kept the simplified checklist visual. Users can check their progress and it is horizontal at the top so it doesn’t block other parts of the app
-
When on new areas or screens the playlist will appear and users will have to slide up to minimize it
-
Allows for directions and constant reminders
Final Flow and Demo
Takeaways and What's Next?
Through this case study, I properly conducted user research and went through the full Double Diamond design process. It was my first experience doing a full UX Design case study and was a great foundation for falling in love with the practice and learning the basics. To improve upon the project, I would spend more time on different user flows and explorations, possibly seeing the other possibilities of a "checklist feature." It's important not to choose an idea quickly and never branch out to see all diverse solutions. I would have to account for people who want to skip taking time to do a checklist as well. Overall, the new feature allows for Discord to be used and familiarized by more people. Seeing how unique and flexible the platform can be, it’s important to welcome new users and make sure their experience goes as smoothly as possible.
Back to top