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.
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
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.
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.
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.
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.