NATE Animation / 2021

Figma, After Effects, Lottie Files, Bodymovin, IOS APP Signer

Creative Director: Maria Bastos
Visual Designer, Motion Designer: Danqi Qian
Software Engineer: Leon Ormes
Product Manager: Joseph Maximilian Barberio

WEB ANIMATION

Key Features Animation

We redesigned Nate’s new website where we want to use animations to highlight Nate’s key features.
These animations are eventually implemented as LottieFiles in Webflow.

PRODUCT ANIMATION

Confetti Animation

To elevate our onboarding experience, we decided to add a confettie animation to create a Wow moment for our users and encourage more ‘save’ actions.

CHALLENGE

Lottie animations are optimized for vector graphics — not VFX — so plugins like Particles aren’t supported.
This posed a challenge: how can I create a celebratory animation that’s visually rich but still easy to revise and developer-friendly?

Once the animation was approved, I exported each frame as a transparent PNG and used Bodymovin to include them in a Lottie sequence.
However, the resulting JSON exceeded 5MB, raising performance concerns from the Engineering team.
To solve this, I did lots of research to explore alternatives. Finally, I found APNG — a format similar to GIF but much lighter and with better quality. It performed beautifully across devices.

IMPACT

Final APNG animation is 60% lighter than JSON + PNG sequence. We had +22% increase in first-session ‘save’ actions. We received positive feedback from users mentioning the animation as a delightful surprise.

PRODUCT ANIMATION

Tappable Tutorial

I created a tutorial showing how to save products with Nate, a key feature we wanted to highlight and encourage during onboarding. Collaborated with the Product and Engineering teams to implement the animation using Lottie files with Markers and Keypaths for interactive, tappable controls.

CHALLENGE

Worked closely with the lead engineer through multiple rounds of iteration to fine-tune the animation timing and interaction. We often found the animation starting too slowly or feeling off, so we collaborated in real time — tweaking markers, adjusting easing, and reviewing in IOS APP Signer together — to get the flow feeling just right.

PRODUCT ANIMATION

NATE Cash 

Created 3 animations using Lottie for Nate’s Cash program to celebrate users receiving cash on their first 3 orders. Collaborated with Product and Engineering teams to implement them seamlessly in-app, triggered by each milestone.