Independent Case Study
Redesigning Zoom’s Breakout Rooms
Team
Neel Saswade
Role
UX Designer
Timeline
2 weeks
Tools & Skills
User Research, Prototyping, Usability Testing
The Problem
Zoom’s breakout rooms are not designed for scale. Assigning participants to their proper breakout rooms in large (>100 people) meetings can be very time-consuming and leave people in the meeting waiting. Additionally, users want the functionality to be able to use breakout rooms for various use cases, such as speed dating events or rotating class discussion groups.
This problem leads us to incite the question:
How might we re-design Zoom’s breakout rooms for power users, to work seamlessly in large meetings, and serve advanced use cases?
My Design Roadmap
Understanding Power Users
I conducted two user interviews and secondary research to learn more about Zoom’s users and their experience with breakout rooms.
For the interviews, I spoke with the president of a club at Berkeley that used breakout rooms when recruiting new members. I also spoke with my former Teaching Assistant who used breakout rooms for setting up discussion groups in my Cognitive Science course during the pandemic.
Who uses zoom and what that means for the redesign
Zoom has virtually been used by almost everyone. The platform is also used in a wide variety of settings: Education, Business, Sales, Social Settings, and Personal Use. This means my redesign must be accessible for all ages (kids to senior citizens) and backgrounds.
What scenarios should I consider?
Gathering all the various use cases helps me design a solution that works universally, serving multiple scenarios.
Speed dating event
Event of 100 people, where people are paired up in breakout rooms, one “round” is ended, and a new round is started where people are paired with a new partner
A large classroom, with rotating student groups
A class of 100 people, where the professor starts a breakout to send students into small groups, and TAs into a TA room. In subsequent breakouts, the professor should have the option to form new groups or keep the same groups, but easily see if there are any students whose group-mates have left, and reassign them
Info sessions & Workshops
A large event where people can easily be sent to rooms based on their desired interest or speakers and seamlessly rotate (if needed) to other stages of the event.
Pain Points of Current Breakout Room Users
Manually assignging people to rooms takes a long time
Not being able to close rooms faster than 60 seconds
Calculating how many rooms to create takes a lot of time
Zoom’s Implementation: the good, the bad, and the ugly
I performed an evaluation of the strengths and weaknesses of Zoom’s current implementation of breakout rooms. Doing so helped me find specific areas of improvement for the redesign and identify areas I do not need to change.
Creating Breakout Rooms
Assigning Participants
Changing the timer
The good: Very simple, two step process for creating rooms
The bad: First time users unsure what comes after this step
The ugly: Hard to calculate how many breakout rooms one needs when the meeting is really big and you want a certain number of groups
The good: Intuitive UX in assigning people and viewing all rooms
The bad: Can be visually cluttered at times, increasing cognitive load
The ugly: Terrible for scaling. With 200+ rooms, it’s hard to assign everyone efficiently
The good: Zoom does offer functionality to change the timer
The bad: Poor visibility of being able to do so
The ugly: Many frequent users don’t even know you can do this
Guiding Insights
Keep it Simple
Decrease the additional cognitive load on Zoom’s consistent users as much as possible
Design for Scalability
The redesign should work for meetings of all sizes (from 10 - 400 participants)
Design for Speed
Zoom meetings are synchronous events and hosts need to work fast to not keep them waiting for too long
Serve Universal Cases
The redesign should work with multiple scenarios while not being too optimized for one specific use case
Build upon what Zoom already does well
Designing something new from the ground up will confuse regular users who have formed a mental model of the zoom interface so maintain Zoom’s current visual design and structural flow elements
Features to Include
Assigning Roles
Shuffling Rooms
A Method to Handle Late Participants
Designing the Flow
Step 1:
Feature Implementation Brainstorm
I brainstormed various approaches to implement each feature that needed to be added to the flow or re-designed. After doing so, I weighed the pros and cons of each feature to inform my user flow.
Step 2:
Selected Features Stitched into a Storyboard
I drafted a user flow storyboard with all the selected features within a scenario to see how all the features could work together. I created storyboards for every use case. Below is the speed dating scenario.
Step 3:
Low Fidelity Sketches
I translated the cells from the storyboards into a general, universal wireframe. I analyzed similarities between use cases to generate screens that accomplish user goals while remaining intuitive. I also factored in the information architecture and visual hierarchy of each feature.
Step 4
High Fidelity Prototype
Each Low Fidelity screen was mocked into a High Fidelity prototype screen. To reduce the additional cognitive load on Zoom participants, I matched the visual design of Zoom’s current User Interface. I optimized smaller User Experience pathways that were not covered in the Lo-Fi’s
My Solution
Shown with the Speed Dating Scenario
Let us say you are the host of a speed dating event. You have 142 expected participants, 71 males, and 71 females. People are paired up in breakout rooms, one “round” is ended, and a new round is started where people are paired with a new partner
Below is a full High-Fidelity flow of what this scenario can look like with my implemented redesign of Zoom’s Breakout Rooms
Meeting Host Action 1: Launching a Survey to Assign the Roles: “Guys” & “Girls”
Since speed dating events typically have two people talking to each other, we want to assign roles that correspond to each partner, so every “Guy” can meet every “Girl.” I designed a survey to let meeting participants choose their role. Roles can also be password protected.
(note: I am aware and fully support all forms of gender pronouns. For the sake of simplicity in this example, I am using “guys” and “girls”)
Assigning Roles Through a Survey
Design Rationale
Zoom users are familiar with selecting from a menu of options in their “polls” feature so a survey to select their role should feel intuitive
Since assigning roles is psychologically mapped closest to “participants”, the button to launch assign roles is located in the “participants” tab
A modal temporarily pops up once the survey is launched for the host to view each role fill up, and see who has not completed the survey yet
Participants not assigned to a role will be assigned to a “general” role
Hosts have the ability to set the title text of the survey to tailor the role selection process to the given activity
Feasibility in other scenarios
A professor could have a password-protected “TA” role and a student role
Further Explorations
Should we let meeting participants hold multiple roles?
Meeting Host Action 2: Creating the Speed Dating Breakout Rooms
In the current implementation of Zoom’s breakout rooms, it can take a lot of time to figure out how many rooms to create for the desired group size. Now, you can easily create rooms by stating the group size! We want to create rooms for groups of 2, which grants us 71 breakout rooms.
A New Way of Creating Breakout Rooms
Design Rationale
To prevent confusion for the regular zoom user, this feature was added as a simple selection statement, similar to how breakout rooms are currently created
Visibility of the effect of group size is shown directly underneath the selection statement, showing how many rooms are created
Overflow - rooms that cannot have the desired group size are made visible to the user
Feasibility in other scenarios
A professor may want to create teams of 5 in a 230 person lecture to present various topics
Meeting Host Action 3: Assigning 1 Guy and 1 Girl to each breakout room
Now that we have our rooms created, let’s assign one guy and one girl to each room. Since we assigned roles to our meeting participants earlier, we can see each role and its constituents at the top of the breakout rooms modal. By clicking assign for each role, we can easily send 1 guy and 1 girl to each room.
Efficiently Assigning Roles to their Breakout rooms
Design Rationale
“Participants” intuitively placed above rooms in the breakout rooms modal, not obstructing much of the original UI
A focus on speed - sending participants to their respective breakout rooms can take as little as 4 mouse clicks
Assign selection state options were thought from all use cases from user research phase. They include
sending a number of desired participants per room
sending desired participants to a certain room
creating a new room just for the participants
leaving them in the main room
User Interface of “Participants” is very similar to the current “Rooms” section to decrease cognitive load and increase intuitive trainability of new feature
Feasibility in other scenarios
A professor may send all Teaching Assistants to their own room, or assign a room to have two TAs and 5 students
Meeting Host Action 4: Setting a recurring shuffle for both parties to meet new people
Alright. We’ve got one guy and one girl in each breakout room. Now, let’s set a shuffle for guys and girls to meet each other. If we click the shuffle rooms tab and select shuffle rooms for multiple rounds, we can set 5 rounds of speed dating, 10 minutes each. Once we’re done we set the shuffle to launch once the breakout rooms open.
Shuffling Breakout Rooms
Design Rationale
Hosts have the option to shuffle the rooms once, or set a recurring shuffle for multiple rounds
Some hosts may only want to shuffle rooms once, or on command
In a recurring shuffle, the shuffle algorithm will continuously create unique groups until there are no more unique groups. Then, groups will have repeat members
The number of unique groups is indicated in subtitle text
Hosts can choose how many times to shuffle rooms and for how long
In “Advanced”, hosts can choose which participants to include in the shuffle. In this scenario, we include both guys and girls
Feasibility in other scenarios
A professor may continuously shuffle student groups as an icebreaker, while not shuffling the Teaching Assistants
Meeting Host Action 5: Opening the breakout rooms and monitoring the shuffle
We are good to go! We’ve got one guy and one girl in each room, and we’ve set the recurring shuffle. Let’s open the breakout rooms.
Now we can monitor the status of the shuffle by changing the time left, pausing the shuffle, ending the shuffle, editing the shuffle, or shuffling now!
Monitoring the Shuffling Breakout Rooms
Design Rationale
Once rooms are opened, hosts should have the ability to pause the shuffle, in case they have an announcement or want to bring everyone back into the main room for a moment
The shuffle menu bar is placed near other call to action buttons (“broadcast message to all”) so hosts will naturally venture there to make changes to the shuffle
Status of the shuffle is displayed by indicating the given round, and how much time is left before the next shuffle - visibility of system status
If meeting hosts do not want to wait for the next shuffle, they have the ability to shuffle the rooms whenever they’d like by clicking “Shuffle Now”
For scenarios where they may be running behind schedule
Meeting Host Action 6: Handling a late participant
Patrick has joined the speed dating event late. Shame on him. Since there are only 2 minutes left in this shuffle, he probably can’t find love in that amount of time. Luckily, we can easily assign him to the next round of the shuffle. Patrick will be in his own breakout room until those two minutes are up, and then he will be paired with a partner for the next round.
Quickly Assigning Late Participants
Design Rationale
Instead of scrolling for long periods of time to find the right breakout room, we can now easily search for the room we want to assign late participants to, or assign them to the next round of the shuffle (if there is a shuffle in motion)
The search bar makes it easy to find rooms based on:
Participant name
Group size
Room name
Feasibility in other scenarios
A professor can send a late student to a room with their respective Teaching Assistant
Designing For Scale
Making it easier to deal with larger breakout rooms and meeting sizes
A search bar was added to deal with the scale of larger breakout room situations
Instead of spending a lot of time scrolling to find their desired room, hosts can use the search bar to quickly search for rooms by
name
room size
room name
Improved Visibility of Countdown Timer
Meeting hosts could always change the countdown timer after closing the breakout room. However, most did not know it existed
To improve the visibility of the countdown timer, I changed the settings gear icon in the bottom left corner of the breakout rooms modal to a timer icon, indicating that anything time related can be found here
Iterations from Usability Testing
I conducted two usability tests. Based on the feedback, I implemented changes simplifying the options of certain features. The biggest change I made involved reducing the options of the shuffle feature, as the wording was confusing research participants. For the breakout rooms modal, people were confused by the placement of “shuffle,” and wanted a way to reset any mistakes they made when assigning participants. I moved the shuffle button to the rooms bar, to visually indicate its purpose while changing the wording to “shuffle rooms,” and I added a reset button near the “Participants” bar.
Thank you for making it this far!
This project was one of the most challenging design projects I have ever taken on. Since Zoom’s breakout rooms have so many moving parts, conceptualizing how all the new features would work together without increasing the cognitive load of the meeting host was difficult. Anytime I made a small change, I found myself having to think of all the ways that change would affect the existing design decisions I had made. As tough as this was, it was a great and rewarding practice in design and prototyping.
Next steps for this project include collaborating with other designers and engineers to think of more use cases where this implementation would fall short, and deciding whether to spend resources to include that use case in our implementation or not to. Once the prototype has had more feedback, I would continue a cycle of usability testing and adjusting the prototype until the hypothetical project timeline is completed, or the product is at a customer facing level of usability.