ROLE
Lead Designer - visual design, interaction design, prototyping, user flows
SUMMARY
Discord is one of the world’s most popular online chat and community products, but since launch in 2015, there have been few changes to the Avatars editing flow, to the dismay of many.

I redesigned how users upload, edit, and save their Avatars, addressing user needs and frustrations by decreasing total interactions necessary to edit an Avatar, broadening the capabilities of the preexisting flow, and overall making the identity-crafting experience increasingly intuitive. This feature has been roadmapped for implementation in late 2024.
Extracurriculars
During my time at Discord, I also helped launch the Shop feature, designed graphics and merch for the company, and beat CEO Jason Citron and CTO Stan Vishnevskiy in Mario Kart B).
Team
Bonnie Zhang - Manager
Victoria Limary - PM
Victor Lambert - Data Science
April DeCosta - Content Design
Alexandria Lee - UXR
TOOLS
Figma, Adobe AfterEffects
TIMELINE
2 Months
NEW ENTRY POINT - EDIT AVATAR TO USE PAST UPLOADS AND ADJUST IMAGE.
ADDED CAPABILITIES IN IMAGE TREATMENT.
NEW USER EXPERIENCE - USERS CAN REPLACE THE DEFAULT AVATAR WITH "RANDOM" PREMIUM AVATAR.
MOBILE SCREENS.
PAIN POINT
Looking like your most authentic self can feel difficult online.
especially when you’re a part of a Genshin Impact cosplay group, a Valorant streamers server, and a K-Pop trading community. Oh, and three different study groups for school...
the problem

Discord users can’t customize their Avatars in the ways they want to.

Frustrated users have taken to online threads to air their grievances: Editing and uploading little circle profile photos on Discord is nowhere near as seamless an experience as users envision it being.
current flow

Welcome to Discord’s forge for identities: the profile editing tab.

All kinds of identity-crafting can be accomplished here, including uploading new Avatars. Changing your avatar, however, requires you to upload a new one, with a minimum of five clicks. For every tiny change.
User Insights
User research insights, indicated through survey results, identified the following issues as the most popular problem statements.
Uploads lack permanence.
Users can’t easily re-crop the Avatar they currently have, let alone re-visit Avatars they’ve previously used. This is a big issue for users who want to use different profiles for the different servers they’re in.
Editing is both too limited, and too complex.
Avatar editing is limited to zooming in on or repositioning an upload. And, to edit a current Avatar, users need to  re-upload it entirely, requiring 5 interactions for a simple crop.
Design Iterations

Exploring Entry Points and Modal CTAs

The first few design iterations explored separate entry points that would allow users to view and edit their past Avatars. Although the added entry point allowed for this behavior, it also increased the complexity of the flow, and prioritized image uploading instead of editing.

Proposed Flow

Modal iterations and various entry points paved the way for a new idea: a new modal called “Change Avatar” that would act as a key decision making point. This screen, featuring the modal, would offer a drastic decrease in minimum interactions for an edit, and bundle multiple options into one, centralized Avatar Editing screen.

Final Iteration - New Modals

The first few design iterations explored separate entry points that would allow users to view and edit their past Avatars. Although the added entry point allowed for this behavior, it also increased the complexity of the flow, and prioritized image uploading instead of editing.
AVATAR PERMANENCE
The “Change Avatar” modal allows users to select from previously uploaded Avatars, upload new Avatars with the “Add Avatar” button, and quick edit with crop, rotate, and reflect tools.

This effectively reduces interactions and cognitive load for users looking to make small edits or choose a past Avatar.


‍
SUPPORTING IDENTITY
To support Discord’s mission to help users find belonging and express themselves, we want to promote user behavior of customization.

A “Random” button introduces surprise and delight to the new user experience, changing the default Avatar to a randomized premium default, illustrated by Discord’s Art team.

‍
EDITING CAPABILITIES
Adjusting the Avatar after a new upload leads users to this modal, where new editing capabilities allow users to treat their upload in different ways. Rotation and reflection add extra customization capabilities.
final solution

Creating Authentic Identities on Discord

SELECT A PAST AVATAR
Users can click into “Change Avatar,” and select an Avatar they’ve previously uploaded with ease. This is a key feature for users who want to use the same Avatar for multiple servers, use certain Avatars temporarily, and generally just want to revisit their previous image identities.
UPLOAD AND EDIT NEW AVATARS
To upload an entirely new Avatar, users can click into the Change Avatar modal to add a new image (or GIF, for premium or paid Discord Nitro users). Then, a separate editing modal will appear, where a user may treat their Avatar with different adjustments, and the Avatar uploaded is saved to the library in the Change Avatar modal.
DELIGHTFUL NEW USER EXPERIENCE
New users can also upload entirely new Avatars, and are prompted to change their Avatar from the default with the “Random” button, accompanied with a fun animation.
takeaways
01.
Creativity is a muscle.
Iterating on designs requires both logic and creativity, and while relying on user research dictates design decision making, intuition and creativity require training and reps to acquire. Craft is a combination of all of the above, and to achieve a high level, keep practicing!
02.
Go the extra mile.
Delight can be found in the most minute of interactions, and consumer products like Discord are appealing not only because of great flow-based UX, but also because of a level of surprise and delight that comes from understanding an audience. Take risks and go the extra mile to pitch some extra oomph occasionally!
THANKS 
FOR READING!!

It's dangerous to go alone! 
Take this.

NAVIGATION

WORKRESUMESELF

ME, ELSEWHERE

TWITTERLINKEDIN