Back to Home

Ci Case Study

Mediabox Improvements

Ci Mediabox is a content distribution solution that enables users to curate and share rich media files with built-in security options to keep your content safe.

Because Ci is developed using a scrum project management method, changes and improvements are continuously added to our product. The work below demonstrates a series of improvements completed for creating and viewing a Mediabox in late 2017.

Built with ♥ by the Sony Ci Team

Check out Mediabox in Production

The Production Workflow

User Goals: Senders and Recipients

Ci is designed to cater to all steps of the media professional workflow, from pre-production to archiving. Mediabox is an excellent tool to send large media files to collaborators who may not have access to your Ci Workspace.

There are two distinct users with different goals for Mediaboxes:


Create and Send Quickly, Mediaboxes should be fast and intuitive to use to keep up with professional workflows where time is of the essence.

Secure and Flexible, sensitive content can be shared confidently with an array of security, permission, and curation options.


Easy to Review, the content should always be the highlight, with any interface element or interaction acting as support / secondary.

Scalable regardless of size or content type, reviewing 300 video files should be as easy as reviewing 3 image files.


Clutter and Fatigue

Creating a Mediabox was cumbersome and required a fair amount of time to complete; the massive amount of options presented and disorganization made creating and curating mediaboxes extremely difficult for first time users.


Create a Mediabox

As the creator/"custodian" of the content and data of the MediaBox, senders are required to: 1) Select and organize the display of content, 2) Set the access security level / permissions, and 3) Distribute the file to all necessary parties.


Setting Permission Levels

Mediaboxes have 3 permission levels: Public; anyone with the link can view the Mediabox and its contents, Protected; a password is required to open and view the Mediabox, and Secure; only named Ci members can access the Mediabox.

Media professionals highly value the security of their assets. These permission levels aim to protect Ci users and their content from unwanted exposure.


Old Mediabox: Viewing Limits

The modern Ci Mediabox have been around since 2014, and not much has changed since then. Mediaboxes had to grow with our evolving customer use cases and growing power users. The original single column layout shown above was no longer working for users distributing hundreds of files in a single Mediabox.


Viewing a Mediabox

Ci users often use Mediaboxes to send files to external collaborators who are not a part of their Ci Workspaces. They often do not have Ci accounts; thus, viewing a Mediabox was approached as viewing files outside the castle walls. The light theme was chosen to increase legibility and appear more approachable.

Mediaboxes are also fully responsive from desktop to mobile, as many media professionals review content on the go.


3 Usecases, 3 Views

Three unique customer usecases were identified from conversations with customers: editorial viewing (when large, high quality images are valuable), high quanitity review (needing to comb through hundreds of images), and detail scanning (where the file name and technical metadata is more important than the thumbnail). Three views that can be quickly toggled were implemented to support these scenarios.


View: Large Thumbnails

For sharing hero imagery, distributing content for client feedback, and sharing pictures of your cat’s Halloween costume to coworkers. The default view of Mediaboxes.


View: Small Thumbnails

Goal: fit as much content into the first read as possible. For Mediaboxes with large amounts of files


View: Detail List

When long filenames and technical details are the most important first read of information. For folks that need to manage or review large amounts of files.

Mediabox Available in Sony Ci


Design and Development

The create / view Mediabox workflow was charted out to find opportunities to speed up Mediabox creation and improve Mediabox viewing.

For example: instead of using 'internal' terms for permission level 'modes' (Public, Protected, Secure), we could allow passwords to be set or only allow members to view. Microcopy improvements were well received during customer feedback sessions.

Clickable prototypes were made for multiple "Create a Mediabox" concepts and presented to the team for review.

All 'Create a Mediabox' modals utilize our established "Light Modal" pattern, which makes designing the higher level architecture much simpler and development handoff smoother.

A high level wireframe was created to identify and determine the placement of actions and read-only elements.

High level microframes, lock ups, and final compositions for small, large, and detail list views

Toggle left information panel to view more files
Click on a thumbnail to preview in a lightbox
Swapping views has a quick and subtle transition

Quick and dirty animation prototypes made with Principle to demonstrate intentions for developers