Cantina Labs
Key Impact & Outcomes
Cross-Platform System Scale: Engineered and expanded the core design system to maintain seamless UI and state logic across mobile and desktop surfaces during a major company pivot.
Deterministic AI State Logic: Mapped complex, multi-state conversational workflows and dynamic backend edge cases into predictable, user-controlled interfaces.
Accelerated Handoff Workflows: Built and tested functional desktop prototypes in React using Claude, eliminating logic drift with engineering and speeding up production cycles.
The Core Challenge & Pivot
Shifting from Consumer Social to Creator Infrastructure
Cantina began as a mobile-first consumer experiment, but evolved into a serious creator suite for AI digital twins. This pivot introduced three primary challenges:
The Trust Gap: Users were hesitant to delegate their voice, likeness, and identity to an automated system. The UI needed to move away from "black-box" magic and prioritize user transparency and control.
Platform Intent Disconnect: Mobile worked well for fast consumption and light updates, but deep creation and fine-tuning required a spacious, desktop-class workspace.
Handling AI Ambiguity: Machine learning outputs are naturally non-deterministic. The interface had to guide users smoothly through generation loading, error recovery, and granular voice and visual editing.
Strategic Design Principles
Transparency Over Magic: Show creators exactly what data the AI uses, what permissions are requested, and where human override takes precedence.
Surface-Specific Workflows: Treat mobile as the quick-access remote, and desktop as the professional studio.
Continuous State Sync: Ensure smooth handoffs so creators can record audio or capture media on mobile and seamlessly finish refining their clone on desktop.
Deep-Dive 1: The Desktop Studio (High-Density Workspace)
Designed a multi-pane creation environment optimized for detailed voice calibration, prompt tuning, and identity guardrails.
Focused on layout density and clean visual hierarchy to prevent feature overload while giving power users deep control.
Deep-Dive 2: Cross-Device Handoff & State Continuity
Mapped out the asynchronous creation flow, enabling creators to initiate voice capturing on mobile and automatically sync draft states to desktop.
Created explicit status feedback indicators so creators always know whether a digital twin is training, ready for review, or active.
System Architecture & Component Delivery
Scaling the Design System
To support both consumer mobile apps and the new professional desktop workspace, I expanded the core component architecture:
Tokenized UI Foundation: Standardized typography, spacing, and dynamic dark/light themes.
AI Interaction Components: Created standardized UI patterns for AI status badges, confidence scores, output controls, and fallback states.
Engineered Parity: Ensured desktop and mobile share identical semantic patterns so users never have to relearn core actions.
Key Takeaways & Leadership Insights
Trust Outweighs Novelty: Impressive AI capability means nothing if users feel a loss of control. High-stakes identity products require clear boundaries and manual overrides.
Platform Purpose Dictates Density: Adapting a product to desktop isn't just about scaling up mobile frames—it requires rethinking task density and workspace ergonomics.
Prototyping in Code Reduces Friction: Using live React prototypes eliminated back-and-forth alignment sessions, keeping design intent 1:1 with production software.
