The goals were to enhance usability while reinforcing brand identity by animating UI components, infographics and celebratory states.
Our motion design philosophy was to leverage 2 different sets of motion principles to create an experience that enhanced usability while simultaneously highlighting brand identity; We used principles of UX motion to design animations intended to hide latency, create motion affordance, convey gesture confirmation, and to reinforce spatial awareness. We 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
contact.alisaid@gmail.com