2_imacs_flipped.png

Sony Catalyst Edit

 

Sony Catalyst Edit

Audio Video Separation Tool

September 2014 – December 2014

Deployed

 
 

I designed the UX flow, interaction, and UI elements for the import setting of adding media files to the timeline of Sony Catalyst Edit.

To comply with my non-disclosure agreement, I have omitted confidential information in this case study. The information in this case study is my own and does not necessarily reflect the views of Sony Creative Software.

AV_Separation_Export_1_2x.png
 
2.jpg
 


Context

Sony was rebranding and rebuilding its flagship video editing software, Sony Vegas Pro, to combat their shrinking user base in competition with Apple Final Cut Pro and Adobe Premiere. The rebranded suite was called Sony Catalyst Production Suite with the main editing software being Sony Catalyst Edit.

 

My Role

My main responsibility in this project was working on user interface design, user experience strategies, and optimizing workflows for the audio video separation in the software. The challenge was to ensure the workflows worked well with both desktop and touch-friendly devices while maximizing the usage of existing UI elements to optimize development time My task was to apply this premeditated design language to create interaction designs for feature sets for Sony Catalyst Edit.

My task was to pragmatically apply this premeditated design language to create interaction designs for feature sets for Sony Catalyst Edit - which was unreleased and still in the planning phase of the product road-map.

My most frequent collaborators consisted of a senior UX engineering manager and a senior UX designer. The team also consisted of a product manager and four software engineers.

 
 

The Challenge

When users add media files into Catalyst Edit, the audio-video (AV) separation tool must enable users to add new files with the option to import video-only, audio-only, and both video and audio format (default case).

5.png

Consider a critical use case for this feature: when in-class lecture material is filmed, the user may require a separation of audio and video to be edited separately for file size reduction for upload.

Ease of discovery and ease of learning were the most important criteria in designing the workflow. Video editing as a process has a steep learning curve and users may add files from many access points. Hence, for adding new files, previous mental workflows for adding new files to a project in file access systems, such as Windows or Dropbox, could be used to optimize the learning process for new users of Catalyst Edit. Desktop (physical mouse and keyboard) and mobile (touch-enabled display and virtual keyboard) users were two user groups that were tested separately.

 
 
 
6.png

User Insights

The primary user group that used Sony Catalyst Edit was the experts that worked with video media production in a professional setting - at a film studio or a media production agency. Expert user interviews were conducted with seven professional video editors from a wide range of backgrounds; none of the participants were audio or music production experts.

The same set of questions was asked and mock UI concepts were shown.  These UI concepts primarily explored how a touch paradigm may work with events. There were three interesting insights.

Ease of use: user’s most preferred way to add media files is to drag-and-drop from the native operating system explorer, like windows or MacOS

Files were commonly brought into the application and placed on the timeline either from their application explorer views or directly via drag and drop from the file systems explorer/finder. Users preferred to drag and drop files to the timeline and then editing in an environment where backups were auto-saved to the cloud.

Interoperability: users required the ability to import and export media in different formats and codecs

For those interviewed the primary method of media acquisition was from imports from camera, where the formats were varied according to the gear being used. There was a very wide range of media types used by professional video editors. In edge cases, for example, government film jobs required tape as the preferred archival format; 3D stereoscopic types were even used in certain cases.

Touch-enabled video editing was viewed as a nice-to-have feature; most professional video editors preferred the mental model of video editing with a keyboard and mouse

Five of the seven participants were excited about touch-enabled video editing as a means for editorial. The solutions suggested in the concepts were viewed as good and reasonable approaches to video editing. However, when asked whether the users preferred keyboard and mouse or touch screen, all of the participants preferred the keyboard and mouse option strongly.

 

Design Decisions

I decided to focus on four main design requirements as critical criteria to be tested:

  1. Default for adding an A/V file to the timeline: both audio and video are added

  2. Option to add just the video or audio component to the project

  3. Option to view inspector property to edit media in its audio or video format only

  4. Maximize the usage of existing UI elements to optimize development time

When users drag-and-drop media files on to the edit timeline, the default of the import setting would naturally include both the audio and video components of the file. No prompt window was necessary to confirm the selection choice. It was much less common for the user to only select the audio or video component for import. Hence, the option to separate the video and audio component is only available after the video is added to the project timeline. Alternatively, if the user manually added files to the project, then the option to only include audio or video component of the file would be shown in the import prompt.

As a secondary design consideration, there was precedence in using the radio button for multiple other features, such as viewing panel zoom. This reduced development time by reusing UI element already implemented.

This radio button was included in multiple panels of the editing window, including the inspector panel, the edit panel, and the selection panel. In subsequent design prints, higher specificity was to be included for both video and audio for easier manipulation. For audio, mono audio, stereo audio, and multi-channel audio was the next step in terms of separation.

AV_Separation_Export_03.png
 
 
 
AV_Separation_Button_03.png
 

Radio Button vs. Checkbox vs. Toggle Button

Radio button, check-boxes, and toggle buttons were the three design elements that were explored as options for the UI element to indicate to the user for audio-only, video-only, and default for manual import of both audio and video.

A toggle switch represents a physical switch that allows users to turn things on or off. A radio button allows for selection of a single option from a set of options. Check boxes allows for multiple selection of options.

Since there were three options were mutually exclusive, a three-state radio button was created to indicated to the user the media type being imported. Toggling between the “audio” and “video” option was considered; however, the default state of import would have required both to be highlighted and it was counter-intuitive to detract the audio component to keep the video component and vice versa. The design of the user interface elements mimicked the buttons on a cassette tape recorder. Instead of flat UI design, the keys were in the form of physical key for ease of access as well as clear status indication.

 

Design Iterations

Sony_AV_Separation_Wireframes_Iterations.png
Sony_AV_Separation_High_Fidelity_Iterations.png
 

Two indications on the timeline was incorporated to indicate whether the media being imported is audio-only or video-only. A green or purple overlay on the imported editing block was the first indication and a thumbnail of the sound wave or animation was used to indicate whether or not the file was audio or video only.

 
Video-only Display Overlay on Timeline Editing Block

Video-only Display Overlay on Timeline Editing Block

Audio-only Sound-wave Overlay on Timeline Editing Block

Audio-only Sound-wave Overlay on Timeline Editing Block

 
Inspector Panel with Audio-Video Separation Option

Inspector Panel with Audio-Video Separation Option

 

In consideration for touch device users, the user flow for adding media remained the same with an addition of a toggle button for “Add Media”. For touch user, ‘Add Media’ button is the new access point to add videos to the timeline. ‘Add Media’ is a toggle button and the ‘Add Media’ context menu remains open until the toggle button is toggled off manually by the user.

 
7.png
 
8.png

Reflection

It was a great experience learning how to maintain the spirit of innovation with seasoned veterans that worked on the same product for more than a decade.

I learned to balance collaboration with design merit. Working with many seasoned senior software engineers with more than a decade of dedication working on Sony Vegas, which was on version 10 when I first arrived at Sony, was both challenging and humbling. My designs faced fierce criticism from these tenured engineers, in­cluding the designs for audio-video separation tool. It was a hum­bling lesson in communication - having one-on-one conversations to resolve conflicts before the bi-weekly meeting where I presented design stories to be implemented. Always focusing on the design re­quirements and defending design decisions with research data and test result were key to these conversations.

The beta release of Sony Catalyst Suite at CES to garner great reviews for the ease of use and the drastic improvement in user experience over Sony Vegas Pro.

For future steps, I would love to evaluate the ease of use of the audio video separation tool and its impact in helping Sony and the software be more competitive in the marketplace. It would be interesting to evaluate the value and frequency of use over time.