Livestream Moderator Mode - Proof of Concept
Prompt
For this design challenge, I was asked to design a screen that indicates that the user is in moderator mode and is currently live streaming a session. I was given 96 hours (4 days) to complete the design.
Research and Synthesis (Days 1 -2)
To get things started I wanted to quickly learn a little bit about moderating livestreams. To do this, I scheduled some time to interview 2 friends to ask a few questions around the topic.
Findings
Both users have moderated livestreams via Zoom (free version) for personal reasons and on paid platforms (other than Zoom) for professional reasons.
User A had no preference between Zoom and the paid option she uses (StreamYard).
“They both have their good qualities.”
User B prefers her paid option (CrowdCast) over Zoom.
“It’s easy to use”, “It’s fast” and “The price was right”
Being able to pause the stream without ending the recording is very important to User A.
Both users prefer to moderate livestreams from their desktops and laptops.
“I tried to moderate from my phone once and it didn’t go well.”
Both users encountered issues with the audio during their first broadcast. However, they were able to troubleshoot and resolve the problems on their own.
User B needs her platform to integrate with her email list so that she can communicate with potential clients from the app.
User A wants her platform to be extremely customizable. While user B prefers a more out of the box option.
Both users promote their livestreams via social media.
User B wants to be able to see her attendees on the screen during the livestream.
Ideation and Usability Testing (Day 3)
After my synthesis, I was ready to move on to getting some ideas down on paper. I also knew that I would be usability testing with my sketches so I wanted it to be somewhat high fidelity. After almost an entire day of sketching (and overthinking) I was ready to user test the layout and features of the interface. I scheduled time with another friend who also has previous experience with moderating livestreams.
I conducted the session with the paper sketch. The user was prompted with 3 “tasks” and we also discussed the user’s general impressions of the layout of the screen.
Findings
User has moderated over 60 livestreams via Zoom from his laptop.
Teaches remote classes for a tech bootcamp.
Initially, at first glance he was pretty confused about some of the controls and their placement.
“What is paused?” The music??? The live stream???
Has had issues in the past with pausing streams. Would stop the recording instead of pausing which would cause issues when he sent out the classes. Students would only receive half of the recording.
He actually is already using music during his livestreams but has to manage this outside of Zoom so it can be tricky.
Called out comments section and would like to reply directly to someone by “clicking on their comment” rather than making a selection from a dropdown.
Would expect to stop screen sharing by clicking “Stop”. However, this language is too vague. It needs to be made more clear.
It was clear that in my attempt to incorporate music into the layout I needed to make the controls a little more intuitive.
Created in Sketch
Final Solution (Day 4)
Final stretch! After about 85(ish) hours of interviewing, sketching and testing, I submitted this version of the mockup.
If you would like to walk through a short prototype of you would see once you have ended your livestream please click here and select ‘End Livestream’.
What’s Next?
After turning in the project, I received some feedback and here are the things I would like to update in the next iteration.
Create more difference between the badge and CTA button.
The badge displays as a button and that was not the intent.
Decrease the number of font sizes.
Create more consistency across the icons.