Overview
Blinderstudio is the video editing platform built to edit videos recorded in Blinder. The development of Blinderstudio came from the need to remove customer reliance on external video editors. Since the long wait times and high costs associated with video editors are consistent pain points for our customers.
The development happened over a year and a half, split into two phases.
Phase 1
Define scope
Competitor Research
Userflow/IA
Wireframes
Prototyping
User testing
Blinderstudio Beta - first version released
Phase 2
UI Research
Wireframe
Prototype workshop
Final design
Updated design
The problem
Our team had minimal video editing experience and was overwhelmed by existing video editors on the market. Therefore I began research into existing online editors to understand their functionality and user flow. This helped the team define the scope of the project and the MVP.
The three common steps in all online editors:
Import video and assets into the video editor.
Edit and trim the video for desired visuals.
Publish the video to use online.
Overall IA, the video editor is only accessible by editing videos recorded in Blinder.
From left to right, competitor analysis included Veed, WeVideo and Adobe Premier
User Flow
This user flow is a Blinder customer experiencing the new video editor for the first time. The different phases highlights components essential for the editing experience.
Prototype & Testing
“Why is it going yellow if I hover over it? Whereas it’s actually when I click on it that the functionality is there for me to trim it. And so by hovering, I was expecting to see the arrows and it wasn’t until I clicked it”
Feedback on the changes includes:
Updated the trim tool to have blue outlines and a permanent appearance upon selection instead of on hover.
The removal of social media export because limited choices provided no point of difference from competitors.
An update on the “Export” button text caused user confusion.
User on the welcome screen
User testing the trim tool
Initial sketches of the video editor
Blinder Studio Beta
The beta version began only with the trim feature, but new tools were later added on. Such as an image library and text tool. However, these tools had limited space to grow in a vertical editor.
It was then decided to expand the editor into a full screen to accommodate future growth in the product.
First version of Blinderstudio beta with only the trim capabilities.
Fullscreen Editor
The addition of the asset library and text tool made the vertical video editor a poor experience to edit. At this point we decided to expand the editor into a fullscreen design and utilize all the space available for a smoother better editing experience.
Based on the research done in the initial design, we updated the UI to use the full-screen and future-proofed features to allow areas of expansion.
Information architecture
Prototyping & feedback session
We conducted physical prototyping sessions with professional videographers for feedback. A paper editor was used to give testers the freedom to manipulate video layers mimicking the online experience. This helped us gain knowledge to improve the layer editing in the editor.
Tester manipulating layers while explaining their thoughts behind the action.
“The panel looks cool, but if I’m editing I’d look at it 0% of the time, because you already know what it is, that information you already know it.”
While online testing in black and white provided UI and user experience feedback.
Make the preview screen fill the area.
Remove the attribute panel as it provides limited purpose.
The Zoom placement works great.
Numbered layers were confusing to read.
BlinderStudio
The feedback was incorporated to refine the features and a fullscreen, dark themed Blinderstudio was released.
A demo is available on request.
