Manage your Sky Mobile data
Background
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"
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
Recreating the asset in Adobe Illustrator
Progressing nicely
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