ClipConnect
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.
Course Description:
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.
Noah Hielscher
Mona Kuebelbeck
Jana Schaeffner
2023
Ideas
Topic
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.
What do we want to achieve?
So, first, we took a closer look at the workflow in Premiere Pro and identified three main functions to focus on. These are:
- Timeline navigation.
- Arranging clips.
- Editing clips.
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.
Existing interface solutions
After setting our goal, we asked ourselves: "What video editing interfaces are already available on the market?" We collected examples in a shared board.
First sketches
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.
Crazy 8:
Analog sketch:
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.
Final Conzept
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:
- A cross-lever control for movement and navigation within the timeline.
- A rotary knob for zooming in and out of the timeline.
- A slider for adjusting the length of clips.
- Buttons for various shortcuts.
Concept sketch:
Functions
Initial Overview of the Functions of Each Element:
First cardboard prototype
We implemented this concept in a simple cardboard prototype to gain a better understanding of the affordance, size, and arrangement of individual elements.
Usability Testing
We put this initial cardboard prototype to the test during the 'Usability' course in a usability testing session.
Goal
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?
Result
We conducted testing with three users of varying experience levels, and here were our findings:
- The mapping of individual elements works well, but it depends more on the user's familiarity with the controls.
- The joystick needs improvement in terms of haptic feedback, size, and button placement.
- The rotary dial requires a stop point and should not allow over-rotation.
- Overall, the prototype is too large and needs to be scaled down.
Prototyping
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.
Functions
The following features are integrated into our prototype as final:
3D-Model
After all the features were finalized, we focused on the actual design and visually prepared our interface as a 3D model in Cinema 4D.
Inspirations
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.
Implementation
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.
Materials
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.
Completed Model
Brand
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.
Explore the 3D Model
Process
