The 7UP Digital Bartender
A mobile experience on 7UP.com that turns any smartphone into a tool for mixing drinks.
The Problem:
7UP sales were down and we had just launched a new campaign for the brand with a new strategy of positioning 7UP as a mixer. We wanted to add more value to the campaign and inspire people at home to purchase 7UP and get creative in the kitchen with ease.
We all know that finding a cocktail recipe online is easy. But many of us don’t necessarily have the tools at home needed to mix a drink.
The Solution:
The solution was The 7UP Digital Bartender. This digital experience empowers hosts to make over 30 unique 7UP cocktails and mocktails - no prior knowledge or measuring tools required.
THE PROCESS:
Our timeline was limited and so were our resources. We had roughly about 1 month to get the most viable product live. The goal was to promote this experience in our new fleet of campaign ads, so that was part of the reason for the very crunched timeline.
Wireframe & Prototype
Before we got sign-off to build out the full experience, our IA built a wireframe and rough prototype that we then brought into a focus group of about 10 people. The goal was to ensure that the general public would find an experience like this useful. After all, the effort to build this out would not be small. The results from the focus group were resoundingly positive, so we were off to the races!
Testing Recipes
We knew the experience could end up being great but if the drinks weren’t good then we would fail. That being said, we worked with several mixologists to test and create unique recipes just for 7UP. We pulled inspiration from classic, retro, and modern recipes.
The Look & Feel
I worked with another designer to take the one wireframe we were given and essentially build out the full experience. We created a system of patterns and colors to visualize the different types of ingredients that were involved in the 30+ featured recipes. After some trial and error with the color combinations, we found a way to categorize the ingredients and create a system that was accessible and simple.
Design system for ingredients
Example of the functionality for glass size
Example of different recipes
Other Details & Refinement
As we worked with developers to build the experience, we refined and tested several details as a team.
SPLASHES & DASHES
Some cocktail recipes ask for splashes and dashes, so we came up with a pill shaped system to show users that the amount they needed to add was much less than the rest of the ingredients. The “splash” pill shape was a bit larger than the “dash”. They were incorporated into the ingredients based on the order they should be added.
Directions
When users first got to our experience, what would they see and how much direction should we give them? Should this be in the form of a video? Or just simple step-by-step directions? We designed and tested 2 different approaches and ultimately went with the video approach.
Integration on 7up.com
Incorporating the Digital Bartender into the 7UP website. On the applicable recipe pages, we included a callout that indicated when a recipe could be made using our new tool.
RESULTS:
The initial intrigue turned into quality engagements for the brand.
Visitors to the Digital Bartender tool were 33% more likely to stay on site, and spent 6 times as long discovering recipes on site.
Overall visitors to the Digital Bartender tool increased time on the 7UP website by 487%.
From a messaging standpoint, 2018 ads that featured the Digital Bartender tool saw the highest lift in message association and purchase intent.
In terms of personal wins, we won a Webby for best user experience, a regional and National Addy, and we were featured in several online publications, such as Bravo, Buzzfeed, AJC, Drizly, and Trendhunter. 🎉
NOTES & REFLECTION:
Teamwork truly made the dream work with this one. It was a massive project and the fast timeline meant that we needed to parallel path our efforts with developers. The goal was to create something intuitive but also incorporate the brand so that it felt own-able. The process had it’s bumps but with a lot of empathy and collaboration, we ended up with something we all felt very proud to share with the world. And I learned a LOT.