A Better Animation Workflow

Adding motion to the Chatbooks app in a more efficient way

My role: UX/UI Design, Motion Design 
Client: Chatbooks 
Time Frame: 2022-2023
Collaborated with: Developers

—

Problem

We were interested in adding motion elements the the app, but we lacked a process that worked.

Any time a designer wanted to add an animation to the app or website a developer usually had to break the bad news that the file was too big and it was slowing loading times.

—

Solution

On one particular project a developer mentioned “Lottie” as a solution to our animation issues. I was exited to learn more.

I learned that using Lottie to make animations allowed me to:

  • deliver a JSON file that was much easier for the developer to work with

  • make basic changes post export (like speed of animation, and colors)

  • decrease file size exponentially

I learned how to create Lottie animations, and gave a training to the other designers so they could add animation to their designs.

Using Lottie opened up the possibility to add motion to many flows in the form of interactions, animations, and tutorials.

—

Onboarding animations

After a rebrand, I updated these permissions screens to be more delightful, and to highlight our brand mascots.

—

Splash screen animations

I took advantage of the time a user spends on the splash screen to add a branding touchpoint.

—

Utah Jazz Partnership

When Chatbook sponsored the Utah Jazz, they needed several assets for the arena. I created the LED screens that show during the game in the arena.

  • developed the mascots to be more readable from distances

  • created files that could be rigged in after effects

  • rigged and animated doing things that related to the Jazz, Chatbooks, and gave the mascots more personality

Before

After