Work
ABOUT
CONTACT
Work
ABOUT
CONTACT

WORK

WORK

WORK

Sky mobile

Piggybank animation

Piggybank animation

Industry
media and entertainment
Year
2025
Client
Sky
Industry
media and entertainment
Year
2025
Client
Sky
Industry
media and entertainment
Year
2025
Client
Sky

The ask

The ask

To be transparent from the get-go. This is not my design. Another designer created the look of this creative, that sits within the MySky App. My part was more on the motion side and bringing it to life.

When I worked on the Sky account, this was created by another section of the business, that I was not involved in. A completely different stream of work from my own. A lot of senior eyes were on this work from the business. High priority.

How I got involved was sitting around a table at an away day. One of the PO’s, who I had never met, mentioned that the designer that created this file had produced animation in ProtoPie (a prototyping software tool), that the devs could not make head nor tail how to build an animation from that.

Added to that, ProtoPie was not a tool I use very often and neither does anyone else. I prefer other software.

The fact that the developers could not use what had been created, was holding up moving the work forward to completion. They needed a JSON file to be supplied.

So, I said…"I can help with that"

To be transparent from the get-go. This is not my design. Another designer created the look of this creative, that sits within the MySky App. My part was more on the motion side and bringing it to life.

When I worked on the Sky account, this was created by another section of the business, that I was not involved in. A completely different stream of work from my own. A lot of senior eyes were on this work from the business. High priority.

How I got involved was sitting around a table at an away day. One of the PO’s, who I had never met, mentioned that the designer that created this file had produced animation in ProtoPie (a prototyping software tool), that the devs could not make head nor tail how to build an animation from that.

Added to that, ProtoPie was not a tool I use very often and neither does anyone else. I prefer other software.

The fact that the developers could not use what had been created, was holding up moving the work forward to completion. They needed a JSON file to be supplied.

So, I said…"I can help with that"

the challenge

the challenge

Now, I will admit. This is not the most extravagant or difficult animation I have ever produced.

However, sometimes how you work the problem, is more interesting than the outcomes created from it. Fingers crossed :)

The first part of this was that the original designs, created by the other designer, used a PNG of the piggybank which has been cut from a brand photo. Very jagged edges and not high quality. Which for a JSON file is a big no for me.

If you want the quality to be the best it can be, then illustrations/SVGs are the way to go.

Keeping in my that thing is a brand asset, I needed to redraw the piggybank  and I used Illustrator for this. It is just much better than in Figma. Maybe it is more what I used to for things like this.

I had some back and forth on it, as I was trying to match it as close as I could, regarding the shadows and colouring.

Once all done…off to After Effects

Now, I will admit. This is not the most extravagant or difficult animation I have ever produced.

However, sometimes how you work the problem, is more interesting than the outcomes created from it. Fingers crossed :)

The first part of this was that the original designs, created by the other designer, used a PNG of the piggybank which has been cut from a brand photo. Very jagged edges and not high quality. Which for a JSON file is a big no for me.

If you want the quality to be the best it can be, then illustrations/SVGs are the way to go.

Keeping in my that thing is a brand asset, I needed to redraw the piggybank  and I used Illustrator for this. It is just much better than in Figma. Maybe it is more what I used to for things like this.

I had some back and forth on it, as I was trying to match it as close as I could, regarding the shadows and colouring.

Once all done…off to After Effects

Progressing nicely

the Progress

Creating this animation in After Effects was pretty straightforward. It was more about getting the times right with how it will be incorporated with the rest of the build and if the timings of it were right.

This meant having a bit of back and forth with the developers. Sending the JSON files to incorporate into their build.

Now, I will admit. This is not the most extravagant or difficult animation I have ever produced.

However, sometimes how you work the problem, is more interesting than the outcomes created from it. Fingers crossed :)

The first part of this was that the original designs, created by the other designer, used a PNG of the piggybank which has been cut from a brand photo. Very jagged edges and not high quality. Which for a JSON file is a big no for me.

If you want the quality to be the best it can be, then illustrations/SVGs are the way to go.

Keeping in my that thing is a brand asset, I needed to redraw the piggybank  and I used Illustrator for this. It is just much better than in Figma. Maybe it is more what I used to for things like this.

I had some back and forth on it, as I was trying to match it as close as I could, regarding the shadows and colouring.

Once all done…off to After Effects

collab

collab

One part of this which was critical was working closely with the deveopers.

Demo MP4 video that was shared with the devs as a reference. Due to the fact that a JSON is all code

Demo MP4 video that was shared with the devs as a reference. Due to the fact that a JSON is all code

WIP developer demo with JSON/Lottie in-situ

WIP developer demo of JSON/Lottie in-situ

the outcome

the outcome

the outcome

At the time of typing this, the designs are still in build. So not live fully yet within the MySky app but that will be happening at some point in 2025.

The animation below is a build from the developers to show the progress that they are making with it.

Currently there is still work to be done on this around things that are outside of the work I have been doing.

There is more design work that is also needed by another designer.

The main thing on this is that it is a big step forward from a very generic and static screen to using a JSON/Lottie animation. That is a big step for Sky and this usually takes a long time to get off the ground and there will very likely be iterations and followups on this, once it is released.

One bit of very nice feedback I did get, was a BIG thank you from the product owner of this work. Telling me how grateful she was for my help on this and that the would not have been able to proceed without it.

Very nice to hear :)

More Projects

WORK

WORK

WORK

WORK

WORK

WORK