Working with the team at Britelite Immersive, we were asked to invent an experience for VISA and their VIP hospitality experiences at the 2018 FIFA World Cup in Moscow, St. Petersberg and various U.S. locations. The team at Britelite pitched what became the Perfect Pint experience, an interactive augmented reality kiosk that automatically pours you the perfect pint of beer while teaching you about VISA’s tapless payment technology.
Scope of Work
• Creative Concept Discovery
• Identity Design
• Pattern Design
• Digital Design (Sketch)
• Interactive Design
• 2D Kiosk Design
• Interactive Art Direction
Identifying the Story
While financial security and transactions can be interesting, I wanted the story to connect with the audience more intimately. Our approach began with researching World Cup facts as well as country-specific data about beer culture. We learned for instance that Poland drank the most beer out of countries competing, and the fastest goal scored only took 10.9 seconds. What came next became a cheeky experience where users learned some fun facts while their beer poured.
I not-so-secretly love illustrating icon-based seamless patterns. Patterns can be applied so fluidly across design and that concept proved instantly attractive to the team at Visa. Each icon represents something you can purchase with Visa tap technology, making the pattern a story within a story. To craft the logotype, I used Open Sans as the base and brought the serifs and curves from the Visa logo to specific glyphs. Then finished it off with a carbonation texture for fun.
The screen flats below are just a few highlights from about 75 unique stages across four user scenario flows. Each screen was storyboarded and then animated by the team to keep the user engaged during the 30 seconds it took to pour the perfect pint. As per Visa, we had to design a personalized experience that allowed a VIP to pour up to three beers a day. Each visit was tailored to you and the match playing that day.
Working with Augmented Reality
The first flow per user featured an Augmented Reality (AR) experience that displayed the country flag of the team you wanted to win that day on your face. The team also silhouetted the user and animated an illustrated stadium in the background complete with fireworks. In the beginning, I explored numerous simplified face paint designs for the AR component, but while Poland and Russia were simple flags I reminded the team to be careful about countries that weren’t so simple to simplify like Saudi Arabia. In the end, we chose to map the actual flags to avoid timeline delays.
Flow 01: Speed
Early on Visa provided us with a small handful of scientific facts about their payment technology and we identified three user scenarios to accompany the AR experience. We researched the speed of tap versus chip technology and paired it with the time it took to score the fastest World Cup goal. I instructed our animator to have each element draw, pop or slide into place keep the user engaged.
Flow 02: The Journey
Flow two personalized the experience by showing fun facts about the WorldCup and the country users select in flow one. We found facts for everything from countries where alcohol was illegal to the drunkest of WorldCup nations. To lighten it up we actually correlated beer consumption with World Cup wins, dubious as it may be – the math sort of worked!
Flow 03: Technology Adoption
Flow three was about how fast retailers and age groups were adopting Visa tap technology. We used data provided by Visa and had fun with the infographics by bringing the story back around to how many jerseys, hotdogs, and flights you could purchase with how much money Visa processed in the time it took to pour a users beer.
Besides the consumer-facing experience, I also designed an administration interface which staff used to swap kegs, adjust foam levels and all other admin related tasks associated with kiosk maintenance after our team left Russia. I wanted the experience to have a similar look and feel to the consumer experience in order to keep admin duties simple and clear. This phase of the project included wireframing in addition to the front-end design.