Jagermeister Interactive Ad

  • javascript
  • sketch
  • visual design
  • celtra

TL;DR

Jagermeister tapped Foursquare to create a interactive mobile ad experience that allowed users to explore some of the many flavors in Jagermeister. Using Foursquare's taste data, we created a 4-part quiz to pair a shot of Jager with the perfect beer.

My Role

Working on a 2-designer team I participated in brainstorms and client calls, created wireframes of the unit, and created low and high-fidelity mockups. My main position on this team however, was to write the code that was needed to make the unit work. This required many lines or javascript as well as a lot of testing to make sure the code didn't break at any point.

Why?

Jagermeister wanted a custom media unit created for them to emphasize their "beer and deer" campaign.

Research

A lot of the styling was already provided by Jagermeister, most of the research was geared towards optimizing the media unit to perform well.

selected wireframes

Design Iterations

The PM created a matrix to understand which answers lead to which outcome. I then worked off of that matrix to write out how I was going to code the unit. On the design end, the other designer and I put together mid-fidelity mockups to walk the client through. Once those were approved, we moved onto the high-fidelity and prototype.

entry screen, one question screen and the final result

The client had changed the matrix many times up until about 2 weeks before launch. Because of this, much of the coding was done at the very end. Even with the delay, I was able to get a group of people into a room to test on multiple devices. Luckily, we caught a bug or two and fixed before launching. This unit performed very well for time-spent on unit.

Next Steps & Key Learnings

We learned that while this unit performed well once the viewer was on the expanded page, it would have performed better if there wasn't a barrier to entry (ie: if it were an interstital or interscroller and not an expandable banner).

Next