Discord
Built for
the Community.
Concept redesign adding new features to Discord — colored usernames for accessibility, channel category grouping, a right-panel DM sidebar with Active Now and To-Do list, and a redesigned screen share layout.
Concept Designer · Platform Features Concept · 2020
Accessibility and clarity — are the same problem. Colored users. Grouped channels. Context that stays.
Colored usernames, DM right panel, channel categories, role-labeled members, voice status bar, screen share layout.
DM view, Server view, and Screen Share — the three core contexts where Discord breaks down for real users.
shipped.
Colored usernames and channel categories are now native Discord features — proposed here in 2020.
Figma File Walkthrough
Full walkthrough of the Figma file — covers DM view with the right panel, Server channel grouping, and the Screen Share layout.
Your DM is a
workspace now.
The DM view gains a dedicated right sidebar panel — three sections that give you persistent context about your conversation partner. Active Now shows what they're currently doing (Ronald playing Valorant for 1h, Esther listening to Spotify) with a platform icon badge. Below that, a shared To-Do list lets both people track tasks collaboratively without leaving Discord — checkboxes, task names, one of which is already in-progress. At the bottom, Shared Media surfaces every image exchanged in the DM as a thumbnail grid so nothing gets buried in scroll history. The chat itself introduces colored usernames — each person gets a distinct color, making fast multi-person group chats immediately readable.
- Active Now: friend presence with current activity (game or app) + platform badge
- Shared To-Do list: collaborative task tracking directly inside the DM — no external tool
- Shared Media grid: every exchanged image surfaced as thumbnails — nothing lost in scroll
- Colored usernames: Jasmine purple, Rohit orange, Albert teal, Ronald blue — instant ID
- Emoji reactions visible inline: 🔥 4 / 🔥 2 — engagement without leaving the message
- File attachment overflow: 3 thumbnails shown + "+3" badge — clean even with many files
DM View — Right Panel + Colored Usernames
A server you can
actually navigate.
The server channel list is reorganised into collapsible named category groups — Announcements | Read Only, Voice & Live, and Chat — with clear icons distinguishing channel types (# text, 📅 event, 🔊 voice). Unread badges show exactly how many messages are waiting in each channel (News: 20, Upcoming Event: 10, Challenge Suggestion: 5, Design Features: 10). Active voice channels show who's currently inside — the Feedback channel has Albert and Jasmine, Project Discuss has Albert with a LIVE badge, Wade Warren, and Robert Fox. The right member list is categorized: Mentor - 1 (Ronald, Happiness Engineer) and Onlines - 130, each member showing their role subtitle so you always know context before you @ someone.
- 3 channel categories: Announcements | Read Only / Voice & Live / Chat
- Channel type icons: # text, 📅 event, 🔊 voice — type visible without opening
- Unread badges on every channel: 20 / 10 / 5 / 10 — nothing missed
- Voice channels show current members inline with LIVE badge on active ones
- Member list categorized: Mentor - 1 / Onlines - 130 with role subtitles
- "Voice Connected — Feedback / Adobe Server" status bar with Video + Screen buttons
Server View — Channel Categories + Member Roles
Everyone visible.
Presenter prominent.
The screen share layout is redesigned around a clear visual hierarchy: the presenter's shared screen takes the top center with a red LIVE badge, while two participant tiles sit beneath — Phantom Cluster with a teal background, Jasmine with a brown background and a muted-mic icon. Name labels run on every tile. The sidebar shows the voice connection context clearly — "Voice Connected — Feedback / Adobe Server" as a persistent status bar, with Video and Screen toggle buttons immediately available without entering any settings. The bottom control bar provides camera, screen share, mic mute, hang up (red), fullscreen, and pop-out — all primary actions within one thumb reach.
- Presenter screen top-center with red LIVE badge — hierarchy is unambiguous
- 2 participant tiles below with distinct background colors and name labels
- Muted mic icon visible on Jasmine's tile — state is always communicated
- "Voice Connected — Feedback / Adobe Server" persistent status in sidebar
- Video + Screen toggle buttons in sidebar — no settings menu required
- Bottom controls: Camera · Screen · Mic · Hang up · Fullscreen · Pop-out
Screen Share + Voice — Participant Layout
The
Problem
Discord in 2020 had no way to visually distinguish users in fast group chats — all usernames appeared identical. Channel lists were flat with no grouping, making server navigation a scroll-and-hunt exercise. DMs had no persistent context panel, and voice calls lacked a clear status indicator anywhere in the sidebar.
Process
& Approach
Audited Discord for clarity and accessibility gaps — focusing on where the interface broke down in real multi-person use: crowded chats where users blurred together, deep server channel lists with no structure, and DMs that accumulated shared media and tasks with no organised surface to surface them.
Audit for Gaps
Identified where Discord broke down in real use — fast group chats where all usernames looked identical, server channel lists with no structure, and DMs that buried shared context over time.
Accessibility First
Assigned distinct colors to usernames — the single change with the biggest readability impact. Grouped channels under named categories to reduce the scanning load for active server members.
Extend Without Breaking
Added features that fit the existing mental model: a DM right panel that slots where whitespace already existed, voice status that mirrors the sidebar pattern, screen share tiles that follow existing grid logic.
The
Design
Added color-coded usernames for instant user identification, channel category grouping (Announcements | Read Only / Voice & Live / Chat), a DM right panel with Active Now presence and current activity, a collaborative To-Do list, and a Shared Media grid. Redesigned screen share with a featured presenter layout and a persistent voice connection status bar.
Where it Led.
The platform shipped what was proposed here — in 2020.
Concept exploration demonstrating accessibility and UX improvements Discord could make. Several proposed features — including colored usernames and channel category grouping — were later added natively to the platform.
Accessibility and clarity are the same problem.
Colored usernames weren't an aesthetic choice — they were a functional one. Making users identifiable in a fast chat and making channels scannable in a large server are both the same underlying need: reduce the cognitive load of figuring out who or what you're looking at. The platform eventually agreed.
View full project on Behance ↗Colored Usernames
Each participant gets a distinct color — Jasmine purple, Rohit orange, Albert teal, Ronald blue. Instantly identifiable in fast-moving group chats without reading names twice.
DM Right Panel
Active Now shows what your contact is doing (Valorant, Spotify), a shared To-Do list tracks tasks together, and a Shared Media grid surfaces every image shared in the DM.
Channel Category Groups
Channels grouped under collapsible labels — Announcements | Read Only, Voice & Live, Chat — replacing the flat list and making server structure readable at a glance.
Role-Labeled Members
"Mentor - 1", "Onlines - 130", role subtitles under every name in the member list. You know who's who and what they do without hovering or asking.
Voice Connection Status
"Voice Connected — Feedback / Adobe Server" visible in the sidebar at all times when in a call, with Video and Screen toggle buttons immediately accessible.
Screen Share Layout
Large featured presenter tile at top with a LIVE badge, participant tiles below — everyone visible, presenter prominent, name labels on every tile.