Optimizing layer Connecting : Integrating Multi-Layer Connectors

Blings Playground

My objective was to empower proficient video creators to create personalized dynamic interactive videos by connecting the layers from their rendered projects to Data using different types of Connectors. all done on the online playground editor

The connectors were defined by the type of data and the “effects” they imposed on different layer types from the video project.

The problem emerged when I realized that connector-per-layer workflow leads to:

An abundance of connectors and one data field could affect multiple layers.
inefficient work processes- each layer had to be connected separately creating a repetitive action that affected task completion time and escalated user fatigue.

User flow of CTA creation using 3 connectors

Recognizing the pivotal role of connectors in establishing connections to data, the UI of the playground is designed around the connectors bar. Allowing the connector to be connected to several layers of the same type.

Advantages of the New Approach:

Less connectors - cleaner interface easy orientation.
~6 Click reduce per connected layer

Solution: Multi layer connectors

To simplify data integration, I designed connectors as “effects”, the connectors allowed users to form a connection between layers and data to:

Customize the videos colors, texts, images and videos.
Enhance layers with interactivty.
Add logic and triggers to the project.

Identified Problem: Visual overload
& Inefficient work processes.

Conceptualizing the connector as an "effect" allowed for the addition of various connector types, enriching the project's creative possibilities.

Result: