Kaiber: Video Editor
Timeline
2025 - present
Roles
Web UX/UI, Figma, design systems, user research
Team
Philip Rugo (project manager), Leslie Ho (designer), Mary Zhang (designer)
Stakeholders
Engineering, Kaiber Studio
About
Kaiber is a next-gen creative technology company focused on human and AI collaboration for artists and creatives.
Currently designing and prototyping future Superstudio features such as video editing and procedural generation tools. Also conducting UX research on improving user experience.
For Superstudio web, I design and prototype an MVP video editor for users to sequence, edit and export audio and video sequences.
Context
Supporting more of the creative pipeline by expanding editor tools
Users highly desire a built-in video editor, capable of a range from simple clip sequencing to advanced track layering and audio-reactivity.
Aims
Currently users are successful at generating collections of materials for video and audio projects comprised of multiple sequences.
After generation, users must export selected media to external video editing tools to compile, sequence and edit. Users must switch back and forth between Superstudio and video editing to edit and regenerate clips in their sequence.
How can we build a highly desired video editor that further enables a seamless generative workflow for complete audio video sequences?
For users quicker prototyping and better iteration workflow
For stakeholders increase length of sessions and number of generations in Superstudio
Process
With developing a net new video editor feature, the process started with research to understand user needs. Moving forward to audits of common user editing programs, I rapidly prototyped core flows and wireframes to test feature impact and fit within the canvas user flow.
Scope Audit commonly used video editing features to prioritize essential and non-essential tools
Prototype Outline low-med fidelity explorations to test canvas integration and user flow
Validate Test medium fidelity prototypes to validate feature success, honing essential MVP features and “features for later versions”
Does it make video generation and iteration faster?
Does it fit into the canvas view, requiring minimal panels?
Do exports get to final versions or closer to final versions?
Results
Common edit tools drag media into timeline to sequence, trim, split and copy for basic editing
Regenerate and extend sequences linked media to flows and flows with pre-populated starting keyframes
Prebuilt audio and video transitions basic transitions for sequencing
Minimizable canvas panels for grouping new editing functionality into familiar layouts
Through internal beta testing and validation, the initial basic MVP editor performed no better than external editors and needed to expand beyond basic sequence/edit tools. We needed to incorporate generative features like linked media and extending flows to demonstrate value add beyond existing editors.
Outcomes
Through validation testing, 74% more users exported final versions of video sequences or closer to final versions pieces of media using the video sequencing editor. It reduced friction in iterating on generations, and users spent 38% more time iterating in editing sessions.
The user research methods I created for this project to identify pain points have been used in 50+ (and counting) user studies beyond this project.
The team learned that exploring and iterating before building was crucial in landing on effective features and successful MVP. Engineering had built a prototype a little early in the design phase, which inadvertently narrowed design scope and variations. This resulted in revisiting the discovery phase multiple times to ensure a broad enough scope for features.
Bonus outcomes: Design study frameworks
User study frameworks
Having learned from building eng prototypes too early, I wrote and implemented design study and process frameworks to ensure optimal outcomes at each design stage. These methods and frameworks have gone on to be used across design projects, such as improving user onboarding and scoping procedural generation implementation.
