LiveSessions is a synchronous screening experience designed for remote media review, enabling teams to be 'in the same room' across the world.
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.
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.
A designated note taker is required to record verbal comments from all parties involved. Organizing and distributing those comments after screening is time intensive.
Without physical presence and communication methods such as gestures and body language, remote teams struggle to effectively communicate.
Create a synchronous viewing experience utilizing Ci's existing VideoReview application, which houses many existing features that can supplement a live session for teams.
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.
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.
Built as an extension of the Ci VideoReview application, LiveSessions provides an interactive space for team members to collaborate in a secure environment.
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.
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.
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.
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.