Evolving a browser-based motion editor across two major releases — from stabilising core features and workflows to supporting AI-assisted creation.
Developer & Design Tools · SaaS
Industry
Product design · Design engineer
Role
In-house · v1.0 + v2.0 major releases
Type
2024-2026
Timeline
Web
Platform
Company
Creator workspace
Claude Code — post-QA fixes across the editor
The full editor: a browser-based workspace where Lottie animations are created, edited and prepared for handoff. Every area below sits inside this one surface.
01 / Overview
The brief
The editor had grown feature by feature: controls lived in different places depending on when they were added, and the timeline, outliner and properties panel each followed their own logic.
My work across v1.0 and v2.0 was to make these areas behave as one system — without asking existing users to relearn a tool they already used professionally.
My scope
The product needed to evolve across various surfaces, including layer hierarchy, properties, and AI-assisted creation. My focus was on redesigning core UX/UI, creating new workflows, enhancing features, and ensuring quality in implementation.
My role
Senior Product Designer on a ~20-person Creator team, close to the CEO, PO, engineering and other LottieFiles teams. Three modes: designed from scratch, improved existing UX/UI, and shipped changes in code.
Working constraint
In a mature professional tool, every change to an existing feature shipped iteratively — never as a single release.
02 / Creator v1.0
Property panel
Claude Code — implementation, UI consistency fixes
Consolidated controls that had accumulated in different places over time into a single panel, so new effects extend one structure instead of adding another location to learn.
New effects propeties in Property panel
Claude Code — prototype, then implementation
Extended the modifier set with new effects and custom fill and stroke options, reusing the existing control patterns so added capability did not add a new mental model.
Outliner
Claude Code — prototype, then implementation
Rebuilt the layer hierarchy and drag-and-drop so nesting and reordering stay predictable in deep compositions — the part of the editor users touch most often while working.
Assets panel
Claude Code — prototype, then implementation
Gave assets a dedicated panel previewing every resource in use, so checking or replacing an asset no longer means tracing it back through the layer tree.
Timeline and keyframes
Figma + Claude — handoff · Codex — QA rounds
Unified the timeline with keyframe editing, context actions and zoom, and rolled it out in stages so keyframing became learnable for new users without breaking existing habits.
03 / Creator v2.0
Discovery
After v1.0, growth flattened. I built an Amplitude dashboard to see where users stopped: which actions preceded an export, and where first-time sessions ended. The data showed most new users left before creating a first keyframe, which reframed the problem: the barrier was not editing power, it was the cost of producing anything worth editing.
Design implication
Motion System
Figma + Claude — handoff · Codex — QA rounds
Reusable motion values defined once and applied across selected layers — the consistency of design tokens, brought to animation.
Plugins system
Figma + Claude — handoff · Codex — QA rounds
Moved plugins out of the left menu into a dedicated panel holding both built-in and community plugins, keeping the main interface to the options needed while animating.
Plugins details view
Figma + Claude — handoff · Codex — QA rounds
Added a details view so users can judge what a plugin does before running it — a requirement once the panel had to hold plugins contributed by the community.
04 / Design → shipped
LottieFiles went AI-first in 2026. I used AI coding tools to carry changes from design and PRD straight through code, PR, and merge — engineering owned the final review.
My workflow
01 - Explore & frame
Me
AI
Structure scope, generate variants, draft an implementation plan
02 - Build & iterate
Me
Steer the build, review output, prepare for
production
AI
First working implementation from the plan,
PRD, and design
03 - Ship & QA
Me
Run QA, confirm post-review fixes
AI
Automated first-pass QA, flag issues, apply fixes
Engineer
Final code review and merge
The output
Delivery model
Small features and fixes owned end-to-end by the designer, including post-review fixes.
Complex features handed off as interactive prototypes in Claude Code, each on its own GitHub PR.
PRD writing shifted entirely to product designers.
QA as a workflow
Every change — designed, built, or fixed — went through review as a built-in step.
I built a reusable AI-assisted QA workflow that made reviews systematic and caught gaps faster: user stories, spacing, visual regressions, responsiveness, edge cases.
2
Major releases across a two-year engagement
7
Editor surfaces designed, rebuilt or quality-reviewed
38
Created and marged PRs
Motion System
An end-to-end design system for animation (values/tokens like Figma), applied across selected layers — the layer that scales motion.
Full ship cycle
Changes shipped as a designer: design → PRD → code → PR → merge, with prototypes as handoff and a reusable QA workflow.
What I learned
In AI-assisted creation, the quality of generation isn't the sole factor. The larger benefit was reducing the cost of creating an editable starting point before users needed to master the timeline.
