With ClipConnect you'll experience efficient, easy and enjoyable editing like never before. Personalize it to your preferences and assign the programmable buttons according to your needs. It's time for your next step.
Many analog tools for working with digital media have been in use for many years but are not perfect. Students have worked on Human Interface Devices to optimize or even reinvent interaction.
Since all three of us share an interest in video editing and have already accumulated significant experience in the field, our topic was quickly determined. However, it soon became apparent that we were using different video editing software, some of which also differed significantly from one another.
In the end, we decided to tailor our project to Adobe's Premiere Pro software, as it is the industry standard and offered us more opportunities to enhance our workflow.
So, first, we took a closer look at the workflow in Premiere Pro and identified three main functions to focus on. These are:
Since we left out additional editing steps such as color adjustments or effects, we were able to concentrate better on simplifying the workflow specifically for the cutting process. That is precisely the goal we set for ourselves with this project.
After setting our goal, we asked ourselves: "What video editing interfaces are already available on the market?" We collected examples in a shared board.
After we had gathered our initial impressions, it was time to visualize them. In doing so, we collected various ideas on how such an interface could look. Initially, we didn't concern ourselves with how unrealistic our designs might be, and we focused solely on generating as many different variations as possible. This allowed us to ensure that we had covered a wide spectrum of possibilities before committing to a concept.
We immediately liked the idea of a 'joystick' as it already encompassed many of the features we desired. This then evolved into the core concept of combining a joystick-like control with additional interface solutions.
Further sketches arose from this consideration.
Finally, we have settled on an interface consisting of four individual elements that encompass all the functions we desired. The arrangement of these elements should be customizable:
Initial Overview of the Functions of Each Element:
We implemented this concept in a simple cardboard prototype to gain a better understanding of the affordance, size, and arrangement of individual elements.
We put this initial cardboard prototype to the test during the 'Usability' course in a usability testing session.
The goal was to determine whether the individual interface elements were well-chosen in general and whether their mapping worked effectively. At this point, we aimed to focus less on minor details and instead ensure that the product is coherent as a whole.
The guiding question of our testing was:
Does the use of our interface improve the operation of the program?
We conducted testing with three users of varying experience levels, and here were our findings:
Since a complete implementation in Premiere would have been too time-consuming, and some of our features were not yet available in Premiere Pro, we opted to create a custom interface specifically for the prototype. To do this, we extracted parts of the current Premiere Pro interface using screen captures and then dissected it in Figma, reassembling it as needed.
We handed over this interface to ProtoPie and made it functional there. ProtoPie, in conjunction with Blokdots (software for Arduino), brought our interface to life. The result is a user interface that simulates our key functions, making it appear to viewers as if they are actually in Premiere Pro.
The following features are integrated into our prototype as final:
After all the features were finalized, we focused on the actual design and visually prepared our interface as a 3D model in Cinema 4D.
For form and materials, we drew inspiration from the internet. At times, we took cues from everyday objects, such as the shutter button of a camera or the button on a graphic tablet pen.
First, we created an Illustrator file with vectors that had the desired size for our elements. We were able to import these vectors into Cinema 4D, allowing us to create a model that also matched our desired dimensions.
We have opted for simple, elegant materials that are intended to emphasize the professional context of our interface. To achieve this, we have primarily used light and dark brushed aluminum, combined with rubber elements. The eye-catching feature is the bright orange LED light strip that surrounds all elements, creating a sense of a cohesive product.
To simulate a potential future scenario, we decided to build a brand. This process involved creating a name, logo, and packaging, among other things.
In the process of naming, we chose "ClipConnect." This name conveys a connection to video editing through "Clip" and also references the modular system with the word "Connect."
For the color of our logo, we opted for a vibrant and attention-grabbing orange, complemented by glossy and matte black colors. The square elements in the design are representative of our modular, square-based system.
When designing the packaging for our interface, it was essential to establish a clear connection to our product. Therefore, we incorporated the orange LED from the interface and mirrored it in the edges of the packaging. Additionally, we added adjectives in glossy font on a matte surface that define our product and brand.