Breakouts in Rooms

Since the Covid-19 crisis a majority of the people on earth had to adapt to remote working, during the lockdown but even after that. So there has been an over reliance of videoconferencing solutions to remedy this. A lot of experimentation and solutions from digital companies to facilitate the work from home. But many of these feature are just functional, we use them because they exists and they are stable, but they are very complex to use.

Facebook has therefore decided to direct many of these teams and projects towards videoconferencing solutions and functionalities, this time trying to offer something simple and even fun to use. Because this is how remote working will become really enjoyable.

It was in this context, during the 2020 summer, that I did my internship at Facebook, in the Portal for Work team. This internship was in remote working due to the circumstances, but that didn't stop me from meeting incredible people and carrying out an ambitious project that could really simplify the life of some users during these difficult times, and even after.

The problem

Today Facebook proposed solutions for having video call at any moment with your friends, family or colleagues. But inside these calls today it is not possible to have an aside conversation with few other members of the meeting. This would be very useful, especially in a context of virtual training.

That is why the team that organize the internal virtual training at Facebook reached out to us about this feature.

My role

My role for this project was to make the solution concrete and make people excited about it, in order to create a potential team to build it in the future. For that I was in charge of the research, the product thinking, the design explorations, the elaboration of prototypes but also the facilitation and preparation of a workshop.

I was part of a team with 6 designers, 1 researcher and 1 product manager. For my project, I collaborated closely with Adnan another new product designer in the team, and with Florian my internship mentor who helped me in all domains: design, hard skills but also soft skills.

The solution

The solution we found was to implement breakout rooms to the current solution, Workplace Rooms. But what is a breakout ?

  • It is an event, a discussion or a workshop that serves a smaller portion of a larger agenda. More simply it is a small meeting related to a main one.
  • A breakout is often time bounded and after a specific period of time participants have to go back to the main event.
  • It is a good habit for a breakout is to have a clear objective like the completion of an exercice, because there is not always an host or a designated speaker, but also because the goal of a breakout is to go further into one topic.

Here is what breakouts look like inside a video call. The meeting host is in red and the participants are in blue. I created this little animation in order to help the teams and people at Facebook to understand the idea of breakout.

SIMPLIFY REPRESENTATION OF THE FUNCTIONNING OF BREAKOUTS INSIDE A VIDEO CALL

The goal for this feature is to bring side conversations to Rooms. Today breakout rooms exists in many other video conference solutions but these are just functional features. Our goal was to make it simple and even enjoyable. In order to achieve this, the plan is to create a delightful, visual, simple and integrated solution.

We wanted the feature to be fully adopted by the training program teams inside Facebook. But we also want it to open the collaboration with other use cases, because we think this can be useful in many other scenarios.

The process

Here are the steps I followed to build this feature and solution:

  • Research
  • Personas
  • Workshop
  • Design Brief
  • Wireframes
  • Design explorations
  • Tests
  • Hi-fi screens
  • Final product

Research

I first analyzed the current video conference solution of Facebook, Rooms, in order to integrate the new feature inside it in a perfect and natural way.

LIST OF THE COMPETITIVE SOLUTIONS THAT PROPOSES BREAKOUTS FEATURES

I also conducted competitive analysis to discover what are the current state of the breakouts feature and what are the key points to work on to propose the best solution at the end. During more than one week I tested Zoom, Cisco WebEx, Blue Jeans, Samba Live, Adobe Connect, Icebreaker and Gather. And the learning serves me to establish some guiding principle:

  • The experience must respect the existing pattern of breakouts features, like manual and automatic assignment, broadcasted messages or countdown … for users that already use the feature in other solutions to have a smooth transition.
  • The experience must be super simple and requires no deep knowledge of Rooms to use it.
  • The experience must be as free as possible, while respecting some hierarchy between the host and the participants.
  • The experience must enhance collaboration and productivity of the teams that use the feature.

Personas

An internal virtual training program at Facebook have very specific and assigned roles for those involved. We choosed to focus on the 2 most importants for our proposition of side conversation:

Meeting host
He is the administrator of the call, and he owns it. He can also be the teacher and the main speaker and decides who can speak and when. Finally, he also manages the timing of the session and decides when it starts and when it ends.

Participant
He is the learner, he is in the call to attend an event. He wants to learn new things, practice, or discuss with the teacher and his classmates. He is subject to the timing and not taking any decisions.

Ideation Workshop

Between the research and explorations phases; we organized an ideation workshop in order to keep the team engaged and get them excited about our project, but also to find new and amazing ideas.

WORKSHOP PROGRESS

We invited people from different teams in Facebook and we make them ideate about our project and solution. To make them feel the pain to have side conversation without the native feature we divided them into 2 rooms. Each group were also in charge to ideate for one of our roles, participant and host.

This workshop was above all, a lot of preparation, we wrote a playbook, we prepared the slide deck and we practiced many times the week before.

OUTCOMES OF THE WORKSHOP

After this workshop I worked for several days in the analysis of the results. We gathered many ideas represented in wireframes and notes from all the participants. So I transformed each of these ideas into a card on Figma and then sorted them according to the main themes. We quickly understood that thinking in terms of personas for this phase was not relevant, because depending of the use cases, the roles can be different. So we focus our card sorting into 3 main actions for breakouts:

  • Joining & leaving: the ability to join a breakout at any moment but also to go back to the main call or switch between breakouts easily (mainly for participants in our education use case).
  • Breakouts creations: the ability to create and assign specific users to breakouts (mainly for meeting host in our use case).
  • Breakouts management: the ability to set up and implement different options for each breakout (mainly for meeting host in our use case).

Design Brief

With our research, the workshop and the discussion with the virtual training team at Facebook we now had a list of features and actions for each roles. We have to adapt few of them for a stricter use according to the wished of the team. For example, now the meeting host decide the assignment of each participant.

We presented that into a design brief that included the context, principles, informations, and the prioritized features for the solution. This document were the basis of our project.

I focused myself on joining & leaving experience and the list of the prioritized features was this one:

  • P0: Allow participants to join their breakout (the one where they are assigned).
  • P0: Allow participants to return to the main call from a breakout.
  • P0: Show a list of all available breakouts with participants inside each.
  • P1: Provide a unique title and description for each breakout.
  • P1: Ability to contact the host from any breakout.
  • P1: Show the time remaining for a discussion inside a breakout.
  • P2: If participant are removed from a room, having a clear notification to inform them.
  • P2: Help me feel connected to the larger group when I'm in the breakout room.

The P0 features corresponded to the MVP and I focused on these ones for the explorations and the prototypes.

Wireframes

As for the design brief but also for the rest of the project I focused on the joining & leaving experience for the wireframes and explorations phases. I obviously first worked on the 3 most important feature, the ones for the MVP.

The main goal was to identify areas, in the actual and existing solution interfaces, where we can add interactions for the breakouts experience. Initial audit and discussion with the other design teams were very useful at this point.

Actual and future users don't have to be lost in the experience that is why the feature must be efficient but discrete. The breakout must also be as similar as possible to the main meeting.

WIREFRAMES EXPLORATIONS FOR THE DIFFERENT SCREENS OF THE FEATURE

That is why in the wireframes I proposed several solutions that are mostly secondary informations in the interface.

First, for the joining experience, there are many solutions:

  • A breadcrumb that indicates the assigned breakout for the participant.
  • A prompt that pops in the middle of the interface with a message and a CTA to join the room.
  • A notification or a card in the call grid.

Then proposing an overview of all the breakouts of the video call is a little bit tricky because even if today participants are assigned into one specific breakout, we thought it could be useful for them to see the other ones to bring context and immersion. But also in a logic of scalability where in a more or less near future and in some use cases, participants will be able to join any breakout. For this list of breakouts I proposed:

  • A prompt with a simple list of the breakouts.
  • A sidebar to showcase the list of breakouts right next to the video previews, in the main screen.
  • A spatial representation to understand that all these rooms belong to a main big one event.

Once participants are into the breakout, they need the ability to go back to the main call. I explored:

  • A breadcrumbs the help to understand that the breakout is linked to the main call.
  • A card inside the video call grid.
  • A prompt that appears when the breakout is ending.
  • The existing "hang up" button transformed into a "leave breakout" button.

Design Explorations

In order to help the teams and people at Facebook understand and visualize the feature and idea, I started to build and share high fidelity end-to-end flows.

ANIMATIONS

I explored some animations and transitions to help users understand they are moving from one room to another, but inside a same main event.

EXPLORATIONS FOR THE TRANSITION BETWEEN THE MAIN CALL AND THE BREAKOUT

BREAKOUTS CARDS

I also explored some cards for breakout, to allow participants to join a breakout from a sidebar or the video call grid. There are a lot of informations that we can put into this kind of card, but we thought that the most important ones were:

  • The name of the breakout.
  • A representation of participants that are currently inside.
  • A button to click to join the room. That can be a simple button that is always in the card, but also a button that appears at hover, or even the entire card can be clickable.
EXPLORATIONS FOR THE BREAKOUT CARD

END TO END FLOWS

I collaborated closely with Adnan of the explorations of multiples end to end flows, because the participant and meeting host experience must be unified and coherent. I helps us and the teams to understand the interactions and actions during the use of the feature and therefore identify any issue of problem in order to adjust the interfaces.

EXPLORATIONS FOR END-TO-END FLOWS

From low-fidelity flows we gradually moved to realistic ones bu using the Workplace Rooms Design System. Once I had 3 coherent flows for the joining and leaving experience I decided to organized tests in order to have feedbacks from real users.

Prototype testing and feedbacks

In order to help the teams and people at Facebook understand and visualize the feature and idea, I started to build and share high fidelity end-to-end flows.

PREPARATION OF THE TESTS

I signed up for an internal testing program at Facebook. We organized the sessions with the researchers by discussing a lot about our goals, the context and the feature.

We wanted from our testers to tell us what are their feelings and expectations about breakouts in a video call before even showing them an interface. And of course we also wanted them to test our 3 prototypes and share their feedbacks on what were the best way to join and leave a breakout.

So 9 people between 18 and 25 years tested our solutions and share their feeling with researcher in 1 hours recorded video calls.

PREPARATION OF THE TESTS

Like explained before the Learning Products team wanted strict and host-managed session, so our 3 prototypes are in this scope. But we, therefore, tested a more or less democratic ways to move between the rooms to see what is bearable for the participants in a virtual class context.

  • Prototype 1. The participant moves are managed by the meeting host, he is automatically moved to the breakout and moved back to the main meeting. He doesn't have any freedom on his moves, but he is still informed on what is happening thanks to prompts. The only action that he can have is clicking on the join button when it appears.
  • Prototype 2. When he is assigned in a breakout by the host, the participant is prompted and can decide to join now or later with the breakouts overview. From this overview window, he can only join his assigned room. Inside the breakout, he can go back to the main meeting at any moment thanks to a back arrow.
  • Prototype 3. When he is assigned in a breakout by the host, the participant receives a notification and he can immediately join the breakout or open the breakout overview. From this overview window, he can join any breakout. Once he is inside the room, he can go back to the main meeting at any moment thanks to the traditional "hang up" red button turn into a blue "leave breakout" one.

OUTCOMES OF THE TESTS

We realized few things thanks to this tests:

  • The term "breakout" was understandable for the users. For them it can be useful for large group call at work but also for education purposed that including planning or brainstorming.
  • They preferred the Prototype 3, where they had the better control over their movements.
  • The recommandations for the joining experience were to use a visible assignment message in the center of the screen and to let users have the choice of when they want to join their room.
  • About the leaving experience we had to consider using the back arrow button.

After collecting these precious feedbacks we discuss with the virtual training team but also with other designers about what to implement. I also continued to explore more and more solutions with Adnan.

Hi-fi screens

Finally thanks to all the ideas from the workshop, the design explorations, the feedbacks from the prototype testing and the discussions with my manager, Adnan, and all the other people from the group, I built the final prototype for the breakout feature.

About the joining experience, we decided to implement the notification to inform the participant he is assigned in a breakout. The recommendations of the workshop were to use a prompt in the middle of the screen, but we didn't have to forget that our initial goal was to propose a discrete and well-integrated solution. From this notification, the participant can join immediately or wait a little bit.

NOTIFICATION AND BREAKOUT CARD INTO THE GRID

At the same time as the participant receives the notification, he also sees a card of his breakout appearing in the video call grid. So he has the real feeling that his breakout is part of a larger event. We also choose to present only his assigned breakout, like that the participant is focus on his actions and tasks. This card allows him to simply and quickly has information about the name of the breakout but also who is currently inside thanks to the user's profile pictures. At hover a join button appears and the participant can jump into his breakout by clicking it.

BREAKOUT CARD AT HOVER

The breakout grid appears with a zoom transition from the card. This reinforces the feeling of belonging to an event that is smaller than the main one.

The interface of the breakout is very similar to the main call one. There are only 2 additional elements, the name of the breakout associated with the numbers of participants inside on the top left and a close button, a new way of leaving, on the top right. I implemented this new way of living because I thought that it was an even more natural way of leaving the breakout. It also matches really well with the zoom or de-zoom animation when the participant is joining or leaving his breakout.

At hover to the close button, there is a new sample of information that appears: the list of the participants currently in the main call. We thought it could be useful for participants to have context about that to decide when they have to go back.

INSIDE THE BREAKOUT - HOVER TO GIVE CONTEXT

Apart from leaving the breakout with the close button participants can also be forcibly brought back by the host. Indeed, when he decides to close the breakout sessions everyone inside will receive a notification with a one-minute countdown and a leave button. Then, participant can decide to leave now or wait until the end of the countdown and be automatically moved back to the main call.

COUNTDOWN WHEN THE BREAKOUT IS CLOSING

The final product

Here is a video that presents the final solution of breakouts. The scenario is this one:

  • You join the Room of a training program. The meeting host, who is also the teacher, introduces the subject and he organizes an ice-breaker.
  • Then he announces that he will split up the group into smaller sessions in order to work on different subjects. So from his side, the host creates and assigns participants inside multiple breakouts.
  • Once they are open, you can see that your breakout appears inside the video call grid and you receive a notification.
  • You decide to join from here, as well as the other participants.
  • Inside the breakout you can start to discuss and work on the exercise.
  • At a specific moment you have a question for the host. You verify if he is in the main meeting and you leave the breakout with the close button.
  • Inside the main call you ask your question and you simply rejoin your breakout from the breakout card.
  • You continue the exercise with your coworkers.
  • Once the time has ended or once the host manually closes the breakout, you receive a notification and everyone can go back to the main call.
VIDEO OF THE FINAL BREAKOUTS IN ROOMS FEATURE

Conclusion

Project review

Even if I stayed in my bedroom the whole time, this experience was fantastic:

  • The amazing project allow me to practice every aspect of a product designer profile. I accompanied all the necessary steps for the proper development of a project. That's why I think that the solution proposed at the end could really be useful and simplify the future of virtual training program. "Trust the process" as my manager Florian used to say.
  • I learned so many things about techniques, methodology, communication ... and a lot of other stuff.
  • I met amazing and so talented people that I was wondering what I was doing here for a very long time.
  • The only thing missing was not being able to really exchange with developers and accompany the production of the feature. I think it would have been very interesting and useful.

The future of Breakouts in Rooms

There are a lot of possible additional features to improve the global experience of breakouts in Rooms.

  • More options for the breakouts management like the possibility to rename the breakouts, add thumbnails and description.
  • Add some interactivity to make the experience even more natural, drag and drop users inside breakouts, communicate at any moment with anyone by chat, having precise timing for activities or a more intuitive way to switch between the breakouts.
  • I met amazing and so talented people that I was wondering what I was doing here for a very long time.
  • More freedom and permissions, for both host and participant, and adapt them to each session.

We developed this feature for a strict and structured use case, but there is also a real need for breakouts and side conversation for more social calls. That is why during the project the Messenger design team, who is also working on a concept similar to breakout, reached out to use to explore the possibilities to merge our different concept into a single and universal one.