Multi-Channel Video Player | Yolkcreativestudio

Multi-Channel Live Stream Media Play

Role:

UX/UI Designer

Product:

Multil-Channel Streaming Media Player

Focus Area:

UX Design, User Flow, UI Design

Background

This multi-channel live stream video player is designed and developed for the virtual event platform to allow users to switch between the different channels of live streams.

In most virtual events, like other live events, there are a handful of tracks/topics that are curated for the audience to experience, what would the best design solution for digital event.

PROBLEM

How can the users seamlessly switch between different channels during the stream?

How would the users interact with each other or with the speaker during both live streams and on-demand videos? What features we need for connecting exhibitors, speakers, and audience?

APPROACH + PROCESS

Discovery: Prioritize Features needed for Virtual Conferences

We take the business goal and client's requirement to analyze the features that are required for this product.

Create a seamless experience for multi-channel live streams and on-demand videos and programs.
Users should be able to perform live interactions with the corresponding channels, such as chat, Q&A, Polls, reactions, and etc.
Users should be able to navigate through channels easily.
The players should indicate upcoming sessions, live streams, or videos on the channel.
This product needs to be utilized and re-branded for different digital events.

Features

Brainstorm on what are the best features needed for video player in virtual events. The features are also built based on the current platform technological capacities.

Sketches & Discovery

After understanding the features needed for the player, I take the ideation to exploring layout with quick sketches.

Interaction Feature Sketches

Video Player upcoming sessions

Low-fi Sketch

DESIGN

Interactions

Finalize interaction part of the user interface

Q&A Function

Chat Function

Polling Function

DESIGN

Desktop Experiences of the Multi-Channel Stream Player

This video player interface is custom designed for the 8 channel TV switcher for 8 different channels of contents which would be streamed live during the event days.

Hover State

Video Player

Hover state with session info

Q&A Tab Selected

Eight Channel TV Switcher

Slack channel button

Playing State with Info tab selected

Hover State with Caption Language Selection

TV Guide Channel Switcher

the current playing session

Unselected Channel

TV Guide Channel Hover on non playing channel

Channel Guide Different Channel Open with Different Channel Guide.png

Video Slate

Using the stream player on mobile

Transform the video player from Desktop to mobile, my solution is to use accordion tabs that can easily be expanded and collapsed for mobile touch interactions.