Discord Mobile Redesign

We redesigned our mobile app in 2024 to make it easier for new users to understand and navigate Discord. I led a team of designers as an IC lead to shape the visual language and the overall information architecture of the app.

I led a team of designers as an IC lead to shape the visual language and overall information architecture of the app, from design system and the new DM tab to voice & video.

Design Lead

Design Lead

2023 — 2024

2023 — 2024

Making Discord more friendly and powerful for its next 100m users.

Timeframe

Jan 2023 — Jan 2024

Context

In 2015, Discord's mobile app was designed as a companion to the desktop version. Over time, however, more users—especially younger, non-gamers—began relying on mobile as their primary platform. Feedback revealed that the app felt confusing, hard to navigate, and underperforming. To position Discord as the ultimate chat app for groups, we set out to redesign the mobile experience: making it intuitive for new users while preserving the power and customization that our core users love.

Solution

The redesigned mobile app offers a more intuitive experience for new users, with familiar navigation patterns like a dedicated DM tab. We’ve also made significant improvements in customization, real-time presence, and performance. Additionally, we've invested in a robust design system that ensures consistent quality and provides a solid foundation for future updates and team collaboration.

Thanks to

Daniel Destefanis, Dabney Donigan, Bryan Berger, Lily Jen, Hong Ye Xu, Milan Samuel, Francesco Polizzi, Jacob Davis, Kelsey Duncomb-Smith, Stanislav Vishnevskiy, Nick Reynolds, Cat Tan, AJ Palkovic, Amadeus Demarzi, Avery Ayers, Brandon Dail, Jerry Jiang, Max Goodhart, Miguel Gaeta, Jerry Wang, and many more.

Visual Language and Design System

I led the foundation of the mobile redesign by establishing the overall design principles and visual direction. Collaborating with the design system team, I helped create components that extended the visual language across the entire app.

Visual Language and Design System

I led the foundation of the mobile redesign by establishing the overall design principles and visual direction. Collaborating with the design system team, I helped create components that extended the visual language across the entire app.

Dark (Before)

Dark (After)

Midnight (New)

Navigation

I led the design direction for multiple navigation explorations to make Discord more intuitive for both new and existing users. While we ultimately chose a more conservative approach, I’d like to highlight some of the key explorations that shaped our process.

Navigation

I led the design direction for multiple navigation explorations to make Discord more intuitive for both new and existing users. While we ultimately chose a more conservative approach, I’d like to highlight some of the key explorations that shaped our process.

Dock navigation is customizable, ergonomic, and more familiar with UX patterns in other messaging apps.

Dock navigation is customizable, ergonomic, and more familiar with UX patterns in other messaging apps.

Dock offers ergonomic, quick access to your most-used servers.

Dock offers ergonomic, quick access to your most-used servers.

Messages tab provides a familiar starting point for new users.

Messages tab provides a familiar starting point for new users.

Notification tab lets you keep up with most important, urgent updates across Discord.

Notification tab lets you keep up with most important, urgent updates across Discord.

You tab lets you view and customize your Discord identity.

You tab lets you view and customize your Discord identity.

This iteration helps you keep track of recently visited channels, and surfaces recent DMs without navigating away from Servers.

This iteration helps you keep track of recently visited channels, and surfaces recent DMs without navigating away from Servers.

This iteration stays close to the existing vertical navigation while maintaining ergonomic and customizable design principles.

This iteration stays close to the existing vertical navigation while maintaining ergonomic and customizable design principles.

We ultimately landed on a visual reskin of the existing navigation, incorporating new design system components without altering the core UX.

We ultimately landed on a visual reskin of the existing navigation, incorporating new design system components without altering the core UX.

Chat

Chat is our core feature and the most used communication tool on our platform. I refined chat experience in both Servers and DM to enhance readability and introduce new, fun ways for people to communicate.

Chat

Chat is our core feature and the most used communication tool on our platform. I refined chat experience in both Servers and DM to enhance readability and introduce new, fun ways for people to communicate.

Cozy and Compact modes allow you to adjust the visual density according to your preference.

Cozy and Compact modes allow you to adjust the visual density according to your preference.

Channel emojis and the typing indicator add extra delight and personalization.

Channel emojis and the typing indicator add extra delight and personalization.

Swipe to reply lets you reply to a message more quickly.

Swipe to reply lets you reply to a message more quickly.

See who's currently active now while chatting.

See who's currently active now while chatting.

Active now cards show what your friends are currently up to.

Active now cards show what your friends are currently up to.

Voice & Video

I redesigned voice & video experience to be a live shared space that's delightful, customizable, and bustling with activity. It’s adaptable for multiple use cases and lays the groundwork for future IA advancements.

Voice & Video

I redesigned voice & video experience to be a live shared space that's delightful, customizable, and bustling with activity. It’s adaptable for multiple use cases and lays the groundwork for future IA advancements.

design.
by roka.

I'd love to grab tea to talk about anything - from design and tech to esports and kpop. Shoot me an email and we can work something out.

Get in touch

Email copied to clipboard!

Made with lack of sleep and lots of tea in Santa Clara, CA.

Handcrafted using

design.
by roka.

I'd love to grab tea to talk about anything - from design and tech to esports and kpop. Shoot me an email and we can work something out.

Get in touch

Email copied to clipboard!

Made with lack of sleep and lots of tea in Santa Clara, CA.