Our client asked us to create a brand experience that would drive brand affinity and demonstrate the democracy of the brand.
That was a lot of marketing talk to digest so after many long hours and countless coffees we had our “eureka” moment.
‘100 McDonald’s Moments’ was an idea that would activate and celebrate the love that people felt for the brand. It was also an idea that gave us the opportunity to create a single HTML5 experience for both desktop and tablet.
Our campaign invited people to celebrate all the moments in their lives made more enjoyable with a McDonald’s.
We asked Maccas fans a simple question, “What’s your McDonald’s Moment?”
We then showcased the answers – all those wonderful memories and timeless stories that reveal their love of the brand. Illustrated and animated on the fly, they were placed into the ‘100 McDonald’s Moments’ gallery for the world to see.
Created in real time
This was real-time marketing in practice. Seeding the question, collecting the responses and crafting the Moments was an on-going process that produced a campaign that evolved from start to finish.
We wanted the gallery to demonstrate variety so we picked the funniest, the oddest and most heart-warming Moments to illustrate and animate.
Every Moment that made the gallery would be represented by a single image. This image needed to catch the eye and encourage interaction.
We used a bright and cheerful illustrative style to bring the Moments to life. This simple style resulted in a clear and uncluttered interface but was also relatively quick to do. With up to eight illustrations required every day, turn-around was all-important.
Every illustration was hand-drawn before being lovingly converted into bright and vibrant vector graphics. These were then storyboarded, ready for animation.
Given the look and feel of the experience, we decided the best approach would be to create the animations as image sequences.
In a world where Flash is becoming a slightly dirty word, if you’re looking to animate vector art, there’s still no better tool. It was both essential and fundamental to how we created the animations.
The animations were exported as PNG sequences and batched down to PNG 8-bit in Photoshop so that we wouldn’t overburden download demands.
The final step was to set up the image sequences for use in the site. We had to be quite clever with how we utilized our frames to keep iPad RAM demands down. For example, a swipe right would play the sequence forward whereas a swipe left might display in reverse.
To manage this we created a JSON file for each animation that basically stored the sequence as a list to be displayed for whatever input (left/right/up/down) was given.
To create the site we utilised the Canvas element, as it’s super fast and super capable on both desktop and iPad.
Whilst we could have used the Pixi.js framework, we required a ‘to-the-metal’ approach to coding. This allowed us to create the illusion of 3D whilst running smoothly on all target devices.
The grid itself represented another technical challenge. The intention was to make it infinitely scrollable whilst also being capable of dynamic growth as more Moments were added every day.
To this end we created a system whereby only visible assets were preserved and each time a square left the grid, its assets were written over and reused for incoming squares. In short, whilst there were 100 Moments, theoretically, there could have been 100 million and it would have kept on going.
UGC contextual media
Submitted Moments were also used in contextual ad placements. Whether it was sport, shopping, music or social sites, we had the perfect Moments to speak to every kind of person in every kind of place.
By the people, for the people
By the end of the campaign we had 100 beautifully crafted McDonald’s Moments making up the experience. These 100 Moments demonstrated the UK's undying love for the McDonald’s brand. They were 100 Moments to inspire our audience to go out and have a McDonald’s Moment of their own.