Delightful and Instructive UI Animations
Contributions
Project scoping with UX Team
Illustration
Motion Design
UI Mockups
Team Members
2 UX Designers
Product Owner
Designer
Tools
Adobe Illustrator
Lottie
Adobe After Effects
It's the little things
How can we give users clear expectations?
When the Product Design team was working on a new feature, they wanted to inject a bit of delight in the form of instructive and unobtrusive animations. The first need was a loading indicator to help users expect more cards to load in the feed. The second need was an indicator to help users know that all loading was complete.
K.I.S.S. (Keep It Super Simple)
With spacing and timing limitations, the best approach was to keep things very simple. The first animation is designed to reinforce the message “Grabbing more cards for you!” by having cards pop in with an offset scale in/out in a looping sequence until cards are loaded. Using card shapes this way was the most straightforward way to indicate that more cards were being loaded. The second animation is designed to reinforce the message “You’re all caught up!”. In hopes of sprinkling in a touch of delight, the sequence is made to look like confetti to give users a sense of accomplishment! Both animations were exported in JSON format using the Lottie Plugin for After Effects.