Zoom Chat Design
Zoom Chat Design
Zoom Chat Design
Duration
1 weeks
Stakeholders
Zoom Inc
Team
Solo Project :)
My Role
I redesigned the Zoom chat interface to better support students in virtual classrooms. I conducted a survey and used secondary research to guide both my focus and design decisions. Working within Zoom’s design guidelines, I created new interactions that seamlessly integrate into the existing system. I also prioritized accessibility to ensure a universal experience that accommodates all students.
Skills
UI Design
UX Research
Brand Identity
Design Systems
Tools
Figma
Google Suite
Duration
1 weeks
Stakeholders
Zoom Inc
Team
Solo Project :)
My Role
I redesigned the Zoom chat interface to better support students in virtual classrooms. I conducted a survey and used secondary research to guide both my focus and design decisions. Working within Zoom’s design guidelines, I created new interactions that seamlessly integrate into the existing system. I also prioritized accessibility to ensure a universal experience that accommodates all students.
Skills
UI Design
UX Research
Brand Identity
Design Systems
Tools
Figma
Google Suite
Duration
1 weeks
Stakeholders
Zoom Inc
Team
Solo Project :)
My Role
I redesigned the Zoom chat interface to better support students in virtual classrooms. I conducted a survey and used secondary research to guide both my focus and design decisions. Working within Zoom’s design guidelines, I created new interactions that seamlessly integrate into the existing system. I also prioritized accessibility to ensure a universal experience that accommodates all students.
Skills
UI Design
UX Research
Brand Identity
Design Systems
Tools
Figma
Google Suite
Overview
Overview
Overview
Zoom Threads
DESCRIPTION
I created an updated Zoom chat experience which creates opportunities for students to ask questions from their peers inside virtual classrooms. This experience integrates into the existing zoom chat experience seamlessly and provides typing indicators and emphasized messages inside the public zoom chat.
Design Vision
DESCRIPTION
I wanted to focus on supporting students' engagement inside virtual classrooms by designing UI experiences, which mimic the feeling of conversations students might have inside physical classrooms. Creating an experience which allows students to engage with their peers, while also extending the public conversation forward seemed like an interesting opportunity I didn't want to miss.
Zoom Threads
DESCRIPTION
I created an updated Zoom chat experience which creates opportunities for students to ask questions from their peers inside virtual classrooms. This experience integrates into the existing zoom chat experience seamlessly and provides typing indicators and emphasized messages inside the public zoom chat.
Design Vision
DESCRIPTION
I wanted to focus on supporting students' engagement inside virtual classrooms by designing UI experiences, which mimic the feeling of conversations students might have inside physical classrooms. Creating an experience which allows students to engage with their peers, while also extending the public conversation forward seemed like an interesting opportunity I didn't want to miss.
Zoom Threads
DESCRIPTION
I created an updated Zoom chat experience which creates opportunities for students to ask questions from their peers inside virtual classrooms. This experience integrates into the existing zoom chat experience seamlessly and provides typing indicators and emphasized messages inside the public zoom chat.
Design Vision
DESCRIPTION
I wanted to focus on supporting students' engagement inside virtual classrooms by designing UI experiences, which mimic the feeling of conversations students might have inside physical classrooms. Creating an experience which allows students to engage with their peers, while also extending the public conversation forward seemed like an interesting opportunity I didn't want to miss.
Solution
Make the Zoom Chat experience smarter and more intentional.
Context
Context
Context
Background
DESCRIPTION
As classrooms moved online during the pandemic, Zoom became the primary platform for teaching at many universities, including the University of Guelph. Traditional in-person learning shifted to a virtual format, changing the dynamics of learning, engagement, and participation.
Background
DESCRIPTION
As classrooms moved online during the pandemic, Zoom became the primary platform for teaching at many universities, including the University of Guelph. Traditional in-person learning shifted to a virtual format, changing the dynamics of learning, engagement, and participation.
Background
DESCRIPTION
As classrooms moved online during the pandemic, Zoom became the primary platform for teaching at many universities, including the University of Guelph. Traditional in-person learning shifted to a virtual format, changing the dynamics of learning, engagement, and participation.
Problem
DESCRIPTION
Students faced many challenges due to the abrupt shift in their education. Technological issues, such as poor network connectivity and limited access to appropriate electronic devices, had a significant impact. Additionally, unique home environments and the added technological layer between interpersonal relationships affected students’ ability to engage with the content and their peers.
Opportunity
DESCRIPTION
In many ways, the online learning environment posed significant challenges, but it also created opportunities to build a more geographically accessible and accommodating experience for students. For me, this was a crucial insight—it made me consider how small tweaks to Zoom could help reduce friction between students and their education. In particular, improving the Zoom chat experience stood out as a unique opportunity to address several of these issues at once. Since all students have access to the chat interface across devices, enhancing it could foster smarter engagement with questions and encourage more meaningful public conversation.
Problem
DESCRIPTION
Students faced many challenges due to the abrupt shift in their education. Technological issues, such as poor network connectivity and limited access to appropriate electronic devices, had a significant impact. Additionally, unique home environments and the added technological layer between interpersonal relationships affected students’ ability to engage with the content and their peers.
Opportunity
DESCRIPTION
In many ways, the online learning environment posed significant challenges, but it also created opportunities to build a more geographically accessible and accommodating experience for students. For me, this was a crucial insight—it made me consider how small tweaks to Zoom could help reduce friction between students and their education. In particular, improving the Zoom chat experience stood out as a unique opportunity to address several of these issues at once. Since all students have access to the chat interface across devices, enhancing it could foster smarter engagement with questions and encourage more meaningful public conversation.
Problem
DESCRIPTION
Students faced many challenges due to the abrupt shift in their education. Technological issues, such as poor network connectivity and limited access to appropriate electronic devices, had a significant impact. Additionally, unique home environments and the added technological layer between interpersonal relationships affected students’ ability to engage with the content and their peers.
Opportunity
DESCRIPTION
In many ways, the online learning environment posed significant challenges, but it also created opportunities to build a more geographically accessible and accommodating experience for students. For me, this was a crucial insight—it made me consider how small tweaks to Zoom could help reduce friction between students and their education. In particular, improving the Zoom chat experience stood out as a unique opportunity to address several of these issues at once. Since all students have access to the chat interface across devices, enhancing it could foster smarter engagement with questions and encourage more meaningful public conversation.
Challenge
How might I enhance participation on Zoom through better accessibility?
Challenge
How might I enhance participation on Zoom through better accessibility?
Challenge
How might I enhance participation on Zoom through better accessibility?
Research
Research
Research
Literature Review
DESCRIPTION
The COVID-19 pandemic significantly disrupted the global education system and forced institutions to shift abruptly to online learning. This sudden transition left many teachers unprepared to deliver meaningful lessons that included interactions and discussions in a virtual environment (1).
Literature Review
DESCRIPTION
The COVID-19 pandemic significantly disrupted the global education system and forced institutions to shift abruptly to online learning. This sudden transition left many teachers unprepared to deliver meaningful lessons that included interactions and discussions in a virtual environment (1).
Literature Review
DESCRIPTION
The COVID-19 pandemic significantly disrupted the global education system and forced institutions to shift abruptly to online learning. This sudden transition left many teachers unprepared to deliver meaningful lessons that included interactions and discussions in a virtual environment (1).
In addition, the technical requirements for online classes, such as a high-bandwidth internet connection and a reliable computer, meant that only students with access to these resources could consistently participate (2).
In addition, the technical requirements for online classes, such as a high-bandwidth internet connection and a reliable computer, meant that only students with access to these resources could consistently participate (2).
In addition, the technical requirements for online classes, such as a high-bandwidth internet connection and a reliable computer, meant that only students with access to these resources could consistently participate (2).
With everyone working and studying from home, noisy home environments often made it difficult for students to unmute themselves and actively engage in class discussions. The lack of an enthusiastic and interactive learning atmosphere further discouraged student participation, making virtual classrooms feel less engaging and more isolating (2).
With everyone working and studying from home, noisy home environments often made it difficult for students to unmute themselves and actively engage in class discussions. The lack of an enthusiastic and interactive learning atmosphere further discouraged student participation, making virtual classrooms feel less engaging and more isolating (2).
With everyone working and studying from home, noisy home environments often made it difficult for students to unmute themselves and actively engage in class discussions. The lack of an enthusiastic and interactive learning atmosphere further discouraged student participation, making virtual classrooms feel less engaging and more isolating (2).
Zoom, while a successful video conferencing tool for business use, was not initially designed to support the unique needs of educational environments. As institutions rapidly adopted Zoom for online learning, both teachers and students struggled. The lack of built-in mechanisms to support student participation negatively affected the quality of interaction and feedback, disproportionately impacting students (3,4).
Zoom, while a successful video conferencing tool for business use, was not initially designed to support the unique needs of educational environments. As institutions rapidly adopted Zoom for online learning, both teachers and students struggled. The lack of built-in mechanisms to support student participation negatively affected the quality of interaction and feedback, disproportionately impacting students (3,4).
Zoom, while a successful video conferencing tool for business use, was not initially designed to support the unique needs of educational environments. As institutions rapidly adopted Zoom for online learning, both teachers and students struggled. The lack of built-in mechanisms to support student participation negatively affected the quality of interaction and feedback, disproportionately impacting students (3,4).
Survey
DESCRIPTION
To build on these insights and better understand the real-world challenges students experienced on Zoom, I conducted a survey that received 84 student responses. Participants were asked about how they engage on Zoom, the frustrations and challenges they face, and the strategies they currently use to ask questions from classmates.
Goal
DESCRIPTION
The goal was to better understand what strategies students currently use to engage with their classmates and what common challenges they run into along with their satisfaction with Zoom.
Survey
DESCRIPTION
To build on these insights and better understand the real-world challenges students experienced on Zoom, I conducted a survey that received 84 student responses. Participants were asked about how they engage on Zoom, the frustrations and challenges they face, and the strategies they currently use to ask questions from classmates.
Goal
DESCRIPTION
The goal was to better understand what strategies students currently use to engage with their classmates and what common challenges they run into along with their satisfaction with Zoom.
Survey
DESCRIPTION
To build on these insights and better understand the real-world challenges students experienced on Zoom, I conducted a survey that received 84 student responses. Participants were asked about how they engage on Zoom, the frustrations and challenges they face, and the strategies they currently use to ask questions from classmates.
Goal
DESCRIPTION
The goal was to better understand what strategies students currently use to engage with their classmates and what common challenges they run into along with their satisfaction with Zoom.
Smarter Chat Interface
DESCRIPTION
Bringing together the primary and secondary findings allowed me to focus on iterating an existing design rather than creating an entirely new experience. Instead of introducing a brand-new feature, which would require students to adapt to yet another change in an already rapidly evolving environment, I chose to build on a well-established and familiar interaction among students. This approach aimed to provide a sense of continuity and ease of use.
Smarter Chat Interface
DESCRIPTION
Bringing together the primary and secondary findings allowed me to focus on iterating an existing design rather than creating an entirely new experience. Instead of introducing a brand-new feature, which would require students to adapt to yet another change in an already rapidly evolving environment, I chose to build on a well-established and familiar interaction among students. This approach aimed to provide a sense of continuity and ease of use.
Smarter Chat Interface
DESCRIPTION
Bringing together the primary and secondary findings allowed me to focus on iterating an existing design rather than creating an entirely new experience. Instead of introducing a brand-new feature, which would require students to adapt to yet another change in an already rapidly evolving environment, I chose to build on a well-established and familiar interaction among students. This approach aimed to provide a sense of continuity and ease of use.
Priorities
Priorities
Priorities
Device Compatibility
DESCRIPTION
Based on the research, it was clear that a solution needed to be accessible across different devices while still maintaining core design principles and meeting user needs. As a result, ensuring the design was both compatible and visually appealing across various screen sizes became a key priority.
Device Compatibility
DESCRIPTION
Based on the research, it was clear that a solution needed to be accessible across different devices while still maintaining core design principles and meeting user needs. As a result, ensuring the design was both compatible and visually appealing across various screen sizes became a key priority.
Device Compatibility
DESCRIPTION
Based on the research, it was clear that a solution needed to be accessible across different devices while still maintaining core design principles and meeting user needs. As a result, ensuring the design was both compatible and visually appealing across various screen sizes became a key priority.
Intentionality
DESCRIPTION
Students wanted to know that their questions or comments were being acknowledged. Providing visibility and showing intentionality, such as highlighting when someone is responding, reassures students that their query is being seen and that a response is on the way.
Intentionality
DESCRIPTION
Students wanted to know that their questions or comments were being acknowledged. Providing visibility and showing intentionality, such as highlighting when someone is responding, reassures students that their query is being seen and that a response is on the way.
Intentionality
DESCRIPTION
Students wanted to know that their questions or comments were being acknowledged. Providing visibility and showing intentionality, such as highlighting when someone is responding, reassures students that their query is being seen and that a response is on the way.
Distinction and Flow
DESCRIPTION
It was important to create visual and structural distinction to support both the students actively engaging in the conversation and their classmates who may be observing or catching up.
Distinction and Flow
DESCRIPTION
It was important to create visual and structural distinction to support both the students actively engaging in the conversation and their classmates who may be observing or catching up.
Distinction and Flow
DESCRIPTION
It was important to create visual and structural distinction to support both the students actively engaging in the conversation and their classmates who may be observing or catching up.
Design Decisions
Design Decisions
Design Decisions
Visual Distinction
DESCRIPTION
Introducing a visual thread for replies helps students quickly distinguish conversations. Keeping the message box simple, aligned with Zoom's design language, maintains consistency.
Visual Distinction
DESCRIPTION
Introducing a visual thread for replies helps students quickly distinguish conversations. Keeping the message box simple, aligned with Zoom's design language, maintains consistency.
Visual Distinction
DESCRIPTION
Introducing a visual thread for replies helps students quickly distinguish conversations. Keeping the message box simple, aligned with Zoom's design language, maintains consistency.
Following Jacobs Law
DESCRIPTION
Students are already familiar with reply systems similar to Messenger, iMessage, and WhatsApp. A fully encapsulated reply system offers consistency across various device screens, enhancing usability.
Following Jacobs Law
DESCRIPTION
Students are already familiar with reply systems similar to Messenger, iMessage, and WhatsApp. A fully encapsulated reply system offers consistency across various device screens, enhancing usability.
Following Jacobs Law
DESCRIPTION
Students are already familiar with reply systems similar to Messenger, iMessage, and WhatsApp. A fully encapsulated reply system offers consistency across various device screens, enhancing usability.
Task Separation
DESCRIPTION
Separating chat and notifications into distinct layers helps users focus on one task at a time, reducing cognitive overload. A dedicated notification layer keeps interactions brief and less distracting.
Task Separation
DESCRIPTION
Separating chat and notifications into distinct layers helps users focus on one task at a time, reducing cognitive overload. A dedicated notification layer keeps interactions brief and less distracting.
Task Separation
DESCRIPTION
Separating chat and notifications into distinct layers helps users focus on one task at a time, reducing cognitive overload. A dedicated notification layer keeps interactions brief and less distracting.
Final Design
Final Design
Final Design
Creating an Identity
DESCRIPTION
The most noticeable change is the new thread-based reply system. Threads are designed to grab students' attention, with colors indicating involvement—blue for active participants, and neutral for others. This differentiation helps focus attention on relevant conversations.
Creating an Identity
DESCRIPTION
The most noticeable change is the new thread-based reply system. Threads are designed to grab students' attention, with colors indicating involvement—blue for active participants, and neutral for others. This differentiation helps focus attention on relevant conversations.
Creating an Identity
DESCRIPTION
The most noticeable change is the new thread-based reply system. Threads are designed to grab students' attention, with colors indicating involvement—blue for active participants, and neutral for others. This differentiation helps focus attention on relevant conversations.
Simple Typography
DESCRIPTION
To keep the interface clean and focused on legibility, I adhered to Zoom’s default ‘Lato’ font for text and used a bold sans-serif font for titles to make interactions quicker and more distinguishable at a glance.
Simple Typography
DESCRIPTION
To keep the interface clean and focused on legibility, I adhered to Zoom’s default ‘Lato’ font for text and used a bold sans-serif font for titles to make interactions quicker and more distinguishable at a glance.
Simple Typography
DESCRIPTION
To keep the interface clean and focused on legibility, I adhered to Zoom’s default ‘Lato’ font for text and used a bold sans-serif font for titles to make interactions quicker and more distinguishable at a glance.
Clean Icons
DESCRIPTION
Following Zoom’s design language, I opted for outline icons with wide inner spacing for better recognition. For hover and selected states, the icons fill in, and based on user feedback, the reply button is solid for easier identification.
Clean Icons
DESCRIPTION
Following Zoom’s design language, I opted for outline icons with wide inner spacing for better recognition. For hover and selected states, the icons fill in, and based on user feedback, the reply button is solid for easier identification.
Clean Icons
DESCRIPTION
Following Zoom’s design language, I opted for outline icons with wide inner spacing for better recognition. For hover and selected states, the icons fill in, and based on user feedback, the reply button is solid for easier identification.
The Outcome
DESCRIPTION
This design accommodates students in various environments where they may only be able to participate in the conversation through text. Visual threaded replies are easily glanceable and distinguishable, notifications keep users engaged, and multi-threaded responses ensure conversations flow smoothly and remain accessible, even when audio isn’t an option.
The Outcome
DESCRIPTION
This design accommodates students in various environments where they may only be able to participate in the conversation through text. Visual threaded replies are easily glanceable and distinguishable, notifications keep users engaged, and multi-threaded responses ensure conversations flow smoothly and remain accessible, even when audio isn’t an option.
The Outcome
DESCRIPTION
This design accommodates students in various environments where they may only be able to participate in the conversation through text. Visual threaded replies are easily glanceable and distinguishable, notifications keep users engaged, and multi-threaded responses ensure conversations flow smoothly and remain accessible, even when audio isn’t an option.
Reflection
Reflection
Reflection
Things I learned
Things I learned
Things I learned
Working With the System, Not Against It
DESCRIPTION
I used to think creating new experiences meant reinventing the design wheel. But I’ve learned that meeting users’ needs is what matters most—even if that means working within established design systems. Rather than working around Zoom’s existing design language, I focused on integrating my changes to create a consistent, fluid experience that meets user expectations.
Quiet Needs, Bold Impact
DESCRIPTION
If someone doesn’t have access to a stable internet connection, lacks an electronic device, or can’t participate in the conversation because they’re in a noisy environment and don’t want to disrupt the class by unmuting their mic, they often end up asking questions after class, emailing the professor later, or relying on friends.These are the kinds of challenges I thought deeply about and recognized as central to this project. As designers, we have a choice: we can either elevate the experience for a select few, or we can consider the needs of everyone and create something that brings people together.
Working With the System, Not Against It
DESCRIPTION
I used to think creating new experiences meant reinventing the design wheel. But I’ve learned that meeting users’ needs is what matters most—even if that means working within established design systems. Rather than working around Zoom’s existing design language, I focused on integrating my changes to create a consistent, fluid experience that meets user expectations.
Quiet Needs, Bold Impact
DESCRIPTION
If someone doesn’t have access to a stable internet connection, lacks an electronic device, or can’t participate in the conversation because they’re in a noisy environment and don’t want to disrupt the class by unmuting their mic, they often end up asking questions after class, emailing the professor later, or relying on friends.These are the kinds of challenges I thought deeply about and recognized as central to this project. As designers, we have a choice: we can either elevate the experience for a select few, or we can consider the needs of everyone and create something that brings people together.
Working With the System, Not Against It
DESCRIPTION
I used to think creating new experiences meant reinventing the design wheel. But I’ve learned that meeting users’ needs is what matters most—even if that means working within established design systems. Rather than working around Zoom’s existing design language, I focused on integrating my changes to create a consistent, fluid experience that meets user expectations.
Quiet Needs, Bold Impact
DESCRIPTION
If someone doesn’t have access to a stable internet connection, lacks an electronic device, or can’t participate in the conversation because they’re in a noisy environment and don’t want to disrupt the class by unmuting their mic, they often end up asking questions after class, emailing the professor later, or relying on friends.These are the kinds of challenges I thought deeply about and recognized as central to this project. As designers, we have a choice: we can either elevate the experience for a select few, or we can consider the needs of everyone and create something that brings people together.
Designing Surveys with Purpose
DESCRIPTION
This was my first time creating and distributing a survey for a project. I learned how to write unbiased questions and when to use multiple choice, Likert scale questions, or open-ended responses. I also recognized the importance of pilot testing and making sure multiple people review the survey before it’s shared publicly. Overall, this experience helped me understand how to use surveys as a tool to gather meaningful insights and complement my secondary research.
SubTitle
DESCRIPTION
Body
Designing Surveys with Purpose
DESCRIPTION
This was my first time creating and distributing a survey for a project. I learned how to write unbiased questions and when to use multiple choice, Likert scale questions, or open-ended responses. I also recognized the importance of pilot testing and making sure multiple people review the survey before it’s shared publicly. Overall, this experience helped me understand how to use surveys as a tool to gather meaningful insights and complement my secondary research.
SubTitle
DESCRIPTION
Body
Designing Surveys with Purpose
DESCRIPTION
This was my first time creating and distributing a survey for a project. I learned how to write unbiased questions and when to use multiple choice, Likert scale questions, or open-ended responses. I also recognized the importance of pilot testing and making sure multiple people review the survey before it’s shared publicly. Overall, this experience helped me understand how to use surveys as a tool to gather meaningful insights and complement my secondary research.
If I had additional time, I would…
If I had additional time, I would…
If I had additional time, I would…
Room to Imagine More
DESCRIPTION
I became overly concerned with making a design that would be compatible with the Zoom interface, which limited my exploration and ideation of alternative solutions. If I had more time, I would have liked to explore a wider range of ideas, which I believe could have led to more interesting and unique outcomes for this project.
Bridging the Gap Both Ways
DESCRIPTION
It was a missed opportunity not to more deeply understand the teacher’s role and their feelings toward the shift to online learning. Just like students, they also had to adapt abruptly to a virtual environment. If I had more time, I would have loved to interview some professors about their experiences with online teaching during the pandemic, gather their feedback on my design changes, and consider their insights for future iterations of this project.
Room to Imagine More
DESCRIPTION
I became overly concerned with making a design that would be compatible with the Zoom interface, which limited my exploration and ideation of alternative solutions. If I had more time, I would have liked to explore a wider range of ideas, which I believe could have led to more interesting and unique outcomes for this project.
Bridging the Gap Both Ways
DESCRIPTION
It was a missed opportunity not to more deeply understand the teacher’s role and their feelings toward the shift to online learning. Just like students, they also had to adapt abruptly to a virtual environment. If I had more time, I would have loved to interview some professors about their experiences with online teaching during the pandemic, gather their feedback on my design changes, and consider their insights for future iterations of this project.
Room to Imagine More
DESCRIPTION
I became overly concerned with making a design that would be compatible with the Zoom interface, which limited my exploration and ideation of alternative solutions. If I had more time, I would have liked to explore a wider range of ideas, which I believe could have led to more interesting and unique outcomes for this project.
Bridging the Gap Both Ways
DESCRIPTION
It was a missed opportunity not to more deeply understand the teacher’s role and their feelings toward the shift to online learning. Just like students, they also had to adapt abruptly to a virtual environment. If I had more time, I would have loved to interview some professors about their experiences with online teaching during the pandemic, gather their feedback on my design changes, and consider their insights for future iterations of this project.
