Audio & Video Streaming Player
Working With A Built Structure
Broadnet officially launched their video streaming platform in 2014, which eventually grew to support audio and slideshow streaming by 2016. However, unlike the product, the streaming interface remained the same, dated and not mobile friendly.
Out With The Old
The original interface designed in 2014 by a group of back-end developers was bloated, clunky and ineffective on mobile devices. It was developed for video streaming and video streaming only.
Original Broadnet Streaming Interface, circa 2014
In With The New
With the launch of Vekeo looming and development time at a minimum, I had to work within a strict set of guidelines for the user interface re-design. Primarily, the structure of components had to remain the same and the final product had to be mobile friendly and easily embedded into other sites using a yet-to-be-released Streaming API.
I stacked and eliminated unnecessary components, ensuring mobile friendliness and streamlining the user's focus to three areas: the streaming player, Ask a Question, and Live Polling.
I added the client name to the interface, visually confirming to users who they were listening to and retained the option for clients to add custom Facebook, Twitter and email links.
An audio toggle switch was added – per requirements – allowing users to mute and unmute audio based on if they were listening on the phone. This would primarily be used for slideshow streams where the presenter used the player to display presentation slides.
Optional branding components were added in the form of a header and footer banner, customizable by the client. These could be displayed or hidden depending upon the client’s preference.
Dynamic Content
Once the structure of the player was finalized, I began developing ways to display content, components and images dynamically depending on event start time.
Due to player functionality, users could not submit questions or respond to poll questions outside of events. In turn, I chose to hide these components when there was no active stream.
Using the streaming player control bar I spec’d dynamically displayed text based on event start time. The text would display the upcoming event start time (if scheduled), switch to EVENT STARTING SOON 20 minutes before the event start time, EVENT LIVE NOW during the live stream, and EVENT ENDED at the conclusion of the event. If no upcoming event was scheduled, the controls would simply display NO EVENT SCHEDULED.
Knowing a majority of events would be audio streaming, I added the functionality to display unique images in the player interface depending upon event status. Similar to the dynamically displayed content within the control bar, clients could also dynamically display images, notifying users of the upcoming event, live in progress events and post event thank you messages.
API Functionality
By default the streaming player would be contained within a client specific public facing URL on Broadnet’s servers. However, Broadnet also wanted to give clients the ability to customize the player and embed it on their website using an embedded API.
I knew giving clients the ability to change colors and hide components would be pivotal to acquisition. Therefore, each component was given a unique CSS ID that could be manipulated using a custom style sheet within the embed code.
Above is the final design, implemented on Colorado Senator Cory Gardner's website.