TOBi – Breathing Life into AI
Lead Motion Designer
2022 - 2025
When I joined Vodafone, TOBi existed as a static chatbot avatar – a flat graphic with no animation or personality. My hypothesis was that introducing fluid, performant animation would make the assistant significantly more expressive and engaging, boosting conversation initiation rates and building critical user trust in an era when AI conversations were not yet widely adopted.
From Static to Expressive
To increase conversation engagement, the static TOBi assistant was rigged intricately within Adobe After Effects to achieve a sophisticated faux-3D aesthetic with highly expressive motion. To solve performance degradation across varying device capabilities, these complex animations were exported as remarkably lightweight JSON files using the Lottie framework – ensuring rich character animations could be deployed across mobile, web, and rapid prototypes without battery drain or UI thread blocking.
After Effects
Complex rigging
Lottie JSON
Lightweight export
Cross-Platform
Mobile, Web, Prototype
Systematizing Emotion
Engineered a vast emotional matrix of 28 distinct states covering the most common reactions the assistant requires. Every animation is exactly 2 or 4 seconds in duration, and – critically – every animation begins and ends on the exact same positional and rotational coordinates. This cyclical design allows developers to programmatically stitch different animations together in real-time, creating a continuous, unbroken performance.
Context-Aware Interactivity
TOBi doesn't move randomly – it reacts intelligently to the state of the product and the sentiment of user input. The system employs both UI triggers and Chat triggers.
UI Triggers
- Repeated wrong password → ‘Angry’ animation
- Scroll beyond dashboard limits → ‘Surprise’ easter egg
Scroll limit easter egg
Wrong password reaction
Notification received
Product Integration
TOBi on the New Homepage
TOBi evolved with each homepage redesign, with refined animations, placement, and behavior to stay mobile-first, context-aware, and seamlessly integrated into key user journeys.
Homepage Redesign
Refreshed layout with bottom navigation and TOBi entry point.
TOBi Entry Point
TOBi is draggable – users can reposition it anywhere on screen.
Impact
+9%
Conversation engagement
+10%
Task completion rate
28
Distinct emotional states