Overview

Team

Me (Solo Project)

Tools

Figma
Adobe Photoshop

Skills

User Research
Product Design

Duration

3 Weeks

Background

Discord is a messaging/social networking app with over 100 million monthly active users as of June 2020. Discord's community driven focus is to provide users with a platform to which these users can communicate among each other within topic-based channels. Within personalized servers users can share custom emotes, organize events, and build personal connections.

Problem

Finding friends through the friends list can become difficult to navigate after amassing a large following.

Solution

An accessible feature that aims to help users create and manage their friends list into customizable groups.

User Research

When communication among users form friendships, leads users away from communicating on the community server to direct messaging. As I brainstormed ideas, I took notice of a common pattern of pain points with the friend’s page. It brought me to attention that making communication with many users can lead to a large friend’s list, which could pile up into a complex mess of users to navigate across.

The Current Issue

After establishing the data leads my reasoning toward:
Discord’s current Direct messaging & Friend’s page feature becomes cluttered after a considerable amount of added users it becomes overbearing on the user to find a friend they are looking to message, call, or play with.

From here, I focused on creating a feature that would help Discord users with this matter. These conversations led me to the following opportunities:

How might we...

Advocate awareness for new and returning users
Encourage engagement of users in various accessible means
Evade complex navigation and streamline the process for users

Summary

Currently, Discord allows users to create their own servers and groups chat, which they can customize. However, these features are not complete solutions to organizing their friend’s list and experience using Discord.
I had set my proposed idea for a personalized group feature.

Information Architecture

Using site mapping displays how users are currently interacting with Discord’s established friends lists. This map integrates the tool of being able to organize your friend’s lists in the user flow by allowing users to create new group categories. Allowing users to add friends into a new group or place them in an already created group. This user flow doesn’t obstruct on the current design system of Discord for ease of use.

Exploring Solutions

I began experimenting designs of a Friend Groups feature for users with ever-growing friends list from their experience in various servers they take part in and be able to organize those friends to which they interact with them (i.e. games, entertainment, etc).

In the development, I would structure the group functionality into the current framework of the Discord app without making major changes so it could be accessible to users. I initially designed this by creating the friends group feature within the direct messages section of the app. Then I moved into developing its display in the friends tab of the app, since that is the main friend’s page.

Prototype

For the prototype, One focus that I had set out was designing within Discord’s design system and using it within the groups feature. This focus was both a measure of understanding how the layout and implementation would occur on mobile and desktop. When designing for the desktop, some aspects where changed from a separate page to create a new group to an overlay. I made this change to match Discord’s system of creating a new server and inviting people so it streamlines with the user flow.

Testing & Evaluating

Once identifying my target audience of Discord users, I user tested my prototype with 5 Discord users ranging in their use. I interviewed these users for about 45 minutes via Discord’s voice call in which they screen shared their interaction with the prototype.
They were free to explore the prototype to which they then give their thoughts on how this feature will work.

When exploring designs for different sections of the groups feature and testing them with Discord, users allowed me to understand more about what design remains consistent within the design system and what I can change. The project’s focus views how the user will interact with their friends on the Friends page itself where the Groups Feature flows with design system.

For the Friends Page, I initially place the Groups Feature on the side of the Friends Page so that it can hide by sliding to the left, similar to how servers are present. As I tested that design, it lead to increase cognitive load on the user who mistaken it for the server list. I revised the design by my placing the “Your Groups” feature at the top of the Friends page so it will be the first thing people to see if they want to view what friends are online within those groups. When creating a new group, users have the option of which users from their friend lists can place or remove friends into a group.

After the interview, some notes that I would remark on the current Discord design system and prototype for my revision were:
1. Some had expressed that their friends list is very much cluttered.
2. They expressed that this tool will help them organize who they interact with.
3. This option allows them to find friends for a specific game or who they interact on a frequent basis.

Final Design Concept

Takeaways

Summary

Communicating with friends through in-game chat is often inconvenient. Discord offers a simple and convenient way for communication. Frequently it is becoming more difficult to keep track of friends’ messages as channels continually move quickly and friend’s list piles up. I designed a new group feature to enable organizing friend’s lists to be more efficient.  

Challenges

This was my first solo UX project, having to make all my decisions throughout the design process on my own was something I had to learn. Working with teams is great for getting multiple perspectives and was something I had to compensate through usability testing feedback and evaluating that information to make the revisions needed. Another challenge was recreating Discord’s user interface in Figma from scratch, both on the mobile and desktop version learning is design system from screen shots.

View More

Hero Image to visit the Twitch Events case study.Hero Image to visit the Fitnection case study.
Let's Chat.
© Richard Urbina