Multi-Channel Video Player | Yolkcreativestudio

UX/UI

Multi-Channel live stream Video Player

Digital Team Lead: Wilson Tang

Project Manager: Corey Gosselin

UX/UI Designer & Art Director: Tianyu Qiu

Client /

VMware

Role /

UX/UI Designer, Art Director

Agency /

Freeman

Year /

2021

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.

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?

Project Goal & Research

During the early design and development process, we need to understand the problems we are solving. Then we take the questions to develop further brainstorms and researches.

Business Goal

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.

Research

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

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.

MVP

Develop an immersive, interesting and engaging multi-channel video player with interaction features for digital events.

UX Design Exploration & Sketches

With the understanding of MVP, business goals, features and contents for the video player. We start with exploring the wireframe layout sketches and flows.

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

Video Player interface

UX Design

After Sketching and design explorations, then I finalize the design interface in different scenarios with internal usability testing.

Interaction Design

Finalize interaction part of the user interface

Q&A Function

Chat Function

Polling Function

High-Fidelity Video Player Design (Desktop)

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

Playing State with Info tab selected

Slack channel button

Info Tab Selected

Emoji Reactions

Hover State with Caption Language Selection

Captions

Caption Selection

TV Guide Channel Switcher

Channel Guide:

the current playing session,

Channel Guide:

the upcoming Sessions

Selected Channel

Unselected Channel

TV Guide Channel Hover on non playing channel

Channel Guide Different Channel Open with Different Channel Guide.png

Video Slate

High-Fidelity Video Player Design (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.