Sky Mobile piggybank animation
Sky Mobile MySky App — motion design and Lottie delivery
Role
Motion design
Client
Sky
To be transparent from the get-go: this is not my design. Another designer created the look of this creative, which sits within the MySky App. My part was the motion—bringing it to life and getting it into a format developers could actually build from.
Outcomes
The ask
At an away day, a PO I’d never met said the file’s original animations were built in ProtoPie—and the devs couldn’t work from it. ProtoPie isn’t something most of us use. What they needed was a JSON file.
So I said: “I can help with that.”
The challenge
The original used a PNG of the piggybank cut from a brand photo—jagged edges, low quality. No good for a JSON file. For the best result, SVGs are the way to go.
So I redrew it as an SVG in Illustrator—far better than Figma for this. Some back and forth on shadows and colour, then off to After Effects.
Progressing nicely
The After Effects animation was fairly straightforward. The real work was getting the timing right for the wider build—sending JSON files back and forth for the devs to test in their environment.
The critical bit: working with the devs from day one. They told me the file type up front, and I shared test files before I’d even finished, to confirm it worked. Talk to the devs first. Stay close, or nothing ships.
Collab
Early dev communication made this work: file type agreed up front, test files shared early, timings tuned together. No surprises—that’s how it should go.
Next project