Creating a Multi-Speaker Experience

Research

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

For invitations, I asked questions such as, 'How would the livestream creator select multiple people at a time?', 'How can they remove a speaker once they're done presenting?' and 'How do I fit the flow into the current livestream layout?'.

For the livestream layout, I discussed what it might look like. With a growing number of speakers joining, I needed a robust way to manage multiple people in a grid while offering intuitive camera and microphone settings.

Competitive Research

The Product 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. For example, StreamYard offered a ton of customization with a very intuitive flow. Instagram had a more light-hearted, social feel to their experience. Zoom offered a refined look with standard features. We also referenced Dribble for visual inspiration.

User Research

I had two different sources for user research. First, 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 use cases:

• Hosts loved the livestream feature. Now they wanted to take interactivity to the next level by inviting viewers ‘on stage’ to be a speaker.
  
• 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.
  

Second, we log all of our Host and member insights through. These insights are an excellent way to get a quick understanding of Host’s interest in a feature while also identifying pain points within the current experience. A few examples are listed below.

Host 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 on in the project I realized a large portion of the work would be dedicated to the invitation flow. The first part involved the livestream creator selecting which viewers to invite and the second portion was the invited speaker(s) adjusting their camera and microphone settings prior to joining the livestream.

Updating the layout of the livestream was another integral piece. Given that we were transitioning from 1 to 9 speakers, I needed to grow or shrink the layout dynamically on web and mobile. I chose 9 for the max number of speakers to manage performance and maintain project 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 was a simple solution to invite one or many speakers without rearranging too much content on the page. After testing it out with the team though, I quickly realized the modal became too tall to manage the selected speakers on smaller screens. The fixed height of the list was also cumbersome to navigate if there were a large number of viewers to search through. What started out as a quick solution proved to be more difficult, require a new custom modal to accommodate longer lists and overall did not feel like the best experience. I chose not to proceed with this direction or explore it further with mobile mocks.

Option 2: Participants List

The participants list already existed within the livestream layout and utilized the full vertical space of the view. This was a promising route that utilized space well while keeping the participants list and invitations in close proximity. The livestream creator could also toggle back to chat if they needed to reference who to invite.

Shown below are early iterations for an empty state and with multiple viewers selected. Overall, the team really supported this design direction for its intuitiveness and opportunity to iterate on an existing component. I proceeded with this idea on web and mobile.

Web

Mobile

Option 3: Inline Invite

This route also utilized the participants list but for single speaker invitations. Instead, viewers could simply be invited inline by hovering on their list item, opening the more menu, clicking 'Invite' and then 'Confirm Invite' within a modal. The initial flow, outlined below, showed a lot of promise. I moved forward with this direction as a single invite option on both platforms.

Web

Mobile

Section 1: Final Designs

There were two updates that we made with every flow on both platforms. I added a confirmation toast message when the invites were successfully sent, which helped the speaker confirm the action and return to their livestream. Also, I kept the invited speakers in the 'Viewers' section until they accepted their invite. Once the viewer accepted the invite, then I would actively change their role.

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

The speaker grid was a balancing act of adjusting padding and border radius, cropping the camera feed and arranging the speaker name tags.

The explorations with padding and border radius were a matter of modernizing the experience and creating a clear divide among speakers. I explored 0px, 4px and 8px sizing for web and mobile.

For the camera feed, I had to manage portrait and landscape video streams coming in based on a desktop or mobile device. The various feeds are outlined in the first slide of each carousel below. I concluded right away that we needed to zoom in on the camera feed and crop the edges in order to fill the video container otherwise the experience felt very clunky and disproportionate.

Handling the speaker tags was challenging. Depending on their location, they would end up overlapping with livestream controls, which made the names tough to read. I explored darker backgrounds, adjusting the location and applying a heavy text shadow.

Web

Mobile

Section 3: Livestream Controls

Web

Mobile

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

• Location – when livestream was first built on web, the controls were placed at the top of the view (first mock in carousel). After some usability testing with Hosts we realized this was not an intuitive location and was difficult to quickly access when needing to toggle settings. There was also the standard convention of placing them at the bottom on other livestream platforms we had researched.
• 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 decided to surface all of the functionality. During our research, Hosts mentioned mobile livestreams as more spontaneous acts that occurred in the moment. Because of this, I wanted to offer quick, simple access to controls.

To handle all the contents on the screen, I added the ability to tap the screen to hide or show all the controls. The tap area is outlined in mock 2 and mock 3 shows the hidden controls. The team was extremely happy with this simple yet helpful update. I relied on help center articles and marketing content to communicate this behavior since there were no visual cues indicating the functionality.