Discord Tabs
PRODUCT (RE)DESIGN · UX RESEARCH
INTRODUCTION
Tabs is an organizational channel management tool for Discord. Overtime, Discord's user base evolved and the existing experience went from a communication platform catering to avid video gamers to an all inclusive community building platform. In 2021, I set out to introduce a new core feature to enhance the existing channel system into a more delightful, engaging, and seamless user experience.
Disclaimer: I am not affiliated with Discord in any capacity, nor do I own/claim any rights to Discord. This is a passion project and only considers my own design decisions and research into account. It does not reflect any intentions or constraints experienced by the talented team at Discord.
MY ROLE
THE TEAM
TIMELINE
UX Researcher, UI Designer
Individual project
June 2021 — August 2021
MY TOOLS
Figma, Miro, After Effects, Procreate
Discord's monthly active users grew over 14X in the last 4 years. During the pandemic it has brought many communities, from schools to social communities together.
OVERVIEW OF THE REDESIGNED EXPERIENCE
View bookmarked tabs and interact with friends
within the home dashboard
within the home dashboard
Organized tabs across all server channels
Bookmarked tabs on the left panel
Interacting with the tabs
Discord has had an increased in users from all different backgrounds. It's no longer just the voice communication platform for gamers. With that being said...
How might we empower our diverse users to use Discord in the way they want, while making it simple, delightful and streamlined to use.
How might we empower our diverse users to use Discord in the way they want, while making it simple, delightful and streamlined to use.
PROBLEM STATEMENT
🤔 Complicated workflows
🖥 Information overload
Most experiences over time in some Discord servers became a kitchen sink of complex channels to navigate in.
BREAKDOWN OF THE PROBLEM
Discord servers with too many voice and chat channels creates a disjointed user experience.
OVERVIEW OF THE OLD EXPERIENCE
I kicked off the process with a comprehensive research phase - gathering quantitative data from user interviews and surveys
Too many chat channels can seem overbearing and makes the overall experience poor
“There are too many channels to navigate around. It’s confusing at times.”
“There are too many channels to navigate around. It’s confusing at times.”
iNTRO: RESEARCH PHASE
User interviews Insights
Lack of organization system within channels
“There are only a few channels I interact with if there’s only a way to group the important ones together.”
“There are only a few channels I interact with if there’s only a way to group the important ones together.”
No clear way of accessing certain chat channels directly
“Going through the process of checking messages in the channels requires too many steps.”
“Going through the process of checking messages in the channels requires too many steps.”
Design Goals
The user research process also helped us define our focus areas for the featured design.
Efficient
Accessible
Speed
Tabs should seamlessly adapt to variable levels of information density across all channels
Clean out the clutter, and help users easily complete their tasks.
Focusing on user jobs and workflows rather than silos of information.
🔎Research PROCESS
Identifying and prioritising potential solutions.
A comprehensive affinity map were framed and organized. This exercise laid the foundation for the project's MVP.
🔎research PROCESS
Charting user
empathy maps
empathy maps
Visualizing and articulating the current understanding of the users, user needs, and pin points additional key insights
🔎Research Process
Conducting competitive market research
During the user research phase, I noticed that users also used various other communication platforms. I chose the 3 most common applications and took note of the common features featured within each application.
Teams
Messenger
Slack
🏬Competitive market insights
After observing and using the other common communication apps, I realized that Discord was missing:
📕
Bookmarking chat/
voice channels
Bookmarking chat/
voice channels
💬
Creating and managing
chat tabs
Creating and managing
chat tabs
🤝
Built-in section for file sharing with teams
Built-in section for file sharing with teams
✔️SOLUTION
Final Outcome: Tabs
Tabs allows users to interact with their Discord channels in a more personalized way. Users can manage and view many channels in an easier and more organized way.
THE USERS OF TABS
Discord is used by different personas across varying roles in social communities. To better illustrate this problem, I created a user persona to better fit this design solution. Meet Miguel!
Students
Teachers monitor, manage, and create various voice and chat channels where all the student's courses info show up
Some universities partner with student associations in creating an accessible and open Discord community server
Teacher
Universities Students
From elementary to high school, students are utilizing discord as a means of communications and social platform.
User Flow chart
🎨Design Process
In the early stages of the design process, I set out to design a user flow chart that illustrates the user navigating from the login stage to various Tab functionalities.
🎨Design Process
Low fidelity sketches
Afterwards, I quickly sketched out some low-fidelity sketches. The goal in the sketching process was to come up with rapid designs and see which one would be most viable to implement in the final design.
Medium FIDELITY WIREFRAMES
🎨DESIGN Process
1. Accessing tabs
2. Creating and editing tabs
3. Bookmarking and deleting tabs
2. Creating and editing tabs
3. Bookmarking and deleting tabs
After coming up with the low fidelity sketches, I created a series of medium-fidelity wireframes that can be quickly tested and refined over time. For the medium fidelity prototypes, I explored a comprehensive set of user experience flows that would be split into three stages:
✏️Testing & Iterations
Iterating and testing
through unbiased and
lean design
through unbiased and
lean design
At this stage, I find it critical to involve the
user within the design process. Based on various
feedback from 8 other peers + mentor feedback,
I continually iterated my design over the span of
2 weeks- with 2 major improvements.
user within the design process. Based on various
feedback from 8 other peers + mentor feedback,
I continually iterated my design over the span of
2 weeks- with 2 major improvements.
✏️Testing & Iterations
2 major improvements
in my design
in my design
After receiving various user feedback and mentor feedback, the following weeks consisted of updating and addressing any user concerns on the current mid-fi wireframes.
Students
Teachers monitor, manage, and create various voice and chat channels where all the student's courses info show up
Some universities partner with student associations in creating an accessible and open Discord community server
Teacher
Universities Students
From elementary to high school, students are utilizing discord as a means of communications and social platform.
1. Updating Tab Icons
Based on user feedback and mentor feedback, the Tab icon have been updated to better distinctify itself from other existing visual designs. Users found themselves unsure if Tabs were Discord servers, since they are both presented in a round icon.
2. Accessible Navigation
Tabs had a core issue. It required too many steps to get to where users needed to go. After several testing and iterations, the final improvements was in the form of bookmarks. Users can bookmarks their favourite Tabs and get to where they needed to go in a simple click.
The Final Product
The Style Guide
What I’d do differently next time.
CONCLUSION + Reflections
This was my first-ever passion UX project (Hooray)! 🎉. More than the final product, I’m immensely grateful to have been through an entire UX process. It was a a great opportunity to apply what I've learned from school and various mentors into a project that I am passionate about! On that note, a few things I’ve learned:
1. Iterate as much as you can. In the beginning phase of this project, it was important for me to try all possibilities of the design. It was never going to be right the first time, so it took many, many iterations and testing to eventually find a space that was validated through testing and amazing feedback. By no means, the final design is perfect, but from this, I've learned the importance of the iterating and feedback loop. Not to mention - I have a better sense to obey WCAG standards next time!
2. Focus more on tradeoffs with each direction. Something that I came to understand is that tradeoffs come in different scopes. During the project, I had to re-shift my focus on some design aspects that would better align with the user goals. Additionally, in a real-world project situation, trade-offs would also come in the form of product and engineering. I became aware of potential trade-off questions such as: "I changed the flow of this product/added multiple flows to adhere to different users now and/or later…" and "I pushed back on x because we don’t currently have the bandwidth to support the feature or we don’t have stuff built…".
3. Insight driven and storytelling. Despite weeks of research + development, my first version of this case study was full of unnecessary text at this stage instead of tying everything into the bigger question- “so how does this fit into the bigger picture”? Hence, I cut down the copy by more than 60% and focused on the major points in my project. With that being said, moving forward I believe focusing toward more so on the insights will improve my storytelling abilities to others.
4. You didn’t fail- you just found 100 ways that didn’t work. From noticing mistakes in my UI to uncovering more foundational UX problems in my app, I’m thankful to have constantly asked for feedback from my peers and my mentor. In the end, I pushed to have a featured design as best I could. I approached the design through the user's lens and tried my best to avoid my own biases.
