Consumer Dashboard - Motion as a Scalable Product System
Consumer Dashboard - Motion as a Scalable Product System
I led the introduction of motion as a foundational UX system within the Consumer Dashboard. What began as an effort to reduce perceived latency evolved into a tokenized motion framework and page-level transition system - directly contributing to an $8.2M enterprise deal.
I led the introduction of motion as a foundational UX system within the Consumer Dashboard. What began as an effort to reduce perceived latency evolved into a tokenized motion framework and page-level transition system - directly contributing to an $8.2M enterprise deal.
Role
Motion & Interaction Systems. Defined motion principles, tokenized standards, and engineering handoff.
Scope
Core consumer dashboard. Cross-surface interaction patterns spanning loading, navigation, and transitions.
Role
Motion & Interaction Systems. Defined motion principles, tokenized standards, and engineering handoff.
Scope
Core consumer dashboard. Cross-surface interaction patterns spanning loading, navigation, and transitions.
The Core Problem
The dashboard relied on static loading states and abrupt page cuts. During data-heavy interactions, users lacked clear system feedback - making the product feel slower and less trustworthy than it actually was.
Design Principle
Motion should function as system feedback and continuity - not decoration.
Goals
• Reduce perceived latency
Communicate system state and intent
Ensure motion decisions scale across teams and screens
Avoid brittle, one-off animation logic
Constraints
•. Variable data load times
Bank/CU branding requirements
Performance and accessibility considerations
Phase 1 - Customizable Interstitial Motion
Interstitials were chosen as the initial surface because they sit at a critical trust boundary: users are waiting for data with no immediate control.
Why this mattered
Reduced perceived latency during loading
Turned waiting into a branded experience
Created meaningful differentiation for enterprise customers
Instead of shipping a single animation, the interstitial was made fully configurable, allowing
customers to define their own loaders while preserving consistent system behavior.
Formalizing Motion with Tokens
As motion expanded beyond interstitials, consistency and maintainability became the primary risks. I introduced motion tokens as shared primitives between design and engineering.
Duration Tokens
motion-duration-instant
motion-duration-quick
motion-duration-standard
motion-duration-medium
motion-duration-long
motion-duration-extra-long
Complex / Compound Tokens
motion-enter
motion-exit
motion-interruptible
motion-continuous
motion-choreographed
Keyframe / Purpose Tokens
motion-fade-in
motion-fade-out
motion-scale-up
motion-scale-down
motion-slide-in-left
motion-slide-in-right
motion-slide-in-top
motion-slide-in-bottom
motion-slide-out-left
motion-slide-out-right
motion-slide-out-top
motion-slide-out-bottom
motion-bounce
motion-shake
motion-rotate
motion-pulse
Easing Tokens
motion-easing-linear
motion-easing-ease-in
motion-easing-ease-out
motion-easing-ease-in-out
motion-easing-accelerate
motion-easing-decelerate
motion-easing-spring-light
motion-easing-spring-medium
motion-easing-spring-heavy
Usage Intent Tokens
motion-feedback-success
motion-feedback-error
motion-feedback-warning
motion-loading-small
motion-loading-large
motion-nav-transition
motion-modal-open
motion-modal-close
motion-tooltip-fade
motion-toast-slide
Phase 2 - Page-Level Transitions
With tokens in place, motion extended naturally into navigation. Page-level transitions replaced hard cuts with predictable, intent-driven movement using the same shared timing and easing rules.
Results
Improved spatial continuity
Clearer system responsiveness
Minimal additional implementation complexity
Impact
Enterprise Revenue
$8.2M deal
Customizable motion cited as a key decision factor
Customizable motion cited as a key decision factor
System Outcome
Tokenized motion
Reusable primitives aligned design and engineering
Reusable primitives aligned design and engineering
Reflections
Tokenizing motion shifted animation from a one-off enhancement into a scalable interaction layer—supporting customization, consistency, and long-term product evolution while delivering measurable business impact.
The Core Problem
The dashboard relied on static loading states and abrupt page cuts. During data-heavy interactions, users lacked clear system feedback - making the product feel slower and less trustworthy than it actually was.
Design Principle
Motion should function as system feedback and continuity - not decoration.
Goals
• Reduce perceived latency
Communicate system state and intent
Ensure motion decisions scale across teams and screens
Avoid brittle, one-off animation logic
Constraints
•. Variable data load times
Enterprise branding requirements
Performance and accessibility considerations
Impact
Enterprise Revenue
$8.2M deal
Customizable motion cited as a key decision factor
System Outcome
Tokenized motion
Reusable primitives aligned design and engineering
Phase 1 - Customizable Interstitial Motion
Interstitials were chosen as the initial surface because they sit at a critical trust boundary: users are waiting for data with no immediate control.
Why this mattered
Reduced perceived latency during loading
Turned waiting into a branded experience
Created meaningful differentiation for enterprise customers
Instead of shipping a single animation, the interstitial was made fully configurable, allowing
customers to define their own loaders while preserving consistent system behavior.
Phase 2 - Page-Level Transitions
With tokens in place, motion extended naturally into navigation. Page-level transitions replaced hard cuts with predictable, intent-driven movement using the same shared timing and easing rules.
Results
Improved spatial continuity
Clearer system responsiveness
Minimal additional implementation complexity
Formalizing Motion with Tokens
As motion expanded beyond interstitials, consistency and maintainability became the primary risks. I introduced motion tokens as shared primitives between design and engineering.
Duration Tokens
motion-duration-instant
motion-duration-quick
motion-duration-standard
motion-duration-medium
motion-duration-long
motion-duration-extra-long
Complex / Compound Tokens
motion-enter
motion-exit
motion-interruptible
motion-continuous
motion-choreographed
Keyframe / Purpose Tokens
motion-fade-in
motion-fade-out
motion-scale-up
motion-scale-down
motion-slide-in-left
motion-slide-in-right
motion-slide-in-top
motion-slide-in-bottom
motion-slide-out-left
motion-slide-out-right
motion-slide-out-top
motion-slide-out-bottom
motion-bounce
motion-shake
motion-rotate
motion-pulse
Easing Tokens
motion-easing-linear
motion-easing-ease-in
motion-easing-ease-out
motion-easing-ease-in-out
motion-easing-accelerate
motion-easing-decelerate
motion-easing-spring-light
motion-easing-spring-medium
motion-easing-spring-heavy
Usage Intent Tokens
motion-feedback-success
motion-feedback-error
motion-feedback-warning
motion-loading-small
motion-loading-large
motion-nav-transition
motion-modal-open
motion-modal-close
motion-tooltip-fade
motion-toast-slide