Signature Collection Campaign
Banner Adverts, Website Skins and Metro Newspaper Ads For McDonald’s
The Signature Collection is McDonald’s UK premium burger range: three thicker burgers – the BBQ, the Classic and the Spicy – each made to order with a 100% British and Irish beef patty in a brioche-style bun, and developed by McDonald’s food team with its Chefs Council of Michelin-trained chefs. The range was trialled in 28 restaurants in London and the South of England from late 2015 before rolling out nationally. In 2018, while freelancing at Leo Burnett London, I worked on the campaign’s digital rollout: a set of HTML5 display banners in three sizes (970×250, 300×600 and 300×250) and InSkin Pageskin takeovers for desktop, tablet and smartphone, all built around the campaign’s black-and-silver look and its line, “Luxury. In a bun.”
The three banner sizes – a 970×250 billboard, a 300×600 half page and a 300×250 MPU – are hand-coded HTML5 and CSS, with all of the motion written in JavaScript using GSAP (TweenLite and TimelineLite). Each one runs from a single labelled timeline: the Signature Collection logo fades up in silver, the burgers come in – on the half page and MPU the BBQ, the Classic and the Spicy slide through one after another – then the “Exclusive” line and the call to action follow, and the whole sequence loops back to the start.
The builds were scaffolded with Bannertime, so every size shares the same Banner class and DoubleClick Studio loader, and GSAP was polite-loaded only once each ad was in view. The black-and-silver art direction carried across every format, from the banners and InSkin Pageskins to the Metro print ads, so the campaign read as one piece wherever it appeared.
Services
Design, HTML5 Build, Animation (GSAP)Client
McDonald’s UKAgency
Leo Burnett LondonTECHNOLOGY
Built and animated for McDonald’s UK at Leo Burnett London, 2018.
PAGESKIN TAKEOVERS
Alongside the display banners, The Signature Collection ran as InSkin Pageskins. Instead of sitting in a single ad slot, the campaign wrapped around the whole publisher page in a takeover style, so one booking could skin many high-traffic pages across InSkin’s network. I designed three executions to InSkin’s format specs: desktop and tablet Pageskins, and Pageskin Edge for smartphones. On desktop and tablet the three burgers (the BBQ, the Classic and the Spicy) and the “Find your nearest restaurant” call-to-action sit in the side panels, which scroll with the reader so the brand stays in view the whole time, with the Signature Collection logo in the band beneath the page. On smartphone the same messaging moves into a single right-hand frame beside the content, under a “Luxury. In a bun” header.
The spec shaped every layout. On desktop and tablet, the header content had to stay within 1220 pixels: the background can flow beyond that, but won’t be visible on every site in the network. Key messaging had to fit a 130px-wide strip on each side, with 100px bands above and below the page and up to 500px of extended background on desktop to fill wide browser windows. On smartphone the frame is 148px wide and the header sits within 640 pixels. The artwork was built at double the display size so it renders sharp on high-density screens. The skins went to InSkin as finished, layered PSDs, so their studio could skip its own design phase and go straight to build, working to a 10-working-day turnaround once all assets were in. Tracking was kept simple: a secure 1×1 pixel to count impressions and a single click command to the destination page.
Live HTML5 Banners
These three banners aren’t recordings: they’re the original HTML5 builds, running in the page just as they ran through DoubleClick Studio. Each one sits in its own sandboxed frame at its real size, like an ad slot on a publisher’s page, and loads the same GSAP libraries (TweenLite, TimelineLite, CSSPlugin and EasePack) from the CDN, so every tween, timing and loop plays exactly as it did in the campaign. The only change is a small stand-in for Studio’s Enabler, so the ads run outside the ad server, with their click-throughs switched off.
OVERVIEW
The banners were built for and trafficked through DoubleClick Studio, Google’s rich-media ad platform (now part of Google Marketing Platform). Each build loads Studio’s Enabler library, which handles polite loading – holding back the heavier assets and animation libraries until the page has finished loading and the ad is in view – as well as the click-through exits and the reporting on how people interacted with the ad. Finished banners were uploaded to Studio, previewed and QA’d there, then published straight into Campaign Manager to be trafficked across the media plan.
At the time, Studio competed with rich-media and ad-serving platforms such as Sizmek, Flashtalking, Adform and Celtra, each with its own SDK, click-tracking conventions and file-weight rules. Studio’s advantage was that it sat inside Google’s own ad stack, so creative, trafficking and reporting stayed in one place, and polite loading, exits and dynamic content came built in rather than bolted on. The trade-off was lock-in: a banner built on the Enabler was tied to Studio, so running the same creative through another platform meant swapping its loader and click-handling code for that platform’s own.
METRO DOUBLE-PAGE SPREAD
The campaign also ran in print, as an integrated double-page spread in Metro. On the left, the BBQ is served on a silver platter by a waiter in white tie – “Our poshest burgers yet. Hence the silverware. And the word ‘hence’.” On the right, the three burgers sit under The Signature Collection logo with the “Luxury. In a bun” line.
