Muze Chat: Lottie Icons

Muze Chat is a mobile messaging app built as a fully free-form canvas.

When signing up, a user is taken through 8 pages, from asking for user details to choosing a profile photo. Each step needed an animated icon to represent each UX action, executed in Lottie, a JSON-based animation file format.

The Muze team crowdsourced ideas from their users via social media submissions. I pulled the top 8 favorites, aligned the art to the UX action that best matched it's creative energy and possibilites for motion ideas, and redrew them to cohesively match the Muze logo style.

Navigating Lottie's constraints presents its challenges. It's mostly incompatible with After Effects expressions, confining animators to fundamental elements like position, scale, and keyframing line/ shape paths. Using mostly path animation, transform, and precomp masking, I animated each to be between 1 to 3 seconds, non looping (shown looped for display purposes only), with the lowest final keyframe count as possible to safeguard file size.