Moving Image

Video Management and Delivery Platform

Video Manager, Video Analytics tool and Player

I'm presenting here projects I worked on as a part of MovingImage team. I led the UX and UI design for the following company's products:

Video Manager Pro is the main product of the MovingImage video management and delivery platform, a responsive Web App that allows companies securely manage and deliver videos.
Video Analytics tool provides the customer with data visualization of the statistics collected in the Video Manager
Video Player used to deliver videos, manage subtitles etc.

My role as UX/UI designer in an interdisciplinary Agile team included:

Creating wireframes and interactive prototypes for the new features in close collaboration with product owners
Preparing and conducting usability tests - in Lab and guerrilla tests
UX optimizations of existing features
FE implementation in collaboration with software developers (SASS styling, SASS and JS interactions implementation)
Maintaining SASS/Angular components library
UI validation with QA.

Selecting one and multiple video items

Video Management redesign

I completely redesigned Video Management area of the Video Manager. It included redesign of the Channel tree, Video List with Video Items with different states: uploading item, resumable item, transcoding and a regular video item.

The goals for the redesign where:

Make hierarchies of the channels tree clearer to the user.
Make the state and meta-data of a Video Items better visible and distinguishable.
Include own action menus for every item (previously available only in the actions bar)
Clear Video Item selected state that doesn’t compromise visibility of the states and meta-date.
Make filtering scalable for multiple filter types in the future

Ownership in the Video Manager

Ownership feature is the rights management system for the Video Manager.

It was implemented in a number of stages: first a minimal solution, and then refined using feedback from clients and results of a user testing.

I created a low fidelity prototype of adding a user to a group (every channel is associated with a group) and adding a role for a user in this group.

The final design includes displaying user data, search and sorting to improve usability.

Low fidelity prototype for the ownership management in the Video Manager

The navigation pane and the data pane are separately scrollable

Video Analytics Tool

Video analytics tool provides the customer with data visualization of the statistics collected in the Video Manager. Analytics can be displayed for all videos in the specific Video Manager, for a specific video or all videos in a channel (including or excluding subchannels).

I've designed the MVP to visualize all the collected data, according to requirements including all scenarios, ensuring feasibility of the visualization with developers.

At the second stage, I've designed and tested the following features:

Designed and implemented in Angular and Sass date range selection component
Top-10 Videos in a channel tables
Tool navigation with Channel selection/ Filtering Videos by channel
Filtering videos by referrer URL

Filter by referrer feature

Additional features I designed for the Video Analytics tool are filtering the statistics data by a Referrer URL.

The challenge here was to avoid frustration when the user would select a URL with no videos referred from this URL, which results in seeing an empty state screen.

I've solved the problem by sorting the URLs by number of references in the referrer selection drop down, and visualizing the amount near each URL

In the referrer URL selection drop down, there is a preview of amount of data for each URL