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
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
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’.