Delightful and Instructive UI Animations


  • Project scoping with UX Team

  • Illustration

  • Motion Design

  • UI Mockups

Team Members

  • 2 UX Designers

  • Product Owner

  • Designer


Adobe Illustrator


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.

© 2023 Ben Soto Design

© 2023 Ben Soto Design