Mark Barnard | Senior Product Designer, UI + Motion

Sky Mobile Piggybank Animation

Dynamic Motion Design & Lottie

Client

Sky

Role

Product motion, AI-assisted workflow

Outcomes

The animation was handed over as a Lottie component using the agreed structure and naming convention, ready for the product implementation to work with the relevant content. The result was more than a finished animation, it was motion designed to be scalable and reusable within the product.

A big thank-you from the product owner, who said they couldn’t have moved forward without the help. BOOOM! Nice to hear :)

The ask

Another designer created the original visual design for this MySky App experience. My role was to bring it to life through motion and prepare it for development as a scalable Lottie component.

From artwork to animation

The original animation had been created in ProtoPie, but the development team couldn't work from the source file. They needed a final JSON/Lottie file that could be integrated into the app. So rather than simply recreating the animation, I approached it as something that needed to work within the product.

The original animation had been created in ProtoPie, but the development team couldn’t work from the source file. They needed a final JSON/Lottie file that could be integrated into the app. So rather than simply recreating the animation, I approached it as something that needed to work within the product.

Rebuilding for scale

The original piggybank artwork was a low-resolution PNG taken from a brand image, which wasn't suitable for a clean Lottie export. I rebuilt it as separate SVG elements in Illustrator, giving me clean, scalable artwork that could be animated independently in After Effects. From there I built and refined the motion before exporting to Lottie. The goal: one animation reusable with different product data, rather than rebuilding it for every variation.

The original piggybank artwork was a low-resolution PNG taken from a brand image, which wasn’t suitable for a clean Lottie export. I rebuilt it as separate SVG elements in Illustrator, giving me clean, scalable artwork that could be animated independently in After Effects. From there I built and refined the motion before exporting to Lottie. The goal: one animation reusable with different product data, rather than rebuilding it for every variation.

A system the product can target

For the Lottie component to be useful in the product, the individual elements needed to be identifiable. I used a simple naming convention for the After Effects layers:

text_, text elements
img_, image/artwork elements
bg_, background

For example: text_amount, text_unit, img_piggybank, img_coin_01

The text_amount layer contains a placeholder value in After Effects, but its name gives the product a predictable way to target that content and replace it with the relevant data.

For the Lottie component to be useful in the product, the individual elements needed to be identifiable. I used a simple naming convention for the After Effects layers:

text_, text elements
img_, image/artwork elements
bg_, background

For example: text_amount, text_unit, img_piggybank, img_coin_01

The text_amount layer contains a placeholder value in After Effects, but its name gives the product a predictable way to target that content and replace it with the relevant data.

The result

What started as a motion task became a scalable animation component. The artwork is vector-based, the animation is delivered as Lottie, and the content is handled separately from the motion. One animation. Different data. It's motion designed to live in the product.

Working with development

I shared test JSON files early and worked closely with the developers to make sure the animation and its structure translated properly into the product. The naming convention wasn’t a universal Lottie standard, it was agreed around the requirements of this implementation. Talk to the devs first. Stay close, or nothing ships.

I shared test JSON files early and worked closely with the developers to make sure the animation and its structure translated properly into the product. The naming convention wasn’t a universal Lottie standard — it was agreed around the requirements of this implementation. Talk to the devs first. Stay close, or nothing ships.

AI-assisted workflow

I used AI to apply the agreed naming convention across the After Effects layers. The naming is what allows the developers to bind content to the animation, so consistency wasn’t cosmetic, it was the thing that made the component work. AI also helped identify layers that shouldn’t be renamed, such as the Bodymovin/Lottie helper layers, while keeping the underlying content separate from the layer naming. The value wasn’t automating a repetitive task. It was applying a defined system consistently, while the structural decisions stayed mine.

I used AI to apply the agreed naming convention across the After Effects layers. The naming is what allows the developers to bind content to the animation, so consistency wasn’t cosmetic — it was the thing that made the component work. AI also helped identify layers that shouldn’t be renamed, such as the Bodymovin/Lottie helper layers, while keeping the underlying content separate from the layer naming. The value wasn’t automating a repetitive task. It was applying a defined system consistently, while the structural decisions stayed mine.

Next project

ping pong animation

Next project

ping pong animation

ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
…SOMETHING
…SOMETHING
ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
…SOMETHING
…SOMETHING