Coach Comp. Interaction System
OUTCOME
Reduced engineering iteration cycles and elevated conversational UX through state-driven micro-interactions.
FEATURES
Dynamic Conversational UI Logic, Real-Time Data Reactivity, Reusable Coach Component
Problem
The AI Coach needed to feel responsive and alive across different states (listening, thinking, speaking), but traditional static UI and simple animations couldn’t reflect real-time interaction or handle complex input states like voice, taps, and system events.
Solution
I designed a state-driven interaction system in Rive that maps user inputs and system events directly to visual behavior. Instead of triggering isolated animations, the coach operates as a connected state machine, allowing it to transition fluidly between listening, muted, speaking, and idle states based on real-time interaction.
Product
This Rive-powered AI Coach component functions as a reusable, interactive system embedded across the app, enabling dynamic feedback during onboarding, workouts, and voice interactions.
Key Features
- A fully connected state machine that handles multiple inputs (tap, mic, keyboard, mute/unmute)
- Real-time transitions between states like Idle, CoachTalking, and MicUnmuted
- Event-driven animation logic that syncs with voice and interaction states
- A scalable architecture that allows engineering to hook into a single component rather than managing separate animations.