Discord

Product Designer

Discord is an all-in-one voice and text chat for gamers that's free, secure, and works on both your desktop and phone. Stop paying for TeamSpeak servers and hassling with Skype. Simplify your life.

It's time to ditch Skype

My roles and responsibilites included leading design for Discord's developer tools, community outreach, and marketing web properties.

Projects
01
HypeSquad
02
Developer Portal
03
Sell Your Game

HypeSquad

Since the beginning Discord has always had a dedicated and passionate group of superfans, spreading the good word of our chat client across the land. We named this group the "HypeSquad" and made it an official program by creating an application process. Once a user was accepted they got bragging rights and a sweet new profile badge. The program quickly ballooned to 100k users and became a behemoth to manage. It became my job to work with our community team to figure out a scalable solution. After much deliberation, we decided to open the HypeSquad up to everyone and split the group into 3 "houses"; Bravery, Balance, & Brillance. Each house has its own logo, mascot, and lore. Over time we would have the houses competing in challenges and playing games against each other.

HypeSquad Logos
Do you like pineapple on pizza?

After a silly 5 question quiz on how you would react in a few Discord themed hypothetical situations, you were assigned to your HypeSquad house, and your profile proudly adorned a new badge of your house's coat of arms.

Taking the HypeSquad quiz
HypeSquad took off

Within 24 hours the HypeSquad houses had gone viral. Users were printing signs and taking them on roller coasters, 3D printing the logos, and making custom house themed artwork and sharing them on Twitter. After 9 months the program had grown to an astounding 3 million users.

I'm only going to show you Bravery art because I'm loyal to my house

Developer Portal

The portal is the place where developers manage their teams, bots, o-auth applications, rich presence, and games inside of Discord. In 2018 my team did a major overhaul preparing for the launch of the Discord game store. We needed the ability for developers to manage their game builds, SKUs, and build their storefront.

Application Collection View
Making it EZ

The goal throughout this project was to make the arduous task of adding your game and setting up a storefront easy. Getting your game into the store had many steps, and to make sure that developers didn't get lost in the process I created a clear checklist paired with the ever-present status bar (internally named "pizza tracker") letting you know exactly what phase of the process you're in.

Setting the price for your game
Research

At Discord we have multiple channels to do research and get feedback. But one of the most useful places to find an honest opinion was on Youtube. Users often create videos like "how to set up a Discord bot" and narrate while navigating through our UI. Watching the videos and reading the comments would help us quickly determine where the sticking points were.

Rich Presence

Players love to show off what they are playing with Discord’s status feature. With Rich Presence developers can add beautiful art and detailed information to show off their game even more. The problem was that a lot of the time the assets provided wouldn't fit into our UI elegantly. Leaving the user with a not so great experience. To remedy this I began placing "IRL examples" throughout the Portal to show developers exactly how things would look.

Sell Your Game

In preparation for the Discord game store launch we knew we were going to need a landing site for interested game developers to learn more. The goal of the page was to educate potential partners about our enormous 250 million user base, the benefits and tools we offer, and ultimately get them into the flow of adding their game through the developer portal. In conjunction with the incredibly talented art team I decided to theme this page like an RTS (real time strategy) game, similar to clash of clans.

Hero animation
How to use our tools to maximize your exposure
Feature callout
Tools to help you along the way