Qube XP

Cinema Theater Playback Control Web App

Simplifying movie projection process in cinemas for seamless screening experience

Overview

Qube is a digital cinema company that provide technological solutions for complex manual processes in the digital cinema workflow.
This project is all about redesigning web experience for controlling the digital cinema playback server which is connected to multiple other devices such as projectors, audio system, lights, curtain etc. This interface is responsible for managing connected devices and projecting media content(movies, advertisements and so on) in the cinema hall.

My Role

I reimagined overall user experience from the ground to the final implementation review. Also, I collaborated with with the engineering team to ideate solutions that would work in the constraints we had. I didn't stop at designing the interface, I also took up the role of designer reviewer to check the functionality and user interface as the features get developed and ensured that it has the great experience.

Product Team

1 UX Designer (Myself)
1 Senior UX Designer
1 Product Manager

Engineering Team

3 Front End Developers
1 QA Analyst
1 Engineering Manager

Duration

Sep 2019 - Nov 2019
Feb 2020 - Apr 2020

Why this Project

Next leap into IOT technology
The advancement in digital cinema projection technology and increased interconnectivity between various devices lead to various complexity in automating these tasks during every movie show. Also exisiting design is not scalable to handle it.

Lagging behind the Competitors
Competitors are building a very compatible experience to the user and providing good level of easy of use to the user. So there is a need for the improvised experience to fit the current and future industry requirement.

Product Goals

[1] Need to build a simplified and highly contextual user interface and experience design with a modern design and superior digital cinema platform.

[2] Interface should well structured and helps the user to perceive the information with better clarity and take consious decisions.
‍
[3] At the same time, the interface functionality should not be changing variedly with respect to existing/proposed software architecture.

Constraints

❌ Limited User Research options

Due to restricted interactions with the actual users of the products, we couldn't perform intensive user research. The analysis and ideation phases is primarily based on the insights and requirements from the field manager.

❌ Should not disturb existing software architecture

As it primary focus was the improve the user experience, the team was stringent about following the existing software architecture and should be modified only if it makes a huge impact to the product.

❌ Small sized product development team

With mostly 1 front-end developer and 1 QA present at a time throughout the product development, our team should be meticilous about the design decision as any further change will delay the development and the release cycle.

To set the Context

What is Digital Cinema Server?

It is a single server located in every cinema hall to control the media content (movie and advertisement) screening. This IOT based server communicates with multiple other devices such as projectors, audio system and automation devices responsible for the media playback. This server has a bulit-in web interface to control and manage all the relevant actions taken.

Who are the Audiences?

Audience are the projectionists who sit inside a dark room called "operator room". With the help of our web interface, they control the entire show from start to end (ie) from turning off the auditorium lights to playing movie and to turning on the exit lamp. Essentially, they have the ability to control the end to end movie watching experience in cinema hall.

Features Showcased

The entire products has gone through a lot of major and minor changes in the last 1.5 years. Here, I am covering 3 major features that have huge impact in their daily operations:

[1] Show Playback Control
‍Prioritising and balancing improper organization of the actions and information shown on the media player.

[2] Show Creation
‍Optimising the interaction in selecting a playlist for the show.
‍
[3] Status Pane
‍Categorizing huge chunk of live information that should be quickly accessed at any point in given time.

Playback Control

Context about this feature

Overview
This feature is responsible for controlling the current show that is running on the cinema screen. One may relate this feature to a conventional player in your audio/video streaming app. But it actually differs from them by including set of complex automated actions that plays a huge role in the movie viewing experience in the cinema hall.
‍
Usage
This feature is used mainly during start/end of the show and whenever there is an issue during the ongoing show.
‍
Importance
‍Extra precision is required as it have largest impact on the movie watching experience

What's the issue with the existing feature

❌ Improper Visual Difference

All playback information are given in a very blant way. No major difference in visual style to highlight the essential

❌ Controller Management unclear

Actions for controlling the show is spread apart and unnecessarily repeating multiple times for a single functionality

❌ Information overloaded and unclear

Show playlist information is cluttered and unable to view details of current or upcoming events clearly and properly

Designing the controller

We started by designing the controller section of this playback feature where the user will be able to find the summary and controls for the current event.

We explore few options for the top section of the playback controller

✅ The finalised one with more defined section and controls

Designing the show playlist

Based on the insights from field study, we figured out the critical informations that the user will look for in the playlist and designed it.

Challenges we faced

Not everything went as planned. One of interesting challenges we faced was alerting the user about the show interruption on restart after power failure.

❓At what point should we be alert?
❓How should the alert looks like?
❓What should be alert's lifespan?

After few iteration and feedback from the on-field team, contextual alert provided more flexibility and was explicit to the user. So we implemented the contextual alert at this point.

Show Creation

Context about this feature

Overview
This feature is responsible for creating a show (similar to conventional create playlist in music app) that can be scheduled and/or played immediately across the cinema screens. It involves choosing the list of media content that need to be played sequentially. Along with this, user can also attach cues (tiny piece that carry automated action) to selected content of their choice.
‍
Usage
Creation is mostly a one time process for a single show. Modifications to a particular show comes rarely.
‍
Complex structure
‍‍A show can be build in a more simpler way to more complex way with the available different type of items. User can include any media content, cues or even multiple shows to build a new show.

Understanding the existing anatomy

[1] Available list of content
‍All available media content are listed and grouped by media type. It displays the name of the content, audio and video information, content maturity rating and duration of the content.
‍
[2] Selected content of show
‍All the selected content of a show is stacked horizontal within a fixed boundary and it contains the type of content as the primary information followed by name and it is truncated at most cases.
‍
[3] Show Info and action
Finally the show creation information and action placed in the bottom of the anatomy

Two keys issues with the current interface

⚠️ Unintuitive Interaction Pattern

The functionality of selecting a media content from the list is not intuitive. Drag interaction behind selecting/unselecting/reorganizing content for a show is challenging when done in a horizontal timeline of contents

⚠️ Cluttered and less prominent selected content

Since the horizontal container alotted for the selected content has fixed width, it was difficult to process the selected list as the number of items increases.

Reorganising the layout

To fix the friction while selecting a content, the layout required a major reorganization. So we looked at the possible options and identified the drag-resizable two column layout.

[1] It provided the existing drag and drop gesture to select a content for a show, but it a more controlled and flexible manner.
‍
[2] ‍Also the resizable layout gave more information about available and selected list without cluttering the layout much.

Challenges we had

We tried to replicate ui pattern from the available list of content and follow it for the selected list of content. But the line separator gave a defined boundary which created complexity while trying to drag and drop between two selected content.

Removed the line separator
To add more breathable space between selected list of items, we removed the line separator and created a illusion of more space without actually increasing the spacing.

Resized the drag and drop item
We removed the secondary information for the selected draggable item and reduced the width of the component. This size was compact and had full control.

Not just media content, user can add automation cues and even nested shows.

What is automation cues?

Automation cues are tiny piece of automation triggers that can be attached start or end of the media content. It performs the intended action in the background while the content is being played.

Adding automation cues to a show

Drag and drop cues
Drag and drop for cues is different from dragging and dropping the content (the previous case). Here we are dropping it over a content. Whereas in the previous case, we are dropping it between the contents.

Add cues from dialog box
In the way of adding a cue, the user has the ability to change the attached content to effortlessly.

Adding another show within a show

Yes, we designed the interface to add multiple shows within a show. This is because, there were use cases of having a predefined set of advertisement to be run during the intermission of a show. This predefined set is first created as a show and then added to any other show.

Drag and drop over a content
‍‍Drag and drop over a content which splits the content into multiple pieces. This is different from dropping a cue over a media content. Because in adding a cue, it is embedding an element over a media content. But in adding a show, it is splitting the content and adding in-between the parts.

Drag and drop between the content
Drag and drop between a content which is similar to adding a the first scenario of adding a content between selected contents.

System Status Panel

Context about this feature

Overview
The user should be aware of all the background jobs running within the system. They should also be notified about any critical status that will have major impact. This feature defines a single section where the users should be able to collectively know about what's currently happening in the system.
‍
Accessbile from anywhere in the UI
The user should be able to view the system status anywhere from the UI. It should also have the ability to grab the attention when there is a critical issue

Concept for the System Status Panel

[1] We decided to encompose all these requirements as a right side pane module which can be expanded/collapsed as and when required.

[2] This feature will have a overall icon that will reflect based on the overall system status.
‍
[3] All the important activities are categorized and the key information is displayed.

[4] The organization was impressed with the very first version for this feature. So we didn't work on multiple versions of it. Rather we tweaked the UI part of it to make it more understandable.

Few key features

Display module when available
Attaching cues to a content is very critical and the users should be aware of content that has attached cues.

Scalabe modules
The anatomy of the common module is designed in such a way that it is scalable to fit in different requirements.

Overall status
The icons and colors for overall status changes based on device status and the key activities status.

Multiple status badges
‍The badges to represent status for each activities vary accordingly. These badges follow accessbility standards.

Reflections

What went well

[1] This existing version was a legacy one. So lot of changes happened in the technological aspect of the domain. Identifying what needs to be retained and what needs to be iterated was a challenging task.
[2] Setting up short term goal and long term goal was helpful in this project. We started with basic user interface feel for the overall product. Once the project got into shape and designed the core features, we revisited the user interface style and polished to look modern and recognizable

Misses

[1] This product had 3 different developers worked in 3 different time period. Detailed documentation was one the key aspect that we missed during the design and we faced few hiccups while onboarding a new developer in the project.
[2] And unfortunately, before the product could hit the market, I had to leave the company for pursuing my Master's programme. So I could not validate few hypothesis and have no visibility to the performance metrics of the product.

To conclude, lot of design exercises that I did during this project were significant additions to the an outdated design and improve working efficiency as they interact with it. So I believe I did a great job in understanding and establishing a standard in design language and overall user experience for this project.