My goals were to enhance usability while reinforcing brand identity by animating UI components, infographics and celebratory states.
My motion design philosophy was to leverage 2 different sets of motion principles to create an experience that enhanced usability while simultaneously highlighting brand identity; I used principles of UX motion to design animations intended to hide latency, create motion affordance, convey gesture confirmation, and to reinforce spatial awareness. I then leveraged traditional principles of animation to define the character and brand identity of the UI elements.
The challenge was to keep the UX and brand motion behaviors from compromising each other.
Determinate Loader
Ostensible indeterminate loader that runs during value proposition.
UX value is to hide latency

Celebratory Moment
Illustration animation to indicate achievement
UX value is motion affordance

Determinate Loader
Ostensible indeterminate loader that runs during value proposition.
UX value is to hide latency

Celebratory Moment
Illustration animation to indicate achievement
UX value is motion affordance

Checkbox
Motion for hover and enabled states
UX values are motion affordance and gesture confirmation

Button
Motion for hover and selected states
UX value is motion affordance and gesture confirmation

Slider
Motion for adjusting and selected value
UX value is motion affordance and gesture confirmation

Toggle
Motion between enabled and disabled states
UX value is gesture confirmation and motion affordance

Page Indicator
Motion for horizontal navigation
UX value is motion affordance

Infographics
Motion to reveal and exit infographic chart
UX value is motion affordance

Infographics
Motion to reveal and exit infographic chart
UX value is motion affordance

Infographics
Motion to reveal and exit infographic chart
UX value is motion affordance
