This interactive overlay lets the user learn more about the Shopkins characters with individual bios and video clips from their cartoon. I worked on the static designs for this unit. After the designs were approved, the animation and development were outsourced to the Phillippines. The video demo along with static mocks are below.

Here are a few frames from the mocks. When the user rolls over a character, they can see its name and click to see its bio. The video section also gives the user 3 different clips to watch.

Here is the video demo that shows the animation transitions among the sections. The bios of all the other characters and some sample clips is also in the demo.

Acknowledgments:

Designer: Angela Truong | Art Director: Leny Evangelista | Creative Director: Manuel Donayre | Animation/Development: PixelShards