Discord Notification Redesign
Overview
A redesigned Discord’s notification system that empower non-technical community members to catch up effortlessly.
Role
Project Lead
UI/UX Design
Usability Testing
Storyboarding
Team
Yaya Zheng
Ruby Wu
Meiyao Li
Timeline
Mar - Jun 2025
11 weeks
Instructors
Bridget Weis
Li-Yuan Chiou
| CONTEXT
The Modern "Do Not Disturb" Dilemma.
"Do Not Disturb" offers peace, but at a cost: the gradual erosion of belonging.
Re-entering a community can be overwhelming–missed inside jokes, lost context, and the quiet anxiety of FOMO–"am I missing out the fun?"
In active Discord communities, members struggle with staying informed–either feeling glued to servers or returning to irrelevant noise after being away.
| REDESIGN VISION
Not Just For Gamers!
Discord has expanded beyond its gaming root, becoming widely adopted by non-gamer communities (e.g. tutoring, networking, hobbies, content creators fanbases…)
Although Discord invested in a playful, beginner-friendly visual branding, its Mobile UX still feels intimidating & overwhelming for newcomers with low technical fluency.
Steep onboarding curve, folder-based navigations, and unpredictable (sometimes invisible) system behaviors can create frictions & discourage prolonged engagement in communities. Our redesign vision is to optimize the mobile UX to align with Discord's inviting rebrand.
| CUSTOMER INSIGHTS
Non-technical Community Members
Use Discord as main information source for upcoming events like fundraising, in-person meetups, community updates.
Mental Model shaped by Instagram & Messenger, not familiar with advanced search, bots, or threads.
Busy, not chronically online 24/7, struggle to keep up with fast-paced conversations & complex server structures.
| OPPORTUNITY
How might we empower non-technical users with more control over their notifications and reduce frictions such that catching-up community updates feels effortless?
| SECONDARY RESEARCH
Discord's Notification System Doesn't Scale with Community Complexity.
A scan of developer forums & Reddit (home to many of Discord’s most experienced users) reveals consistent and unresolved frustrations with the current system:
(These notification feature requests were posted 6 years ago and still not fixed/implemented)
Low Signal-to-Noise Ratio
Important updates are buried in spam, scrolling chat history can be frustrating.
Phantom beeps
No visual cues nor accurate history. To trace the notification origins, users are forced to look through every server/channel.
No Middle Ground
To regain control, one has to mute all servers. No white-listing controls available.
| COMPETITIVE ANALYSIS
What can we learn from Slack?
Slack's visual hierarchy is optimized for mobile experience.
Slack offers shortcut / alternative navigation with curated updates.
homepage
Slack's filtering tags & concise message sources reduces information overload.
Slack shows two-lines preview, short enough to fit more messages, long enough to provide actionable context.
notification inbox
Discord's system is way more complex than Slack: Slack shows one workspace (server) at a time, whereas Discord shows 10+ servers at a time. Yet its notification inbox & filtering tools are less robust compared to Slack.
What if users can filter by server or even subscribed channels? There must be a better approach than just dumping ALL notifications in one page…
| REDESIGN GOAL
Consolidate Research Insights into Deliverables
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 8 20 L 8 15 C 8 14.067 7.858 13.375 7.575 12.925 C 7.292 12.475 6.917 12.033 6.45 11.6 L 7.875 10.175 C 8.075 10.358 8.267 10.554 8.45 10.763 C 8.633 10.971 8.817 11.192 9 11.425 C 9.233 11.108 9.471 10.829 9.713 10.588 C 9.954 10.346 10.2 10.108 10.45 9.875 C 11.083 9.292 11.658 8.617 12.175 7.85 C 12.692 7.083 12.967 5.742 13 3.825 L 11.425 5.4 L 10 4 L 14 0 L 18 4 L 16.6 5.4 L 15 3.825 C 14.967 6.208 14.6 7.904 13.9 8.912 C 13.2 9.921 12.5 10.742 11.8 11.375 C 11.267 11.858 10.833 12.329 10.5 12.787 C 10.167 13.246 10 13.983 10 15 L 10 20 Z M 3.2 6.175 C 3.133 5.842 3.088 5.475 3.063 5.075 C 3.037 4.675 3.017 4.258 3 3.825 L 1.4 5.4 L 0 4 L 4 0 L 8 4 L 6.575 5.4 L 5 3.85 C 5 4.2 5.017 4.529 5.05 4.838 C 5.083 5.146 5.117 5.433 5.15 5.7 Z M 5.35 10.575 C 5.017 10.225 4.696 9.817 4.388 9.35 C 4.079 8.883 3.808 8.308 3.575 7.625 L 5.5 7.15 C 5.667 7.6 5.858 7.983 6.075 8.3 C 6.292 8.617 6.525 8.9 6.775 9.15 Z" fill="rgb(227, 227, 227)" height="20px" id="dd1hpghc7" transform="translate(3 2)" width="18.00000457763673px"/></svg>)
Alternative navigation
Bypass hierarchical, folder-based interaction with channel list, shortcut for quick catch-up.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 2 18 C 1.45 18 0.979 17.804 0.588 17.413 C 0.196 17.021 0 16.55 0 16 L 0 2 C 0 1.45 0.196 0.979 0.588 0.588 C 0.979 0.196 1.45 0 2 0 L 16 0 C 16.55 0 17.021 0.196 17.412 0.588 C 17.804 0.979 18 1.45 18 2 L 18 7.65 C 17.683 7.5 17.358 7.379 17.025 7.287 C 16.692 7.196 16.35 7.125 16 7.075 L 16 2 L 2 2 L 2 11 L 6.2 11 C 6.35 11.45 6.6 11.842 6.95 12.175 C 7.3 12.508 7.692 12.742 8.125 12.875 C 8.075 13.208 8.042 13.546 8.025 13.888 C 8.008 14.229 8.025 14.567 8.075 14.9 C 7.475 14.783 6.913 14.563 6.388 14.237 C 5.862 13.912 5.4 13.5 5 13 L 2 13 L 2 16 L 8.325 16 C 8.442 16.367 8.575 16.717 8.725 17.05 C 8.875 17.383 9.058 17.7 9.275 18 Z M 2 16 L 8.325 16 M 14.025 19 L 13.725 17.5 C 13.525 17.417 13.337 17.329 13.162 17.238 C 12.987 17.146 12.808 17.033 12.625 16.9 L 11.175 17.35 L 10.175 15.65 L 11.325 14.65 C 11.292 14.45 11.275 14.233 11.275 14 C 11.275 13.767 11.292 13.55 11.325 13.35 L 10.175 12.35 L 11.175 10.65 L 12.625 11.1 C 12.808 10.967 12.987 10.854 13.162 10.762 C 13.337 10.671 13.525 10.583 13.725 10.5 L 14.025 9 L 16.025 9 L 16.325 10.5 C 16.525 10.583 16.712 10.671 16.887 10.762 C 17.062 10.854 17.242 10.967 17.425 11.1 L 18.875 10.65 L 19.875 12.35 L 18.725 13.35 C 18.758 13.55 18.775 13.767 18.775 14 C 18.775 14.233 18.758 14.45 18.725 14.65 L 19.875 15.65 L 18.875 17.35 L 17.425 16.9 C 17.242 17.033 17.062 17.146 16.887 17.238 C 16.712 17.329 16.525 17.417 16.325 17.5 L 16.025 19 Z M 15.025 16 C 15.575 16 16.046 15.804 16.437 15.413 C 16.829 15.021 17.025 14.55 17.025 14 C 17.025 13.45 16.829 12.979 16.437 12.587 C 16.046 12.196 15.575 12 15.025 12 C 14.475 12 14.004 12.196 13.612 12.587 C 13.221 12.979 13.025 13.45 13.025 14 C 13.025 14.55 13.221 15.021 13.612 15.413 C 14.004 15.804 14.475 16 15.025 16 Z" fill="rgb(227, 227, 227)" height="19px" id="KmNdoCdCE" transform="translate(3 2)" width="19.874995422363327px"/></svg>)
Notification inbox
Improve visual hierarchy, support Discord's multi-server scale.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 0 9 L 5 0 L 10 9 Z M 5 19 C 3.9 19 2.958 18.608 2.175 17.825 C 1.392 17.042 1 16.1 1 15 C 1 13.883 1.392 12.938 2.175 12.163 C 2.958 11.387 3.9 11 5 11 C 6.1 11 7.042 11.392 7.825 12.175 C 8.608 12.958 9 13.9 9 15 C 9 16.1 8.608 17.042 7.825 17.825 C 7.042 18.608 6.1 19 5 19 Z M 5 17 C 5.55 17 6.021 16.804 6.412 16.413 C 6.804 16.021 7 15.55 7 15 C 7 14.45 6.804 13.979 6.412 13.587 C 6.021 13.196 5.55 13 5 13 C 4.45 13 3.979 13.196 3.588 13.587 C 3.196 13.979 3 14.45 3 15 C 3 15.55 3.196 16.021 3.588 16.413 C 3.979 16.804 4.45 17 5 17 Z M 3.4 7 L 6.6 7 L 5 4.125 Z M 11 19 L 11 11 L 19 11 L 19 19 Z M 13 17 L 17 17 L 17 13 L 13 13 Z M 15 9 C 14.05 8.2 13.254 7.525 12.613 6.975 C 11.971 6.425 11.458 5.942 11.075 5.525 C 10.692 5.108 10.417 4.717 10.25 4.35 C 10.083 3.983 10 3.592 10 3.175 C 10 2.425 10.263 1.792 10.788 1.275 C 11.313 0.758 11.967 0.5 12.75 0.5 C 13.2 0.5 13.621 0.604 14.012 0.813 C 14.404 1.021 14.733 1.308 15 1.675 C 15.267 1.308 15.596 1.021 15.988 0.813 C 16.379 0.604 16.8 0.5 17.25 0.5 C 18.033 0.5 18.687 0.758 19.212 1.275 C 19.738 1.792 20 2.425 20 3.175 C 20 3.592 19.917 3.983 19.75 4.35 C 19.583 4.717 19.308 5.108 18.925 5.525 C 18.542 5.942 18.029 6.425 17.387 6.975 C 16.746 7.525 15.95 8.2 15 9 Z M 15 6.375 C 16.2 5.375 17 4.667 17.4 4.25 C 17.8 3.833 18 3.492 18 3.225 C 18 3.008 17.938 2.833 17.813 2.7 C 17.688 2.567 17.517 2.5 17.3 2.5 C 17.133 2.5 16.971 2.546 16.813 2.637 C 16.654 2.729 16.458 2.892 16.225 3.125 L 15 4.3 L 13.775 3.125 C 13.542 2.892 13.346 2.729 13.188 2.637 C 13.029 2.546 12.867 2.5 12.7 2.5 C 12.483 2.5 12.313 2.567 12.188 2.7 C 12.063 2.833 12 3.008 12 3.225 C 12 3.492 12.2 3.833 12.6 4.25 C 13 4.667 13.8 5.375 15 6.375 Z M 15 4.425 M 5 5.55 M 5 15 M 15 15" fill="rgb(227, 227, 227)" height="19px" id="dTjzicBub" transform="translate(2 2)" width="20px"/></svg>)
Notification setting
Interest-based white-listing that give users control over what goes into their inbox.
See Iterations
| EMPHATHIZE
UX Mapping & Storyboarding
Scenario Storyboards for Short-term Catch-up
Scenario Storyboards for Long-term Catch-up
Technical Storyboards for Short-term Catch-up
User Journey Map
Alternative Navigation
How to Communicate Multi-Server Hierarchy?
Although it was tempting to just copy the exact implementation and card logic from Slack, we must respect Discord's multi-server complexity.
I sketched out change in states to visualize edge cases, this helps me get productive critiques before I implement them in Figma.
I had a lot of fun experimenting with component sets & Figma's smart animate.
Although I was proud of figuring out the blurs & parchment paper effect, they add more distraction than value—imagine watching this animation for 100+ messages!
As I observe users testing out this prototype, I also realize the intermediate state disrupts the swiping flow. They need to stop and ponder—"what message should I click into?" and this problem is exactly the same as deciding which channel to click into.
Notification Inbox
Elevate Existing Mental Models
How might we accommodate users across usage level (3 ~100+ servers)? We think Slack workspaces (one catch-up view for each server) feels too separated, its constant role-switching doesn't match the fluidity of Discord.
Through observations, we found out users are already grouping & color-coding servers. We can borrow this user-defined category as a middle-ground solution.
However, as Ruby pointed out, it doesn't feel like Discord anymore. This critique was an awakening call, I began searching for DIscord's existing design components to translate this vision.
| FINAL DESIGN
A smart, interest-based notification inbox that gives users control of notifications while making catch-up efficient and fun.
Notification Inbox + user-defined workspace
Success Metrics
1) usage frequency of notification inbox WRT homepage as notification entry point
= improved discoverability & user trust
2) Drop in channel-switching bounce rate & idle time on homepage / channel list, paired with increase in time spent within chat interface
= reduced navigational friction, locate content efficiently, spend more quality time w/ friends.
Quick Catch-up / smart feed
Success Metrics
1) User engagement with suggested cards (e.g. replying, reacting, reading for 10 second)
= relevancy & usability of the card-swiping model / recommendation accuracy
2) Drop in new users muting all servers or disabling in-app notification
= user trust in system
3) Re-engagement with previously inactive servers, measured by message views triggered by whitelist notifications (keywords, users)
= Success in helping users rediscover meaningful content/people/communities in old servers
Personal Space (Save, Archive, Reminder)
(screens I made to facilitate my teammates' delieveable)
