Animatix Case Study

The Situation

Animatix had a working V2 product with active customers and strong traction. To compete at the next level and secure their seed round, they needed V3—a complete evolution with agentic features and deeper creative controls that would differentiate them in a competitive AI video market.

The challenge: Their lead developer had built functional V3 features, but the UX was fragmented. With a major industry event (IBC Amsterdam) approaching where they'd demo to investors and potential enterprise customers, they needed a cohesive, professional interface that matched the sophistication of their AI capabilities.

The Challenges

1. Technical Complexity
V3 wasn't a simple redesign—it introduced fundamentally new concepts:

• Multi-model AI generation workflows
• Complex version management and branching
• Frame-by-frame editing with multiple tool modes
• Real-time collaboration features

2. Timeline Pressure
A major investor and customer event created a hard deadline to showcase the new platform capabilities.

3. Code-First Requirement
With a lean engineering team already stretched on core AI features, traditional Figma handoffs would create months of additional development work. They needed someone who could work directly in their Next.js/React codebase.

4. Architectural Ambiguity
V3 had powerful features but unclear user mental models. The branch system confused users. Navigation patterns were inconsistent. The challenge wasn't just making it "look nice"—it was solving fundamental UX architecture problems.

What I Delivered

Complete UX Architecture Transformation:

• Redesigned navigation and information architecture across 20+ screens
• Established cohesive dark-theme design system using shadcn components
• Solved the "branches vs versions" mental model problem with flat version structure

Five Major Feature Implementations:

Storyboard 3.0

• Grid layout for 8+ shots with clear visual hierarchy
• Hover states showing characters, locations, and generation status
• Shot action toolbars for common workflows
• Drag-drop scaffolding prepared for backend integration

Version Management

• Transformed confusing hierarchical branches into intuitive flat versions
• Left sidebar showing all versions with one-click switching
• Visual indicators for active version and creation timestamps
• Maintained backend branch logic while simplifying frontend UX

Moodboard System

• 4-model comparison interface (DALL-E 3, Claude Vision, Midjourney v6, Stable Diffusion XL)
• Reference image drag-and-drop workflow
• Character and asset library organization
• Generation history and settings management

Frames Architecture

• Full-screen frame editor with collapsible timeline
• Tool panel ready for extensibility
• Clear separation between "Regenerate" and "Edit" actions
• Resizable panels for focused workspace

Comments & Collaboration

• Inline comment threads on any frame
• Emoji reaction support (30+ emojis)
• Status filters (All / Open / Resolved)
• Real-time updates preparation

Technical Delivery:

• All work delivered as pull requests directly to their repository
• Loom video walkthroughs for each major feature
• Component documentation for team maintenance
• No Figma files requiring interpretation—just working code

The Approach

Three one-week sprints, each targeting a critical user flow. No Figma handoffs—I worked directly in their Next.js/React codebase using Cursor and AI-assisted development to achieve pixel-perfect designs at unprecedented speed.

Results

• Polished V3 demo ready for IBC Amsterdam — secured investor meetings and enterprise conversations
• 20+ screens shipped directly to production — zero re-implementation needed
• 4 weeks total delivery — from first call to deployed features
• Engineering team unblocked — clear UX patterns allowed them to focus on AI roadmap

"This looks really good Charlie, love it, nice and refined, I'll merge it in"
— Ivan O., Lead Developer, Animatix

"Really love what you are bringing to the table"
— Sylvain M., Co-Founder, Animatix

Technical Approach

Stack: Next.js, React, TypeScript, Convex, shadcn/ui, Tailwind
Method: Direct code implementation using Cursor AI with multi-agent orchestration
Delivery: Pull requests with Loom walkthroughs, merged same-day

The key was eliminating the traditional design-to-development gap. By working directly in code while maintaining pixel-perfect design standards, I delivered in weeks what typically takes months.