PERSISTENT BACKSTAGE - AIRMEET

Back to Projects

Airmeet is a virtual conferencing platform primarily focused on marketer personas to generate high-quality leads by conducting webinars and large-scale, multi-track, branded events.

Backstage is a space for hosts to prepare speakers to reduce anxiety and technical glitches prior to going live. Any issues related to audio, video, screen sharing, etc. from the speaker side are tested and rectified in this space by the hosts and organizing team members so that there is a seamless experience for attendees, speakers, and hosts.

At the time of this requirement, session backstage existed only when the session was yet to start or paused. Once the session is live, the session backstage does not exist.

Problem statement

While live, when an unexpected audio/video/screen share issue occurs with any of the speakers, there is no way to rectify it immediately. They ended up depending on other platforms (phone calls, WhatsApp, Google Meet, Airmeet’s support lounge, etc.) to resolve the situation.
When event organizers or hosts needed to privately discuss something, such as managing sessions, etc., there were no options while the sessions were live.
Speakers who joined late landed directly in the live view, where the audience could see and hear them. This generated anxiety for both the hosts and the speaker.

My role

Spearheaded the project and team throughout the process (design team: myself as lead and mentor, 1 interaction designer, and 1 visual designer).
Actively involved in analyzing, defining the scope, and brainstorming design approaches.
Reviewed and improved the design outputs regularly, so as to minimize loopholes and edge cases.
Facilitated discussions with customers, product managers, and leadership.
Took the initiative to validate designs with users and conducted internal UAT sessions.

Design process

1. Problem analysis

Analyzed usability issues and potential technical glitches around onboarding speakers, preparing speakers, and interaction needs while the session is live. Details of the analysis are:

I analyzed all the customer communications (Slack channel feedback, Events+Support team documents, Freshdesk tickets, Gong calls, etc.) connected to the above-mentioned scope areas.
Identified the users affected and looked at their full story sessions in order to understand their expectations.
I conducted sessions with a few customers who had feature requests connected to the issue to understand more details and get validation on the problem statements.
The above-listed problem statements are refined ones based on our analysis.

2. Compete study

We analyzed direct competitors like Streamyard, Zoom, Zuddle, etc. to see how they are solving the same or similar problems.

Streamyard

The greenroom is like a waiting area for speakers.
Hosts can have a 1:1 call with speakers for any troubleshooting needs.
Hosts can then seamlessly move the guest from the greenroom to the studio. and vice versa.

Pros

One-on-one troubleshooting anytime during the event

Cons

Multiple people cannot be in the backstage area at the same time.
Late entry to the event will not land them backstage.
People in Greenroom cannot see what is happening on stage.
Common chat or communication does not exit.

Zoom

Divided into two sections: the webinar and the backstage
Can freely move between webinar and backstage
People on the backstage can communicate between themselves and can also see and listen to webinars.

Pros

You can move multiple panelists or all panelists at once.

Cons

The host cannot manage or move speakers; individual control of movement
Independent spaces, which create confusion

Zuddle

Two tabs with individual audio controls
People on backstage can communicate with each other, both audio and video, and can also listen to what is happening on stage.

`Pros

Clearly defined spaces
Multiple people can be selected and brought on stage at the same time.

Cons

When the user is moved to the stage (from backstage), they become directly visible on stage.

3. Design direction for Airmeet's persistent backstage

Clearly defined spaces (backstage and live stage)
Multiple people can be selected and brought on stage at the same time.
Easily move people between the spaces.
Should be able to hear or see the engagement in both spaces.
Private chat to be used to communicate between spaces

4. Designs

The designs focused on:

Preparing the speakers prior to going live
Smooth transition of hosts and speakers from backstage to live stage and vice versa
Fixing the troubleshooting needs while a session is live, if any one of the speakers gets in trouble with their audio, video, screen share, etc., without hampering the live session.
Enabling the co-host to pull the affected speaker to the session backstage and rectify issues.

There were two layout approaches debated to proceed based on layout and IA w.r.t. backstage and live stage.

Approach 1: The bottom tray is to be dedicated as backstage space, and the top video grid is to be considered stage.

Approach 2: Tab segregation between backstage speakers and live stage speakers. The stage view will always be on top of the of the video grid.

Approach 2 was preferred over Approach 1 for the following reasons:

In approach 1, the speakers listed on the tray were from both spaces (backstage and live stage), which generated confusion. In order to avoid this, a sub-approach was tried in which the on-stage speakers would not be listed in this tray but would be available only on the top video grid. The problem with this was that when the number of speakers was high, there was a collapsed view for not-so-active speakers, and over all, any actions on speakers were getting tricky.
Multi-select action of moving speakers to stage and vice versa was a need and was getting tricky in approach 1 as the tiles are mixed from both backstage and live stage.
There was a need for volume control in both spaces, especially for speakers and hosts at the backstage. The volume controls were scattered, and the on-stage volume control icon was getting overlapped with the video grid on smaller screens.

Happy flow:

1. Hosts prepare speakers at the backstage, do any last-minute touch-base before going live, and rectify any confusion and technical issues.

2. Host herself, move to the stage, start the session, and greet attendees.

3. At the right time, the co-host moves the rest of the speakers to the stage. 'Move to Stage' CTA will also be available on hover for each speaker card on the backstage tray. Note: The main host can also perform the same actions while her A/V is still active on live stage.

4. Speakers are actively involved in the session

5. The host or co-host moves Kelly to the backstage area as they noticed a glitch in Kelly's video.

6. Kelly (the speaker) is having a conversation with Rebecca (the co-host) at the backstage to rectify the issue.

7. Kelly shares the screen, Rebecca helps in resolving the issue, and Kelly is moved back to the live stage.

Example scenarios where immediate troubleshooting might be needed:

If there is a device selection issue that disables video, users can screen share and get it fixed from the expert.
If there is an issue with audio, there is a speaker chat, video, and screen share to solve the same.
If there is an issue with screen sharing, they can verbally communicate to get it fixed through a backstage conversation.

8. If speaker(s) join late and the session is already live, the host and co-host get notified of their arrival. The speaker(s) can have a quick prep before going live. This would also help in cases where the sessions planned are really long and speakers are allotted specific segments of time within the session, and if the speakers are VIPs with no time to wait until their time slot.

5. Design validations

The design approaches were validated with internal event organizers (marketers) and a few selected Airmeet customers.

In general, the feedback was great, as the proposals solved relevant problems they faced.
The approach in which there was clarity between stage and backstage space (the tab approach—the ones presented as screenshots above) was selected to proceed.
There was slight UI-level confusion on volume control and the way it was defined and represented on the UI.
There were few communication needs identified while a speaker was pulled to the live stage and vice versa.
Various approaches, along with the entire process and insights from design validations, were presented to leadership.

6. UAT, beta test, and final release

The developed versions were rigorously tested multiple times by product, design, leadership, and tech team members by doing role plays as speakers, hosts, co-hosts, etc., covering multiple edge cases while an A/V call was ongoing simultaneously on both the live stage and backstage. A few usability issues and bugs were identified, which got fixed in a short span of time.

The dev-complete versions of the feature were enabled in beta for selected communities, and the feedback was completely positive. The feature is going to be live by the end of May 2024.

Conclusion

This feature was well appreciated by almost all users whom we showcased the designs and beta, as it helps in reducing the anxiety of both organizers and speakers while providing a seamless experience for their attendees.
This feature became one of the top value propositions of Airmeet, and the GTM team uses it rigorously in their collateral and communications.
Through this feature, Airmeet would become one step ahead of our direct competitors in acquiring new business while making existing customers happy, as this is a core experience enhancement of the platform.