Creating the First Livestream Experience

Research

Competitive Research

Hosts had a variety of use cases for live video: conduct 1:1 personal training sessions, weekly announcements to hundreds of members or monthly book club meetings of 8-10 people. Given the variety, our team reviewed a bunch of different video platforms: Twitch, YouTube, StreamYard, Facebook, Crowdcast and Zoom to understand all the current features in the video landscape.

We came away with a few observations:

• The livestream layout needed to be flexible enough to handle large or small groups of participants.
• Live videos need to feel interactive! People join a livestream to comment, ask questions and have an open forum about the content of the video.
• Running a livestream can be intimidating. Managing camera and microphone settings need to be simple and intuitive to ensure the Host can feel prepared for their presentation.
• The livestream creator should be able to easily turn off their video or mute their microphone at any time
• Discoverability of the livestream within a Mighty Network is super important. This is integral to higher engagement for Hosts and viewers need to be able to easily find the livestream while navigating the platform.

User Research

I conducted research and gathered information through a few different channels. One of them was, which is where we log all of our customer feedback and requests. Sifting through the comments was an easy and efficient way to quickly begin understanding core needs and features from our Hosts. Additionally, I conducted multiple user interviews with Hosts to dive deeper on feedback. They mentioned leveraging livestream as a way to personally connect with their members. With a virtual Network, it’s imperative to have that face-to-face communication. Additionally, they found engagement through live video to be much higher than any written content or group chats.  A few Hosts were using third parties to achieve live video and the process was slow, cumbersome and disconnected. Listed below are a few examples.

Examples

• Starting a livestream from Facebook then uploading the video to their Mighty Network.
• Creating a live video on Zoom then encouraging all the attendees to move to their Network after the call.
  
• Inviting members to an event on Crowdcast then uploading highlights and a summary to their Network.
  
• We even received feedback from a few prospective Hosts who said they would only create their community on Mighty Networks if we built a livestream feature.
  

Host Insights​

• “This is the one component that’s been missing since we switched from Facebook. Since live FB videos are one way in which I bring members to my community, not having that ability means we lose that point of contact and connection.”
  
• “It is very time consuming and clumsy to do a video, upload it to YouTube and then into Mighty Networks. It takes the spontaneity out of it. Also, the current live video option costs $900 to do with Video! It will be a huge help and attraction to keep my groups here on Mighty Networks.”​

Discovery

With that research in mind, the project manager and I began to organize our notes and start focusing on important areas and recurring themes.  We started to roughly divide the project into sections which we could tackle one at a time.  

During this phase we also met with the engineers and QA to hold discovery sessions where we’d cover any questions regarding features and discuss the project sections at a high level. During these meetings we walked through flows and align across web and mobile.

Design

Section 1 - Camera & Microphone Settings

My first focus was how Hosts would begin a livestream and adjust their camera and microphone settings. In the 'Home' location of a Mighty Network, there is a feed area. At the top of that feed is a compose section, which felt like an intuitive location to put the livestream icon.

Once the Host clicks the livestream icon, they will be taken to a 'Ready to Go?' view, which functions similarly to a green room. There they will be able to adjust settings and make sure everything is ready.

Web

iOS

Android

Section 1 (cont.) - Going Live

Once the Host allows browser permission settings, they will be ready to name their livestream, adjust their camera and microphone settings and choose whether they would like to notify their Network when they go live.

After everything is ready, the Host can click 'Go Live Now'. During this time Amazon Web Services needed to start up a livestream space so I needed to create a loading state. I did so by utilizing the right panel and cycling through messages before the final 3, 2, 1. This way, I could handle multiple livestreams simultaneously by managing load times and spinning them up.

Once the livestream starts, a notification will be sent to all members in the Network and a livestream preview will be shown at the top of the main feed (see section 3 below for more information regarding the preview). During the livestream, the speaker will be able to turn their camera on and off, mute their microphone and expand the view to full screen without the right panel.

Web

iOS

Android

Section 2: Participants and Chat

The chat experience was extremely important to the livestream. One key takeaway from research was that Hosts really wanted to leverage chat as a way to pose questions, receive feedback and share new ideas. During the livestream, the speaker could easily keep an eye on chat within the right panel or cascading over the top on mobile. That layout ensured a more interactive experience for all of the participants in the live video.

Additionally, I included a participants list so the speaker could monitor attendance and make sure all the right people were on the call. Another takeaway from research was that Hosts wanted to keep an eye on the attendees and make sure key people had joined the livestream.

Web

iOS

Android

Section 3: Livestream Preview

An extremely important part of the livestream experience was discoverability in the Network. Regardless of a where a member might be, we wanted the livestream to be as noticeable as possible to ensure maximum attendance and engagement. The main feed of the network is a very high traffic area and seemed like a great location to place the livestream preview.

Any time a livestream would begin, we would show the preview fixed at the top of the feed and it would scroll with the context. Members could easily click the preview and join the livestream.