Internship Project

True Vroom

Breakout Rooms
FEATURE

Breakout Rooms Feature

I interned at True Digital Group as a UX/UI Designer from March to June 2023, primarily working on the VROOM project—an online meeting platform catering to both internal and external users. During my internship, I chose to develop the Breakout Rooms as an additional feature for my intern project.

What we did

After being a leader in conducting usability testing and implementing user feedback into the redesign, I participated in meetings via VROOM. During this time I recognized a need for improved participant engagement and a collaborative environment. So I conceptualized and developed the Breakout Rooms feature as part of my internship project.

Why we did

Throughout the project, I conducted research, performed competitive analysis, engaged in ideation, created wireframes, and completed the design stages, ensuring alignment with the team's primary design framework.

Additionally, close collaboration with a developer allowed me to assess the feature's feasibility. These discussions played a crucial role in shaping design decisions and ensuring the practicality of the proposed feature.

How we did

Breakout Rooms Feature Design Process

Ideation

Research

Design/UI

Prototyping

Testing

Ready to DEV

Problem

VROOM doesn't have the Breakout Rooms feature, which makes it hard for people to work in smaller groups during virtual meetings. This limits their ability to have focused discussions, work on specific tasks, and make the most of their meetings.

To improve virtual meetings and make them more effective and enjoyable, we need to add breakout rooms to VROOM.

Challenge

Time constraints - Working on the Breakout Rooms feature project, I found it more complex than expected. Despite dedicating 2.5 months to ideation, research, design, and prototyping, I couldn't complete all the necessary steps. There was no usability testing, and the project wasn't ready for developers

The primary design framework - I found it challenging to design the additional feature based on the primary design that the team had done earlier. I had to ensure its alignment with the established design, style, and user experience of the primary product without disrupting the overall interface.

Research

What is Breakout Rooms?

  • A small, private space designed to facilitate group interaction. 

  • Often used for smaller meetings or as an overflow area in case the main event becomes overcrowded. 

  • Provide some privacy and comfort so that attendees can relax before returning to the larger group. 

  • Great for hosting presentations, workshops, and other activities related to the conference or meeting.

The goal of competitive research

Focus on competitive user flows, visual design, and navigation.

Competitors - ZOOM, Google meet, and Microsoft Team

  • Identify strengths and weaknesses of competing breakout room features.

  • Assess user experience and usability.

  • Explore diverse features offered by competitors.

  • Identify opportunities for improvement.

  • Benchmark against competitors.

COMPetitive user flows

Competitive analysis

I created user flows above for our competitors to understand how users engage with similar Breakout Rooms functions. These flows helped analyze differences among the three competitors, evaluating the complexity of their processes, strengths, weaknesses, and standard functionalities.

Subsequently, I conducted a competitive analysis to identify functions that could benefit our product.

This analysis laid the groundwork for creativity, guiding our strategy to make our Breakout Rooms unique and more beneficial for our users.

Findings

The standard functionalities that the three websites have are 

  • Set up manually and automatically assign participants to each room

  • Set up the timer

  • Rename the breakout room 

  • Recreate room

  • Move the participants to the other breakout rooms

  • Make the message announcement

  • Have the option ‘ask for help’ for the participants

  • Once the breakout rooms start, the moderator can only view the breakout room lists. If they wish to see the participants, they must join each breakout room individually.

  • The visual designs are clean

The unique functionalities 

Be able to exchange with the specific participant

Be able to shuffle participants to the room assignment

  • 30 seconds countdown without setting

  • Click and change the room name directly within the room

Have a separate window for the participant list and be able to manually change the room or participant unassignment

Ideation

The functions that VROOM Breakout Rooms should have as the standard functionalities

  • Set up manually and automatically assign participants to each room

  • Set up timer

  • Rename the Breakout Rooms

  • Recreate room

  • Move the participants to the other Breakout Rooms

  • Make the message announcement

What makes it different from the competitors?

  • Reduce the step of creating Breakout Rooms to be in few clicks

  • Offer the automatically create Breakout Rooms as a default

  • The moderator still be able to manually adjust the participants in each room as needs

  • Be able set up Breakout Rooms within the same screen

  • See the participants list in each room within the same screen

The user flows of Breakout room for VROOM

After generating ideas from research, the competitor’s user flows, and competitive analysis, I created the user flows for VROOM Breakout Rooms. These flows were based on standard functionality, as well as unique ideas differentiating it from competitors.

Idea of Breakout Rooms main screen

I sketched some ideas for the main screen of the Breakout Rooms to visualize how the moderator will see and utilize it.

Feasibility discussion with Developer

During the feasibility discussion with the developer, I discussed my design ideas for the main screen. 

Eventually, we reached a final decision and proceeded in the right and feasible direction to continue with the development of the hi-fi version.

Wireframes
Moderator path

  • Meeting room

  • Click 'More Menu'

  • Click 'Other settings' to see 'Breakout Rooms'

  • Breakout Rooms mini guide

  • Create Breakout Rooms

  • Generate participants in each room

  • Manually put participants in each room

  • Open Breakout Rooms

  • See participants in each Breakout Room

  • Join Breakout Room

  • Delete Breakout Room

  • Rename Breakout Room

  • Click 'Text Announcement'

  • Text Announcement

  • The announcement has been sent

Design/ UI

Hi-Fi

Create Breakout Rooms

Breakout Rooms created

Prototyping

Create Breakout Rooms

Step Flows

  • As a moderator, after creating a meeting then go to the ‘More option’ on the main menu bar.

  • Select ‘Breakout Room’ to set up the Breakout Rooms.

  • On the settings page of Breakout Rooms, the user will see how to use Breakout Rooms instructions.

  • First, select the number of rooms you want to create, the default is 2 rooms.

  • The room timer setting is optional, the timer default is 5 minutes.

  • After clicking ‘Create Breakout Rooms’, the system will automatically assign participants in each room evenly.

  • You can manually adjust or move the participants later.

  • Click ‘Start all Breakout Rooms’ to start.

Remove the participant to the main room

Step Flows

  • Go to the ‘More menu’ of the participant's name.

  • Click ‘Move to the main room’ to move the particular participant to the main room.

  • The participant has moved to the main room.

Edit room name

Step Flows

  • Click on the Breakout Room name to edit to the name you want.

  • Click anywhere outside the name field or hit ‘Enter’ to confirm the change.

  • The Breakout Room name has successfully changed.

Join and Leave breakout room

Step Flows

  • Click ‘Join’ to join the particular Breakout Room.

  • The notification will pop up in the bottom left corner, indicating that you have joined this Breakout Room.

  • Click ‘Leave room’ to leave this Breakout Room.

  • The moderator is back in the main room.

Text announcement

Step Flows

  • Go to ‘Announcement’ to text announcements to all rooms.

  • The message alert modal will pop up in the center of the screen.

  • Click the text field, to input the text you want to announce to all rooms.

  • Click ‘Send to all rooms’ to announce the message to all rooms.

  • The text announcement has been successfully done.

Close all rooms

Step Flows

  • Click ‘Close all rooms’ to close all the Breakout Rooms that you created.

  • Each room will be notified, and 30 seconds counting down as a default, to wrap up the session before the room closes.

  • Everyone has come back to the main room.

Participant Flows

Design Development based on the Team Recommendations

Design Discussion with Team

During the Breakout Room project, we talked with the team to improve how users navigate and use the interface. We aimed to make it user-friendly and visually attractive.

Iterations

Create Breakout Rooms

Previous Design

Version 1

Version 2

Version 3

Version 4

Create Breakout Rooms

Current Design

The Design Changed Background

After discussing with the team, we decided to simplify the Breakout Room creation process. 

Instead of giving users the choice between automatic or manual assignment, we made it easier by automatically assigning participants based on the number of rooms the user wants to create. 

This change saves users time and effort.

However, we still allow manual adjustments if users want to customize the rooms by moving participants around. 

This provides flexibility without adding complexity, making it more convenient for users.

Iterations

After Creating Breakout Rooms

Previous Design

Version 1

Version 2

Version 3

After Creating Breakout Rooms

Current Design

The Design Changed Background

The team suggested a clean design to make users feel comfortable while using the feature.

We added a clear header to indicate the user's current location and the ongoing process.

After creating the breakout rooms, participants are automatically assigned based on the number of rooms the user wants to create. Users can also move participants around if they wish.

If there are many breakout rooms, users can easily search for a particular participant's name and make changes if necessary. This allows users to have more control and customize their breakout room assignments.

Iterations

After Starting Breakout Rooms

Previous Design

Version 1

Version 2

Version 3

Current Design

After Starting Breakout Rooms

The Design Changed Background

After discussing the design with the team, I received valuable insights.

To enhance usability, we made the action button more visible and provided clear indications on what can be edited. Users can now simply click on a participant's name to edit their details.

In order to simplify the design, we decided to remove the action and status indicators for participants in each room. Instead, we incorporated a 'more menu' option, allowing users to easily remove participants and return them to the main room.

These design improvements aim to make the user experience more intuitive and streamlined.

What I learned

Project Scope Management:

I learned that managing project size is crucial. Even though I invested significant time, incorporating Breakout Rooms into VROOM was more complex than anticipated. Breaking down large tasks into smaller, manageable parts is essential for future projects.

Adapting Design Frameworks:

Adding new features to an existing design was tough. It's tricky to be innovative while keeping the design consistent. For upcoming projects, focusing on blending new features smoothly without disrupting the user experience is key.

Collaboration and Communication:

Better teamwork and communication can make a big difference in project success. Having clear communication, regular updates, and feedback helps solve problems faster and keeps things running smoothly.