Creating a Multi-Speaker Experience

Research

During the research phase, I focused on the speaker invitation flow and the livestream layout.

For invitations, I explored questions like: How would the livestream creator select multiple people at once? How can they remove a speaker after they’re done presenting? How does this flow fit into the existing livestream experience?

For the livestream layout, I considered how to visually accommodate a growing number of speakers. I needed a scalable approach to managing multiple participants in a grid while ensuring intuitive controls for camera and microphone settings.

Competitive Research

The project manager and I worked together to review platforms such as StreamYard, Zoom, Google Meet and Instagram. Each one carried its own unique set of features. StreamYard stood out for its high level of customization and intuitive flow, while Instagram had a more social, lighthearted feel. Zoom offered a polished, professional experience with standard features. We also explored Dribbble for visual inspiration.

User Interviews

I set up a number of interviews with Hosts to discuss how they would utilize the multi-speaker feature. I came away with a few different pieces of feedback:

• Hosts loved the livestream feature and wanted to enhance interactivity. Their top request was the ability to invite viewers ‘on stage’ as speakers, creating a more dynamic experience.
  
• It can be really tiring to be the only person presenting for an extended period of time.
  
• Hosts wanted to use the feature similar to a Zoom format, where everyone would be a speaker and the group could have a private conversation.
  
• Structuring a livestream like an open panel or Q&A session was a really enticing new format that Hosts could offer to their members.
  

Productboard Insights​

Second, we track all Host and member feedback in Productboard. This helps us quickly gauge interest in a feature while identifying pain points in the current experience. Below are a few key insights.

• "We typically have multiple panelists on webinars we provide - it makes the event more engaging for participants and reduces fatigue for presenters."
• "Livestreams are so much better than Zoom for energy and excitement. The missing piece is having multiple onscreen speakers."
• "We host weekly Instagram Live shows, but it would be great to bring this into Mighty Networks as an additional value add for our paid members."
• "I run Gratitude workshops, and I need to be able to collaborate with other presenters in my community. This feature will be a total game changer for me."

Discovery

Early in the project, I realized a significant portion of the work would focus on the invitation flow. First, the livestream creator needed a way to select viewers to invite, and second, invited speakers had to adjust their camera and microphone settings before joining.

Updating the livestream layout was also crucial. With the transition from one to nine speakers, I designed a dynamic layout that could scale on both web and mobile. Capping the number of speakers at nine helped maintain performance and keep the project within scope.

Design

Section 1: Invitations

One key piece of feedback from research was the need for two different speaker invite options: single and multiple. Outlined below are three different explorations for accomplishing these invitation types.

Option 1: Modal

Using a modal seemed like a simple solution for inviting one or multiple speakers without significantly altering the page layout. However, after testing with the team, I found that on smaller screens, the modal became too tall to manage selected speakers effectively.

The fixed-height list was also cumbersome, making it difficult to navigate when searching through a large number of viewers. What initially seemed like a quick fix ended up requiring a custom modal for longer lists and didn’t provide the best experience. I decided not to move forward with this approach or explore it further in mobile mocks.

Option 2: Participants List

The participants list was already integrated into the livestream layout, utilizing the full vertical space of the view. This made it a promising solution, keeping invitations and the participant list closely connected while allowing the creator to toggle back to chat for reference.

Early iterations explored both an empty state and multiple selected viewers. The team strongly supported this direction for its intuitiveness and the opportunity to build on an existing component. Based on this feedback, I proceeded with the design for both web and mobile.

Web

Mobile

Option 3: Inline Invite

This approach also leveraged the participants list but focused on single-speaker invitations. Viewers could be invited inline by hovering over their name, opening the more menu, selecting "Invite," and confirming within a modal. The initial flow, outlined below, showed strong potential. I moved forward with this direction as the single-invite option on both web and mobile.

Web

Mobile

Section 1: Final Designs

I made two key updates across all flows on both platforms. First, I added a confirmation toast message when invites were successfully sent, providing clear feedback and allowing the speaker to seamlessly return to their livestream. Second, I kept invited speakers in the "Viewers" section until they accepted their invite, only updating their role once they joined as a speaker.

Web -Single

Web - Multiple

Mobile - Single

Mobile - Multiple

I only made one small adjustments for inline invitations, which was updating the modal copy to be a little shorter and more concise for the livestream creator.​

I made a two updates to the multiple invites flow. One, after clicking the 'plus' icon, we hid the header contents. This offered a more focused and simple invitation process. Two, instead of tags for selected speakers I created larger avatars, which helped visually organize the list of proposed invites.

The only update for single invite mobile was updating to simpler, more concise copy for the popup confirmation message for the speaker invitation.

I reused the same avatar component from web on mobile when showing selected viewers instead of the tag in previous designs above. It drastically improved visibility, which was a huge focus for mobile. We also added a close icon for each selected viewer as a secondary option for the livestream creator to remove them from the invite list.

Section 2: Speaker Grid

Designing the speaker grid required balancing padding, border radius, camera feed cropping, and speaker name tag placement.

For padding and border radius, I explored 0px, 4px, and 8px on web and mobile to modernize the experience and create a clear visual separation between speakers. Managing the camera feed was another challenge, as portrait and landscape video streams varied depending on the device. From the start, I determined that zooming in and cropping the edges was necessary to fill the video container and avoid a clunky, disproportionate look.

Handling speaker name tags proved tricky, as they often overlapped with livestream controls, making them difficult to read. To improve legibility, I experimented with darker backgrounds, repositioning the tags, and adding a heavy text shadow.

Web

Mobile

Section 2: Final Designs

The team really liked the direction of 4px for web and mobile. The spacing and border radius struck a great balance of organizing the speakers without too much video real estate lost.

I settled on speaker tags in the bottom left corner with minimal padding, a 60% black opacity background and 4px blur. This provided a strong contrast without blending too much with a dark or light video feed.

Web

Mobile

Section 3: Livestream Controls

Web

Mobile

There were a few different areas of focus when updating the livestream controls.

• Location – When the livestream was first built on web, the controls were positioned at the top of the view. After usability testing with Hosts, I found this placement was unintuitive and made it difficult to quickly access settings. Additionally, our research showed that most livestream platforms followed the standard convention of placing controls at the bottom, reinforcing the need for a more familiar and accessible layout.
• Visibility – the actions were tough to see and did not offer visual affordance of being clickable. Especially the ‘End Livestream’ button, which was a major action. The new controls needed stronger visual weight.
• Interactivity – given that there were would be multiple speakers, we needed to figure out how the controls would interact with an ever-changing grid of speakers while still being accessible.

The first mock was the current state of livestream. Mocks 2 and 3 are explorations for the livestream controls.

Mobile was a very different layout but contained some similar themes to focus on:
‍Functionality – the current experience only included the ability to flip the front and rear camera and to turn on the flash (when using the rear camera). Speakers were in major need of the ability to toggle camera and microphone functionality during this project.
‍Visibility – The visual styling of the buttons contained a heavy blur but lighter background. Because of this, they were hard to see, especially on light backgrounds.
‍Interactivity – This was two fold. We needed to figure out how to include the new buttons while also balancing more content on an already small screen.
Listed below were two explorations. Mock two shows camera and microphone icons on the top level. Mock three and four place flip camera and flash icons inside the more menu.

Section 3: Final Designs

Web

Mobile

Ultimately we decided on the controls at the bottom, overlaying the speakers. To handle seeing the names and controls, we created a timed hover state where the controls and names would disappear at different times. This way, speakers could see both.

I chose to surface all functionality based on our research, where Hosts described mobile livestreams as spontaneous, in-the-moment interactions. To support this, I prioritized quick and easy access to controls.

To manage screen content without overwhelming the experience, I introduced a tap-to-toggle feature that allowed users to hide or show all controls with a simple tap. The tap area is outlined in mock 2, while mock 3 demonstrates the hidden controls. This small but impactful update was well-received by the team. Since there were no visual cues indicating this functionality, I relied on help center articles and marketing content to communicate it effectively.