Discord — Dong Hye Kim

Introduction

More streamlined redesign of Discord app making it more accessible and easy-to-understand for existing and new users.

With the introduction of more people working or taking classes from home, more people are joining the Discord platform to communicate with their team members.

My Role: Design Lead

People Involved: Dong Hye Kim

Timeframe: 3 Weeks

Skills:
Product Development
Front End Development
Target Customer Research
Design
CMF
Prototyping

Tools:
Adobe Photoshop (Image editing)
Adobe Illustrator (Layout)
Adobe After Effects (Editing)
Adobe XD (Development)

Problem

Discord has a unique structure using channels within servers to organize different chat rooms within groups. As a new user joining the platform, it was hard to adjust to this unique format as the app has lack of hierarchy within different pages/stacks. After using the app for abuot a month, I also realized that there was a separate direct messaging section, which uses the same organization area along with other servers. The way servers are listed out on the side panel also hides the actual names, requiring me to click on each and individual server in order to see their full names.

Servers > Channels > Chats

Goal

Redesign the main section of the app to emphasize three levels of hierarchy and structure. Adjust the placement of certain pages such as direct messages to make the overal usage more streamlined and organized.

User Research

Hierarchy System

Based on a public survey, 72.2% of new Discord users found it difficult to adjust to the app’s unique organization format with the three hierarchy level consisting of servers, channels, and individual chats.

Discovery Section

77.8% of existing Discord users reported to have never used the discovery section of Discord and additional 11.1% of users rarely used the function. In addition, less than 10% of the users used the app to find new games. Although this functionality isn’t used by most users, it shares the same importance with other functions. For example, direct messaging section is hidden within the main page while the discover page is placed on the bottom navigation bar.

Search Bar

88.9% of users disliked the placement of the search menu. Currently, the search menu is located on the bottom navigation bar and takes up an entire page. It searches the entire app, rather than allowing targeted search within certain pages. Search bars placed within certain pages share the same function, making it harder to make target search.

New Design

Sketches

Wireframe

Solution

Within the three week timeframe I was able to complete the design and develop a prototype using Adobe XD.