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. 

Untitled design (6).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:

  1. It is hard to figure out if added friends are online

  2. New users get confused about how to navigate and join other users on the app

  3. 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.

Frame 2.png

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.

Screen Shot 2022-03-09 at 11.33.19 PM.png

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”

wumpus-discord.gif

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).

Screen Shot 2022-11-01 at 11.38.53 AM.png

A. How Might We's in FigJam

Screen Shot 2022-11-01 at 11.36.43 AM.png

B. HMW's grouped and organized into opportunity areas

Screen Shot 2022-11-01 at 11.39.54 AM.png

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.

Screen Shot 2022-11-01 at 1.46.44 PM.png

SWOT analysis done in Notion

Three solutions I decided to move forwards with were:

  1. An introduction checklist

  2. A hide server and groups feature

  3. More types of statuses for Discord

After creating low-fidelity drawn prototypes, I decided on 1. the introduction checklist.

Untitled_Artwork 55.png

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).

Screen Shot 2022-03-28 at 11.44.11 PM.png

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.

Frame 7.png

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

fulldiscorduikit.png
fulldiscorduikit.png

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.

visualdesigninspiration.png

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.

Screen Shot 2022-11-02 at 12.18.03 AM.png

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.

Read the Medium article here!

Check out my other work as well here.

Back to top