HTML5 Animations, Multiscreen UI/UX Design

A series of bespoke ads for Abbott's Pedialyte – the #1 recommended medical hydration brand (by both Pharmacists and Pediatricians). I worked closely with their creative team to execute playful and high performing animated ads that were hand-optimised for a wide range of screen sizes.

Handcrafted Physics

From the subtle squish on the germs' impacts to the expanding shadows that follow their downwards trajectory – the handcrafted animations were painstakingly created in Google Web Designer to evoke a sense of playfulness and believability.
Optimised for Conversion

Each animated element was exported in a specifically chosen and manually compressed image format to meet the exacting demands of mobile friendly ads without sacrificing details in any of the illustrations or product shots. From PNG Posterization, to careful JPEG colour optimisation, to simplifying SVG paths – no stone was left unturned to create lightening fast load times and optimise for conversions.
A Multi-Screen Narrative

We went beyond adapting the layout for a variety of screen sizes to adapting the narrative of the message itself. Our research on young mothers demo concluded that mobile users were more ready to buy (converting at rates up to 3X desktop) whereas desktop users are typically in a research frame of mind. As a result, we adapted both the CTA messaging and landing pages to optimise for each platform and form factor.
The Results

A ballet of carefully orchestrated engagement best practices resulting in record-breaking click-throughs and subsequent conversion rates
Back to Top