Feb 2025 - current
Roles
UX/UI, Figma prototyping, design systems, user research, usability
Team
Philip Rugo, Manager
Leslie Ho, designer
Mary Zhang, designer
Kaiber is a next-gen creative technology company focused on human and AI collaboration for artists and creatives.
Currently designing and prototyping future features of Superstudio such as video editing, mobile app Flows (generative models) templates and Flow procedural generation tools. Also conducting usability studies on novice generative tool users.
Video Editor
For Kaiber Superstudio, I designed and prototyped a video editing MVP for users to sequence, edit and export generations as videos.
(context)Users highly desire a built-in video editor, ranging from simple clip squencing to medium-level capabilities of track layering and audio-reactivity.
Motivated by user success at generating large collections of materials on the canvas and frequently exporting generations into external editors to sequence videos, images and audio together.
BriefHow can we build a highly desired video editor that further enables the generative workflow and intuitively fits into the canvas?
Video sequencing from collection
Selecting media from timeline, highlighting linked flow prompt on canvas
Re-editing prompt for regeneration
Regenerated media to sequence in timeline
(features)Superstudio’s node-based canvas allows deep, iterative workflows, the editor maintains similar iterative workflows with sequenced media linked to flows.
linked materials
draggable canvas
timeline editing
pre-built transitions
for ease
Common edit tools such as media menus, trim, split and copy, the editor maintains familiar video editing features.
Using pre-existing panels avoids canvas crowding, grouping new editing functionality into familiar features.
Prebuilt audio and video transitions in timeline brings media together.for depth
Sequenced media linked with their generation flows, allowing reprompting and regenerating sequenced media, tapping into fine-tuning workflows.
Download sequenced media separately for custom external pipelines.
Linked materials
Video materials are linked with their generation flows, allowing users to revisit and iterate on their sequenced media
Timeline editor
Familiar edit features such as add media, trim, split and copy tracks
Minimizable panels
Utilizing pre-existing Canvas panels maintains minimal workspace crowding
Pre-built audio video transitions
Prebuilt audio and video transitions available in timeline links materials together
The editor feature fits in the canvas layout with minimal disruption, focusing on generation.
Using and updating existing design libraries and canvas tabs, the editor stays hidden until desired.
Full-screen and half-screen draggable video preview panels and minimizable timeline editor enables custom canvas layouts.
Draggable and minimizable editor pane user experience prototypes for custom canvas layouts
Key editor features user flow
Key Toolbar placement user flow
Key Transition and settings user flow
Canvas Activation User Studies
Metrics showed a significant number of first-time user churn, resulting in sign-ups for Superstudio that don’t end up generating media.
Wrote study methods and conducting user studies and A/B testing with participants investigating onboarding interface pain points.
Hotjar user behavior analytics recordings of first-time user onboarding churn
(context)
Spearheaded user studies by observing naturalistic behvaiors in HotJar recordings to pinpoint where users were exiting the canvas before selecting a generative model flow. Mouse trails show that users become progressively confused in the complexity of menus and eventually exit without starting to generate.
BriefWhere are users churning after the "Create" button and within the model menu, and how do we redesign the flow menus to avoid overwhelm?
Control
Control prototype isolating current flow interface
Prototype A
Prototype testing procedural menus appearing in progression
Prototype B
Prototype B testing large format generation preview
Wrote study methods for on-going user studies, conducting A/B testing and evaluative interview results from participants. Testing between procedural and static menu formats to evaluate information hierarchy.
User testing framework: methods, interview layout and questions -> click to drag and expand