Intuit: Quickbooks Self Employed

Interface Design & UI Animation

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

contact.alisaid@gmail.com