header-LiveStreaming-v2.jpg

Live Streaming Product

By creating a step-by-step in-platform solution, we streamlined the process to broadcast a live event by nearly 95% so that our most non-technical customers could go “on air” easily and quickly.

The Zype platform is a comprehensive software solution for video content owners to streamline their entire business. One of the products the platform offers, Zype Live, allows these businesses to start a broadcast, distribute it, and sell it on any device. The primary goal was for our customers to successfully set up an event, go live, and end the broadcast without any hiccups or confusion.

What role did I play in this? Wireframing, prototyping, user testing, UI

Discovery

Discovery

Before getting down and dirty with wireframes, we wanted to have a clear understanding of the tasks clients were completing either in the Zype platform or manually on their end before starting a broadcast. We partnered with a few of our valuable customers relying on Zype for all of their live streaming.

To make this process feel effortless, we wanted to break the process up into steps, grouping relatable tasks together. We decided to wait until the fourth step to ask the user if they wanted to broadcast now or in the future; this way, if they chose “Broadcast now”, there would be no confusion that they could go on air right away instead of having to answer all the questions in the previous three steps.

Prototyping and testing

Prototyping and testing

With some quick tests, we felt good about a user sailing through the first couple of steps, but realized some hiccups right around the time they were starting their broadcast.

For one, clients weren’t confident that everything was up and running properly before committing to “Go live”. We decided to add a “Prepare to go live” step before actually going on air so users could make sure their encoder was turned on and their stream was coming in smoothly before hitting that daunting Go Live button.

On top of that, we were having issues with clients forgetting to turn off their encoders after a live stream ended and having to pay the hourly fees associated with that. With the functions built right into the flow to turn the encoder on right before broadcasting and to turn the encoder off right after the broadcast ended, we minimized the amount of money our clients spend and gave a boost to their satisfaction.

And voila! Some finishing design touches

And voila! Some finishing design touches

As per usual, we kept the UI as minimal as possible and used standard colors to convey messaging: green for progress and completion, red for important notes and warnings, etc. Whenever development resources would allow, we added touches of animation to indicate progress and make the user confident they were quickly moving through the process; we did this with checkmarks to indicate task completions and a progress bar to show what step he/she was on and how much more effort they could expect.

For the “Prepare to go live” and “On air” screens, we kept the layout familiar to the user by mirroring other broadcasting dashboards, with all the important elements, including the player, above the fold.

Popovers allow the user to receive clear messaging at specific points in the process; no one wants to be expected to read a list of notes and warnings that they’ll need to remember for later on. Give em’ when they need em’.

animation-1.gif
animation-2.gif
animation-3.gif