Vodafone Motion System
Lead Motion Designer
2022 - 2025
As Vodafone's first in-house Motion Designer, I encountered a fragmented digital ecosystem suffering from inconsistent, slow animations that hindered engineering delivery and confused users. I architected a scalable, physics-based motion framework from the ground up, translating kinetic principles into robust design tokens to unify the experience across web, iOS, and Android for millions of users.
Patterns
Motion Principles
Examples of Vodafone's motion principles in action, grouped into four categories:
Hierarchy
Sliding content reveals secondary information without breaking context. Expanding panels reinforce continuity, solving complaints that state changes felt like disorienting jump cuts.
Everything is ok
Current bill panel
Tabbed content
Expanding offer panel
Guidance
Items slide in with distinct momentum, serving as visual hints for swipe gestures that usability tests revealed were being missed. Subtle cues encourage interaction with primary CTAs.
Tray swipe suggestions
Tobi notification
Tap to reveal
Price picker
Feedback
Clear, instant feedback mechanisms transform mundane functional steps into satisfying interactive moments. Tactile animations integrated with device haptics elevate basic actions.
Touch states & haptics
Error states
Skeleton load
Expression
Animated system icons add polish without affecting performance. High-fidelity illustrations celebrate milestones, and gamified elements turn everyday interactions into micro-games.
System icons
Hi-fi icons
Illustrations
TOBi
Gamification
Gamification (advanced)
Parallax scroll
Deliverables
From Design to Production
MUIs (Motion user interfaces), MDGs (Motion developer guides), MPRs (Motion prototypes), Lottie & other animated assets.
High-fidelity video specs showing animations at full speed and slow motion, ensuring accurate visual handoff to engineering teams.
Frame-by-frame keyframe data paired with video references, explicitly stating exact start times, end times, properties, and easing curves.
Interactive prototypes built in Principle and Figma with embedded narration, bridging the conceptual gap between design intent and engineering execution.
Motion Tokens
Standardized kinetic values as semantic tokens — allowing designers and engineers to speak the exact same language. Global updates by altering a single token variable.
motion.duration.instant100msmotion.duration.fast200msmotion.duration.medium333msmotion.duration.slow500msmotion.duration.xslow700msmotion.easing.standardcubic-bezier(0.4, 0, 0.1, 1)motion.easing.entrancecubic-bezier(0, 0, 0.6, 1)motion.easing.exitcubic-bezier(0.4, 0, 1, 1)motion.easing.expressivecubic-bezier(0.2, 0, 0, 1.4)Impact
85%
User satisfaction score in motion usability testing
5+
Applications unified under a single motion system
10%
Increase in client conversion