Client:
Discord
Role:
UX/UI Designer, Researcher, Visual Designer
Project Type:
Add a Feature
UX/UI Design, Research, Branding, Prototyping
Tools Used:
Figma, Maze
Year
2022
View Prototype
*This is a fictional project done as part of Designlabs UX Academy - and is not officially associated with Discord.
*This was done on the July 2022 version of Discord before their newer updates
ASTRA Mockup Laptop & Mobile
*This is a fictional project, consisting of fictional destinations.
*The following Background and Goal sections appear in the crawl in the video above.

OVERVIEW

Client: ASTRA
Project type: UX/UI Design, Research, Branding
Role: UX/UI designer, Visual Designer
Timeline: 12 weeks
Tools Used: Figma, OptimalSort, Maze
Background

MIC CHECK

Discord is a VoIP and instant messaging communication application that was developed by Jason Citron and Stan Vishnevskiy and launched in 2015. They wanted to create a platform for individuals to communicate while playing video games and recreate the sense of togetherness that usually comes with it. Since its inception, Discord has become a hub not only for gamers, but for various clubs, groups, communities, and businesses all utilizing it as a communication platform.

Current metrics as reported on Discord official website:

The Problem

$u$$user WANTS TO ADD YOU

Safety and security.
Navigating the online world has always been a little tricky, and not knowing who you're interacting with can be stressful. Just as Discord can be a great way to meet friends and interact with like-minded individuals, it is unfortunately not immune to the more unsavory behaviors of the online world. Discord has faced problems with cyberbullying and cases where their terms of service have been violated by the creation of hostile servers, unacceptable behaviors, harassment, and raiding/flooding servers by spammers and/or bots to name a few. Read Discords Transparency Report from January 2022 for a more detailed report.

The problems with personalization's and the paywall.
After browsing the Discord subreddit extensively, I found that many users find the current profile customizability unimpressive and that many features, that they believe should be accessible to all, are locked behind a paywall. In June 2021, Discord added the "About Me" section to profiles and it was received well by most, but it didn't offer enough to users who wanted to be able to properly convey their personality through their profile.
Project Goal

THE NEXT LVL

The idea for LVL-UP was to give users more customization and personalization power over their profiles whilst also incorporating gamification in the form of leveling profiles to drive engagement with, and increase motivation to utilize Discord. By offering enticing rewards as level unlocks, such as limited Nitro access for free users, new forms of profile customization, and a host of others I hoped to offer users additional incentives. Leveling profiles would also aid in improving security within Discord to protect users by weeding out bots and spammers and giving servers the ability to have a level requirement entry.
Design Process

AND, HERE. WE. GO

RESEARCH

DEFINE

IDEATE

PROTOTYPE

TESTING

1
2
3
4
5
Research Goal
Competitive Analysis
User Interviews & Survey
User Persona
Empathy Map
User Journey Map
Site Map
Task Flow
Wireframes
Visual Design
High Fidelity Wireframes & Prototype
‍
Usability Testing
Affinity Map

RESEARCH

Research Goal

THE GAME PLAN

My goal for research was to get an idea of the problem I wanted to solve with LVL-UP, and I had already conducted a good amount of research by extensively browsing through the Discord subreddit to get a better understanding of users and their views regarding issues that were mostly relevant to the LVL-UP concept. Analyzing the discord within Discord as it were. Next, I needed to focus on the principles of gamification and finding ways to seamlessly incorporate my profile changes within Discord's current UI.
Competitive Analysis

THE PLAYING FIELD

To gain more insight, I conducted a competitive analysis where I researched applications and services that are similar to Discord. By researching these competitors and assessing them all side to side I was able to identify their strengths and weaknesses which I then utilized in my design process for LVL-UP.
User Interviews & Survey

NPC FEEDBACK

I already had an interesting foundation from my time on the Discord subreddit, and up to this point, it had been a lot of reading, assumptions, and idea generation. However, I needed more specific data and to see whether user's would be enthusiastic about LVL-UP. As such, I conducted one on one user interviews to learn about user's current habits and views regarding Discord in regards to the problem I was attempting to solve, and to also dig a little deeper to learn more about their views on customizability, and their motivating behaviors to see if they would enjoy leveling up their profile to earn certain rewards.
To compliment the user interviews, I also created an online survey and sent it out to 12 participants. Some key findings from that are listed below:
Have been Discord users for more than 2 years
Primarily use it for Socializing
Primarily use it for Gaming
Would like to be able to unlock rewards/features without paying for them
Use Discord on their PC
Use Discord 10+ times within a week
Are between the ages of 25-34 years

DEFINE

Click to enlarge
User Persona

READY PLAYER ONE

Using the information gathered thus far,  I created a user persona, Sharon, to represent the target user for Discord LVL-UP. Findings, especially from the interviews, revealed that the majority of users were drawn to Discord by gaming/friends who play video games, and as such Sharon represents that demographic of users. Although I do note that many users are drawn to Discord and use it for other reasons, the persona generated is meant to highlight the key demographic and potential target user who would be attracted to utilize LVL-UP the most.
Click to enlarge
Empathy Map

CHARACTER STATS

I then created an empathy map consisting of key findings and observations noted from the user interviews in order to consolidate and further understand Sharon's mindset and behavior in regards to her usage of Discord.
Click to enlarge
Click to enlarge
User Journey Map

SHARON POTTER AND
THE USER JOURNEY MAP

Our character has been created, and her characteristics have been noted. Now’s it’s time to start the story. I began with a user journey map to visualize Sharon’s experience, behavior and feelings while using Discord in order to host an event for her video game.
Click to enlarge

IDEATE

Site Map

LAYING THE PATH OUT

I realized the new feature, Discord LVL-UP, was going to affect many different parts of Discord. As such a site map would be essential to show where the new additions and changes would appear in relation to everything else. Creating this helped to create a visual hierarchy of Discord’s navigation and pages and essentially served as a guide for how users could navigate Discord.
Task Flow

A NOBLE QUEST

With the site map laid out and an understanding of Discords hierarchy I proceeded to create task flows. I created 2 flows which helped to visualize the different branches and potential paths that a user could take in order to complete the associated tasks
Wireframes

WORLD OF WIREFRAMES

I started to draw out idea’s of how the new profile layout would look, as well as the redesigned and newer pages within the User Settings section.
Visual Design

DUNGEONS AND DESIGNS

I wanted to create a logo which properly captured the idea of LVL-UP. I wanted my logo to fit in seamlessly within Discord so I began by analyzing their current UI Kit to get a sense of their design style. I then started with a generic default profile avatar. To capture the concept of leveling up ones profile, I wrapped an arrow around a user icon which pointed upwards. I then took inspiration from the Nitro logo and added a downwards drip. The idea here was to make it visually similar to a paint drip, thus implying the similarity of LVL-UP’s new profiles to the act of painting; the creation of a visual art that resonates deeply and personally with it’s creator.

I also created new level emblems that were added to the user's profile.

THE NEW PROFILE

The redone expanded public profile containing the following new additions:
  • Additional sections to the profile; Media, Achievements
  • Location and Pronouns added
  • New animated Avatar Borders
  • New level and level emblem additions
  • New Title/Rank addition
  • Preferred mode and language of communication
  • Achievement trophies highlighting milestones and achievements
  • Media section for Games and Music
UI Kit

LVL-UP TO EQUIP

I utilized Discords components to recreate it within Figma. Utilizing their design style, I went about creating my own assets which were pertinent to LVL-UP.
‍*Credits to Discord for their logo and icons
‍

PROTOTYPE

High Fidelity Wireframe & Prototype

INSERT COIN TO PLAY

I created my high fidelity prototype within Figma taking into account all that I had learned up till now. I recreated Discord as close as possible within Figma and added the LVL-UP changes and additions.
View Prototype
View Prototype
Using Discord LVL-UP

THE FIRST OF US

Creating an interactive prototype of LVL-UP gave me the chance to see how the new changes would integrate within Discord, and of course it would come in useful during usability testing. The 3 visualizations displayed below are the tasks that would be given to users during testing later on.

WHAT IS LVL-UP?

In this visualization you access the LVL-UP section to learn more about this new feature.
  • Onboarding page with video and visualizations highlighting the new additions
  • LVL-List page showing all the levels and which ones you’ve achieved vs which ones you have not.

PROFILE VIEWING

Here you'll see how a user views the new profile layout of one of their friends. This can viewed more closely above in Visual Design.
Editing your profile

BECOME WHO YOU ARE

The following represents the main flow for this project. To break it down:
  • Starting Discord, then having a “What’s New” modal let users know about the new feature/update.
  • Navigating to a server and looking at the user’s public profile.
  • Going to User Settings.
  • Editing profile; checking which profile to edit, adding Personal Information, adding an Avatar Border, checking ‘Change Banner’, then saving changes.
  • Return to profile, clicking level emblem to see next level rewards.
  • Navigating to Privacy and Safety and changing who can view your profile.
  • Returning to the server and clicking on status icon within the avatar to bring up Status Menu.
  • Checking updated public profile.

TESTING

Usability Testing

ALPHA TESTING

To assess my design and concept, I conducted usability testing of my high fidelity prototype with user’s on Maze and in person. The main purpose of the usability tests was to:
  • Assess the usability of the new feature within Discord.
  • Note any difficulties user’s faced for further revision/iteration.
  • See how user’s felt regarding the new profile layouts and features

QUEST LOG

  1. Learn more about 'LVL-UP'
  2. View a friends profile
  3. Edit your profile.

‍

Affinity Map

DEBUGGING

Following the usability test, I compiled the information gathered into an affinity map.  Overall; the user’s were able to locate the LVL-UP page, edit their profile and view a friends profile without difficulty. While user’s provided some feedback regarding the design, they had more questions regarding the concept of the feature and aspects of it that were not included in this prototype.

"Really liked the customizability, set preferences. Privacy features are great"

"Truly a quality-of-life improvement for Discord"

“More organized”, “Less crowded” and “Livelier

"I felt more connected to my profile"

WINS/STRENGTHS
  • New profiles allowed them to get to know a user better, in terms of likes and interests.
  • Liked how the new features seamlessly blended into Discord
  • Enjoyed the additional inputs for pronouns, location, preferred modes of contact
  • Editing profiles was straightforward
WEAKNESSES
  • Confusion regarding the leveling system, and what would confer experience 'xp'
  • Not enough emphasis on the new privacy features
  • Participants thought there could be more color instead of the standard white and gray for the UI
  • Some confusion regarding certain new additions; Title/rank for example.

REFLECTIONS & FUTURE

Taking user feedback into consideration from the usability tests, I began to iterate on my design and note down key changes/updates that would need to be focused on.
  • Added details for the new update to a “What’s New” pop up modal Discord has whenever a new update/feature is added to their platform. This will help bring attention to the new feature to users just opening up Discord.
  • Added more detail regarding the new profile additions in the “What’s LVL-UP” page to address some of the confusion some users had regarding them.
  • Will need to flesh out the sections for updating Avatar borders/Banners; create a gallery/collection for amassed images for the user to choose from. The prototype showed an immediate border chosen due to the time constraints of the project.
The idea for Discord LVL-UP was a bit daunting and I may have gotten over enthusiastic with some ideas. Considering the time constraint on this project I could only focus on one aspect of this proposed feature so I chose the profile revamp. For the future of this project, it would be essential to dive deeper into the mechanics of the leveling system and flesh out the other new sections/pages that were not covered in this first phase as it were.

MORE OF MY WORK

End-to-End Application
GAIA
Responsive Redesign
DUNBAR PIZZA & INDIAN FOOD
Responsive Interstellar Booking
ASTRA
© 2023   ZARAR HAFEEZ
Get in touch!