Back to Home

Ci Case Study

LiveSessions

LiveSessions is a synchronous screening experience designed for remote media review, enabling teams to be 'in the same room' across the world.

MADE WITH ♥ BY THE Sony Ci Team

CUSTOMER USECASE: UNDERSTANDING THE CURRENT WORKFLOW

Video Screenings Today

Screenings take place towards the end of post-production. Traditionally, a team gets together in a room to watch and review their content with all parties involved in the production. The material is continuously played/paused to collect comments from the team by a designated note-taker. After screening, the notes are organized and distributed to their respective parties for editing.

Challenges

"You had to be there"

Post-production reviews require teams to physically enter a single screening room to review content together in real time, which is problematic for remote teams.

Inconvenient Note Taking

A designated note taker is required to record verbal comments from all parties involved. Organizing and distributing those comments after screening is time intensive.

Limited Communication

Without physical presence and communication methods such as gestures and body language, remote teams struggle to effectively communicate.

Proposals

Synced Video Controls and Playback

Create a synchronous viewing experience utilizing Ci's existing VideoReview application, which houses many existing features that can supplement a live session for teams.

Comment Labels

Create a comment organization system in VideoReview's Discussions panel to quickly label comments. Enable search functions for labels to quickly filter through all discussions.

Discussions and Interactive Drawings

Create a pen tool that allows multiple members to quickly point out, draw, and annotate videos in real time, similar to how people point to things tacked up on walls.

Part of the Pack

VideoReview Integration

Built as an extension of the Ci VideoReview application, LiveSessions provides an interactive space for team members to collaborate in a secure environment.

Los Angeles, USA
Tokyo, Japan

Same Time, Same Frame

Synced Playback

All content being reviewed will be synced to the frame within a 300ms buffer period using a technology called WebSockets, which allows for 'bi-directional messages to be instantly distributed with little overhead resulting in a very low latency connection' (Pusher). This technology enables the core experience of synced video playback for all members regardless of location.

DISCUSSION ORGANIZATION

Comment Labels

The Comment Label feature allows all comments to be organized with color-coded labels. Create a set of labels for everyone to use in the worksession. Comments and labels can be added during a LiveSession to quickly take organized notes during playback.

GESTURAL INTERACTIONS

Live Pen

Draw directly on a video during playback to quickly annotate or call something out. The mark is momentary and will quickly fade away. Other members can see your pen in real time, and multiple members can draw concurrently. This feature mimics the physical action of pointing, a human method of communication through digital mediums.

Check Out LiveSessions In Production

LiveSessions Now Available on Sony Ci

GO BACKSTAGE

Design and Development

By speaking with customers and walking through their screening workflows, industry standard practices were extracted and organized in a user flow chart to understand their process and pain points.

VideoReview's information architecture and styling had to be overhauled in order to accommodate LiveSession's new features. The goal is to create a stronger visual hierarchy and reduce visual clutter to relieve the cognitive load of navigating VideoReview's many features.

Quick and rough click-through prototypes were built in Figma in order to validate assumptions and determine the feel of interactions. More refined prototypes were built towards the end of the Design Phase as hand-off material for development to reference.


Once the architecture and interactions are finalized, design / asset lockup documents with plenty of informational call outs are made to hand off to developers. Shout out to Figma for being the fastest design-to-development hand off tool with quick prototyping and built-in CSS code references :)

For UX consistency and development capacity purposes, our team attempts to avoid creating new design patterns. However, the Comment Labels required a new, in-line modal component as our full-screen takeover modal proved to be too invasive.

During development, the team uses Trello to track work, test and leave feedback, and post relevant Simpsons references.