UX Case Study: Live Streaming

BandLab is an all-in-one music creation and social platform, and we recognise the need for creators to showcase their work through live performances. Instead of directing them to external sites to host live streams, we decided to build this feature in-house.

My role in this project was to create clear and easy-to-follow messages that would simplify the concept of live streaming. Beyond this, I offered valuable design input to personalise the live streaming experience for hosts and viewers.

Live streaming isn’t rocket science

But it requires a certain degree of technical knowledge. We referenced 3 renowned live streaming platforms — Twitch, Facebook Live and YouTube Live. These platforms had unique interfaces and a varied user base, though the overall experience was largely similar.

Matching our objective with the right experience

While Facebook Live and YouTube Live are directly integrated into their parent platform and relatively easy to use, Twitch uses a free 3rd party application — OBS Studio — for state of the art live streaming. OBS has a full spectrum of controls and video/image sources to choose from, making it the obvious choice for professional-level live shows. With that in mind, the choice was simple.

Image result for obs studio
Not the fanciest UI out there, but OBS Studio works like a charm

As always, users come first

For this feature, our users were classified under 3 groups — seasoned hosts, new hosts and viewers. This has nothing to do with their level of competency with music-making: a new host might actually be a pro musician who has only just developed an interest in live streaming.

Seasoned hosts

  • Have live streamed at least once
  • Are familiar with using a live streaming platform

New hosts

  • Have not live streamed before
  • May not have experience using a live streaming platform
  • Could have been a viewer previously

Viewers

  • Not interested in hosting a live stream, but would gladly watch a performance
  • Have varying levels of experience in this platform

How it all works

The streaming process is slightly different for hosts and viewers. Here’s the general flow:

Hosts

  1. Enter live streaming feature
  2. Wait for backend to setup
  3. Copy and paste server URL and stream key in OBS Studio
  4. Wait for synchronisation
  5. Live stream starts
  6. Perform
  7. Live stream ends

Viewers

  1. Enter live stream from user feed
  2. Watch performance
  3. Chat with fellow streamers (optional)
  4. Live stream ends

1st Iteration

The design team began creating wireframes and prototypes to tackle the use cases and functionality, inserting copy that was usable but pretty much flat.

live_stream_setup_before
Setup screen – copy is lengthy, not on brand and confusing for 1st-time users
live_stream_loading_before
Connecting screen – With no indication of what’s happening next, users are left hanging
live_stream_settings_before
Settings modal – User stats are not visible on the streaming screen, when they should be

Redesigned Prototype

Admittedly, the 1st iteration fell short of my expectations. While we ticked all the boxes for functionality, we neglected the viewers’ experience. The numbers in this group could potentially be 10 to 100 times more than hosts, and any flaws in design will definitely be picked up.

UX copy was lackadaisical as well, so I reviewed the words we used and tried alternatives that used the correct brand voice and tone.

live_stream_setup_1_after
Proper setup screen gives clear instructions on hosting requirements
live_stream_setup_2_after
Direct, conversational copy gets the message across quickly
live_stream_started_after
Added a modal that lets hosts publicise their show to followers
live_stream_ended_host_after
Straightforward copy with options to continue the user journey
live_stream_loading_audience_after
Viewers get a clutter-free loading screen, with guests being prompted to log in
live_stream_loading_audience_after
Included empty states for instances where no live streams are available

The masterpiece is (almost) complete

Right now, live streaming is in beta and available to selected users. We continue to refine the UX based on feedback and reviews received, before the official launch slated for later this year.