Studio Connect

Designing the first scalable licensing platform for media distributors

Overview

As the founding designer of Studio Connect, I led the end-to-end design of this enterprise platform—from research and strategy to architecture, prototyping, and visual design.


Studio Connect is a web-based application that helps media content distributors manage licensing across digital platforms. Initial conversations with major studios revealed fragmented, manual workflows, and our research confirmed a market gap: existing tools lacked usability and didn’t support the full licensing lifecycle.


We built Studio Connect to fill that gap—streamlining complex processes and enabling seamless collaboration across the digital content supply chain.

Company:

Company:

Company:

Company:

Whip Media

Whip Media

Whip Media

Whip Media

Role:

Role:

Role:

Role:

Founding Designer

Founding Designer

Founding Designer

Founding Designer

Year:

Year:

Year:

Year:

2017

2017

2017

2017

Laying the Groundwork


Working in a lean, fast-paced environment, I jumped right into whiteboarding and organized several collaborative sessions with both the UI team and stakeholders. Involving stakeholders early helped align the team on the product vision and surface ideas that accelerated our thinking.


Over the next few days, I created low-fidelity sketches and paper prototypes to explore layout options and interaction patterns. Sketching is my go-to starting point—it helps bring ideas to life quickly, making it easier to evaluate, iterate, and get immediate input from users and partners.


Once core flows took shape, I translated them into wireframes using Balsamiq to visualize and test real use cases. With internal users readily available, we adopted a “test early, test often” approach—collecting fast feedback on what felt intuitive and what needed refinement.

Below are a few early screens that went through multiple iterations as the experience evolved.

Studio Connect - Merge row data

Studio Connect - Create form

Studio Connect - Edit in-place

Studio Connect - Details view (top-slider tray)

Designing for an “Excel” mindset

After solidifying the information architecture and refining solutions for common use cases, I transitioned into high-fidelity design. Using Photoshop, I brought life and color to the screens, turning wireframes into tangible, user-friendly interfaces.


Given that this was an enterprise-level application handling vast amounts of data, designing for both efficiency and clarity was paramount. Many users came with an "Excel mindset," so balancing fast data entry with intuitive interactions was a key challenge.


Despite facing some significant roadblocks, we pushed through and arrived at a solution that not only met user expectations but also streamlined the workflow. Below are some of the key design challenges we encountered along the way.


DATA FILTERING

Problem


Designing user interfaces for filtering data tables can be challenging, especially when dealing with a lot of different parameters, each with multiple values and inclusion/exclusion criteria, and then tying all that with keyword search.


Our users wanted the flexibility to edit every parameter that the data is analyzed across. Additionally, they wanted the ability to select individual values to include and exclude. Good old and well-established design patterns do exist for a majority of these scenarios. However, when you throw in decreased real estate, contextual actions and ease of use, the problem becomes much larger.

Ideas we scratched out


We went through a multitude of approaches, some of them being:


  1. Collapsable tray with dedicated filter options

  2. Tagged keywords with an extended search box that converted search keywords into tags

  3. "Assisted search" which provided pre-set parameters to filter content by

  4. Rule-based filters with added flexibility to include/exclude individual values


Though many of the tested approaches addressed different problems, none of the above provided an end-to-end solution.

After solidifying the information architecture and refining solutions for common use cases, I transitioned into high-fidelity design. Using Photoshop, I brought life and color to the screens, turning wireframes into tangible, user-friendly interfaces.


Given that this was an enterprise-level application handling vast amounts of data, designing for both efficiency and clarity was paramount. Many users came with an "Excel mindset," so balancing fast data entry with intuitive interactions was a key challenge.


Despite facing some significant roadblocks, we pushed through and arrived at a solution that not only met user expectations but also streamlined the workflow. Below are some of the key design challenges we encountered along the way.


DATA FILTERING

Problem


Designing user interfaces for filtering data tables can be challenging, especially when dealing with a lot of different parameters, each with multiple values and inclusion/exclusion criteria, and then tying all that with keyword search.


Our users wanted the flexibility to edit every parameter that the data is analyzed across. Additionally, they wanted the ability to select individual values to include and exclude. Good old and well-established design patterns do exist for a majority of these scenarios. However, when you throw in decreased real estate, contextual actions and ease of use, the problem becomes much larger.

Ideas we scratched out


We went through a multitude of approaches, some of them being:


  1. Collapsable tray with dedicated filter options

  2. Tagged keywords with an extended search box that converted search keywords into tags

  3. "Assisted search" which provided pre-set parameters to filter content by

  4. Rule-based filters with added flexibility to include/exclude individual values


Though many of the tested approaches addressed different problems, none of the above provided an end-to-end solution.

After solidifying the information architecture and refining solutions for common use cases, I transitioned into high-fidelity design. Using Photoshop, I brought life and color to the screens, turning wireframes into tangible, user-friendly interfaces.


Given that this was an enterprise-level application handling vast amounts of data, designing for both efficiency and clarity was paramount. Many users came with an "Excel mindset," so balancing fast data entry with intuitive interactions was a key challenge.


Despite facing some significant roadblocks, we pushed through and arrived at a solution that not only met user expectations but also streamlined the workflow. Below are some of the key design challenges we encountered along the way.


DATA FILTERING

Problem


Designing user interfaces for filtering data tables can be challenging, especially when dealing with a lot of different parameters, each with multiple values and inclusion/exclusion criteria, and then tying all that with keyword search.


Our users wanted the flexibility to edit every parameter that the data is analyzed across. Additionally, they wanted the ability to select individual values to include and exclude. Good old and well-established design patterns do exist for a majority of these scenarios. However, when you throw in decreased real estate, contextual actions and ease of use, the problem becomes much larger.

Ideas we scratched out


We went through a multitude of approaches, some of them being:


  1. Collapsable tray with dedicated filter options

  2. Tagged keywords with an extended search box that converted search keywords into tags

  3. "Assisted search" which provided pre-set parameters to filter content by

  4. Rule-based filters with added flexibility to include/exclude individual values


Though many of the tested approaches addressed different problems, none of the above provided an end-to-end solution.

Solution


After testing with our users and whiteboarding various solutions, we came to the collective consensus to combine a few of the approaches mentioned above. This gave rise to our sophisticated column filter approach which gave users granular control over the data they were analyzing and making decisions on while ensuring they don’t lose the current operating context. A user could filter by various selection criteria like contains, not contains as well as perform an exact match, Combine this with the auto-complete search box and you have yourself an extremely powerful tool to slice and dice your data!Ideas we scratched out


We went through a multitude of approaches, some of them being:


  1. Collapsable tray with dedicated filter options

  2. Tagged keywords with an extended search box that converted search keywords into tags

  3. "Assisted search" which provided pre-set parameters to filter content by

  4. Rule-based filters with added flexibility to include/exclude individual values


Though many of the tested approaches addressed different problems, none of the above provided an end-to-end solution.

Studio Connect - contextual data filtering

STEPPED FORM (WIZARD)

A stepped form or wizard is a structured series of dialogs that takes inputs/questions from users and uses the choices/answers to produce a result. Furthermore, it guides users through the interface, step by step, to do tasks in a prescribed order.

Problem


As the list of information required by the user kept increasing, with the introduction of country-specific metadata, it soon became apparent that a simple scrollable form layout is not going to work. The creation process was fairly complex, and we had to think of a solution that was less overwhelming for the end user.

Solution


We chose the wizard-style approach as it helped break down the complex workflow into recognizable and manageable sections, thus simplifying the data-entry process for the user. Labeling the steps further helped identify where a user is in the process and how many more steps are remaining. The form also had some dependencies, where early data influenced later data, so a stepped form helped create the right pace by preventing unnecessary information.

A stepped form or wizard is a structured series of dialogs that takes inputs/questions from users and uses the choices/answers to produce a result. Furthermore, it guides users through the interface, step by step, to do tasks in a prescribed order.

Problem


As the list of information required by the user kept increasing, with the introduction of country-specific metadata, it soon became apparent that a simple scrollable form layout is not going to work. The creation process was fairly complex, and we had to think of a solution that was less overwhelming for the end user.

Solution


We chose the wizard-style approach as it helped break down the complex workflow into recognizable and manageable sections, thus simplifying the data-entry process for the user. Labeling the steps further helped identify where a user is in the process and how many more steps are remaining. The form also had some dependencies, where early data influenced later data, so a stepped form helped create the right pace by preventing unnecessary information.

A stepped form or wizard is a structured series of dialogs that takes inputs/questions from users and uses the choices/answers to produce a result. Furthermore, it guides users through the interface, step by step, to do tasks in a prescribed order.

Problem


As the list of information required by the user kept increasing, with the introduction of country-specific metadata, it soon became apparent that a simple scrollable form layout is not going to work. The creation process was fairly complex, and we had to think of a solution that was less overwhelming for the end user.

Solution


We chose the wizard-style approach as it helped break down the complex workflow into recognizable and manageable sections, thus simplifying the data-entry process for the user. Labeling the steps further helped identify where a user is in the process and how many more steps are remaining. The form also had some dependencies, where early data influenced later data, so a stepped form helped create the right pace by preventing unnecessary information.

BATCH EDITING


Batch editing simply means that you can edit properties of elements simultaneously, without the need to apply changes to each element separately. In our use case, users would typically find themselves changing date ranges or language and territory values for a piece of film or TV content they would like to make available to their customers across the globe.

Problem


Since most of the elements had values assigned to them, we needed a clear visual way to convey this to the user. More so, a user would come in and change only 1 or 2 fields and leave the rest unchanged.

Solution


We iterated over a few variations, and came up with the idea to display input fields with a disabled "no change" placeholder text and add a lock icon to denote a locked field. On clicking the icon, the field is "unlocked" and the user can now override the existing value. The icon now changes to an open lock to indicate a value has been edited and overwritten. We could have simply kept the field enabled and shown the value, but the issue there was sometimes a user could forget which values were changed if they are interrupted or multitasking.

Known issues


Although this approach solved the problem at hand, it gave rise to some smaller issues. There was no way to expose what the existing value/s for a field were. Since the user could always exit out of the modal context and find this information in the data table, we were not wholly concerned by this. This solution prevented users from adding multiple values to each field. So for example, if a user wanted to change the current language for an on-demand movie release from french to maybe english and german, there was no good way to do that in the existing model. Without getting into the technicalities of why this wouldn't make sense, it is safe to say this was not a typical use case that we needed to optimize for.

BATCH EDITING


Batch editing simply means that you can edit properties of elements simultaneously, without the need to apply changes to each element separately. In our use case, users would typically find themselves changing date ranges or language and territory values for a piece of film or TV content they would like to make available to their customers across the globe.

Problem


Since most of the elements had values assigned to them, we needed a clear visual way to convey this to the user. More so, a user would come in and change only 1 or 2 fields and leave the rest unchanged.

Solution


We iterated over a few variations, and came up with the idea to display input fields with a disabled "no change" placeholder text and add a lock icon to denote a locked field. On clicking the icon, the field is "unlocked" and the user can now override the existing value. The icon now changes to an open lock to indicate a value has been edited and overwritten. We could have simply kept the field enabled and shown the value, but the issue there was sometimes a user could forget which values were changed if they are interrupted or multitasking.

Known issues


Although this approach solved the problem at hand, it gave rise to some smaller issues. There was no way to expose what the existing value/s for a field were. Since the user could always exit out of the modal context and find this information in the data table, we were not wholly concerned by this. This solution prevented users from adding multiple values to each field. So for example, if a user wanted to change the current language for an on-demand movie release from french to maybe english and german, there was no good way to do that in the existing model. Without getting into the technicalities of why this wouldn't make sense, it is safe to say this was not a typical use case that we needed to optimize for.

BATCH EDITING


Batch editing simply means that you can edit properties of elements simultaneously, without the need to apply changes to each element separately. In our use case, users would typically find themselves changing date ranges or language and territory values for a piece of film or TV content they would like to make available to their customers across the globe.

Problem


Since most of the elements had values assigned to them, we needed a clear visual way to convey this to the user. More so, a user would come in and change only 1 or 2 fields and leave the rest unchanged.

Solution


We iterated over a few variations, and came up with the idea to display input fields with a disabled "no change" placeholder text and add a lock icon to denote a locked field. On clicking the icon, the field is "unlocked" and the user can now override the existing value. The icon now changes to an open lock to indicate a value has been edited and overwritten. We could have simply kept the field enabled and shown the value, but the issue there was sometimes a user could forget which values were changed if they are interrupted or multitasking.

Known issues


Although this approach solved the problem at hand, it gave rise to some smaller issues. There was no way to expose what the existing value/s for a field were. Since the user could always exit out of the modal context and find this information in the data table, we were not wholly concerned by this. This solution prevented users from adding multiple values to each field. So for example, if a user wanted to change the current language for an on-demand movie release from french to maybe english and german, there was no good way to do that in the existing model. Without getting into the technicalities of why this wouldn't make sense, it is safe to say this was not a typical use case that we needed to optimize for.

Studio Connect - batch editing

COLLECTIONS


Since many of the daily actions are done asynchronously, a user could come in one day make changes, enable filters, perform their analyses; and come back another day and take an action on the analyzed data. To provide users an easy way to reference this data later, we came up with the concept of "saving your current workspace as a collection". This tiny tool packed in a lot of power as it opened doors for cross-team collaboration, creating an approval workflow process and performing bulk operations.

Studio Connect - collections popover

Usability Testing

Since we followed an MVP (Minimum Viable Product) approach, it helped us reduce actual complexity by eliminating unnecessary features. Our basic approach to gather feedback was to engage participants in one-on-one sessions, observe them and ask probing questions as they attempted to use the interface to accomplish tasks. One of the crucial takeaways was it helped us find where users got stuck. We validated some assumptions around our approaches and found pain points that the team failed to catch during the ideation and development phase.

Next Steps

After having successfully built version 1 of our product and testing it out with users, we used the data to build a product roadmap. It was important to center our roadmap on what problem areas we failed to address in the prior version and which ones we could work on improving. For cases where our assumptions were disproved, we planned to consider a pivot. Our mantra always being "fail fast, or keep climbing."