Load-In MicroAnimations

LoadING Micro Animations

2022 —Design System, Interaction, Motion Design

Purple has been redesigning their user interface since 2021. During my time at Purple, I have had the opportunity to support the design and implementation of the new system.
‍
After initial components were launched, I noticed that a number of loading micro animations were awkward and needed to be reworked.
‍
The following video shows the loading animation before I worked on it.

Collaboration with the eCommerce Team at Purple Innovation.

Examples of loading micro animations that needed help.

My team analyzed the loading micro animations and noticed there were a couple of issues we wanted to address:

The placeholder load wasn't working properly. This is really easy to miss, since it is such a subtle state at the beginning of the load.
The "swipe" load used for the images is jarring and disorienting⁠—it takes the attention away from the content.
The type load needed attention⁠—it felt like something was missing.
We wanted loading micro animations that better described Purple, but didn't take the attention away from the content. When thinking about what we wanted, words like "subtle" or "restful" were used.

Final animation for the "Inset Hero" component. Made in Figma and AE.

After gathering inspiration and creating some iterations, I landed on this animation for the Inset Hero component.
‍
I removed the swipe animation on the image and added the subtle text/button fade in. The header text slightly falls and rests above the copy text, while the CTA button bounces, as if on a mattress.
‍
The overall feel of the animations don't distract from the content, but add interest to the load-ins.

Final Animation for the "Product Card" component.

Diving into the specific UI motions was the most interesting part about this project. The following images show the documentation behind the loading states. I used these documents with developers to ensure correct implementation of the loading micro-animations.

*Figma artboards with documentation for developers.

More Projects ↑