After launching their new fountain machine with great success, Coca-Cola wanted an app that would keep their consumers engaged even after the drinks were finished.
Our first priority was driving consumers to locations where they can experience a Freestyle machine. As soon as you launch the app, you're put right in to a location finder. Beyond getting info on outlets, the location finder also includes deals and rewards for check-ins and sharing.
The location finder shows you where you can find a Freestyle machine, if that outlet is open, how far away you are and enables you to get directions, check in and call.
A variety of challenges are set up to reward different kinds of behaviors. For example, check in three times between 11:00 PM and 4:00 AM gets you the Night Owl Badge. The Drink Scout badge rewards you for checking and sharing your drink of choice.
To drive home the brand message of choices and discovery, we built the 100+ Choices section. The portion of the app allows you to explore all of the different brands available and save all of your favorite brands. You can retrieve your list of favorites on a NFC or QR enabled Freestyle machine for easy pouring.
An obvious thing to do on the Freestyle machine is to mix and match and come up with your own flavors. At first, Coca-Cola resisted, touting the integrity of each brand. But after testing showed this to be a highly desirable feature, we got to put it in the app. While exploring the 100+ Choices section, you can drag up to three different brands in to the mix area and then get in to mix mode.
Once in mix mode, you adjust how much of each brand you want in your drink, give it a name and save it. When your mix is all saved and shared ot the world, you can go up to a Freestyle machine, connect to it via the app and pull your top three mixes up on the Freestyle screen - and have the machine pour your custom mix for you.
My name is on the patent that Coca-Cola filed to copyright this beverage mixing UI.
For AT&T's entry in to home automation, they came to Razorfish for a huge undertaking. They didn't just want us to handle the marketing of their new service, they gave us the opportunity to build the applications that controlled AT&T's Digital Life.
There were two large teams across two offices that collaborated on the marketing side and the application side, and it was all developed in an agile environment. I was on the iPad application side.
Log in screen
During our UX design process, the team decided that helping people understand spaces in your home as they behave over periods of time was the best way to build the app. This approach coupled with a powerful rules system gave us the flexibility to give people multiple ways of viewing their home.
List view allows for a quick look into devices and their status on a per room basis.
Spaces set up
Another way to view your home is called Custom Views. With these, you can completely customize how you view your home based on what you need and when. We also provided starter views to help people understand how to create their own Custom Views.
Coming home custom view
For example, someone might create a Coming Home custom view. Not only can this view adjust settings on devices for after a hard day at work, it can also use rule sets - called Programs - to execute tasks for you, such as checking to see if the front door opened between 3:30 PM and 4:00 PM - when the kids should have gotten home.
The third way to view a home is called Spaces. Spaces are built by the users to represent the real spatial relationships in the rooms of their home. Each Space view also has a timeline to show when events happened in each space.
3D space view
My involvement included UX design, creative direction and art direction as well as animating UI prototypes during our development process.
The remodeling of Madison Square Garden included a new VIP club sponsored by Delta Air Lines - The Delta Sky360 Club. We built a way for the VIP's to explore Delta travel destinations. The experience begins by letting people choose destinations from around the globe based on phrases built out of words, moods, and iconography.
Build a phrase
Rio De Janeiro start screen
Once a destination is chosen, users are presented with beautiful scenery from the chosen destination and content to explore, including photos, quotes and videos.
Rio De Janeiro content options
Rio De Janeiro photo browser
The user experience was developed with a complex system of recommendations in mind. The words and icons chosen at the start were reflected in the content you were given, right down to the typefaces used to present the scene.
Barcelona start screen
Rome start screen
London quote content
San Francisco start screen
Las Vegas start screen
Mike Boutté - art direction, animation, user experience design Toby Past - creative direction Eric Champlin - creative direction Martha Dixon - copywriting, user experience design Kat McKluskey - design Matt Brewer - design James Mabery - design Courtney Burton - design Yonathan Gebreyes - design Andrea Gill - design Tim Pethel - motion design Casey Giessen - sound design Steve Dawson - development Alex Nichols - development Deavon Barlow - development Jimmy Moore - development
AT&T wanted a way to show how their mobile services and devices were being used on a daily basis, so we created RPM. RPM was a magazine app that would highlight awesome people doing great things and how their devices played into every day life. From Sugga T., the farmer who used Twitter to connect with other farmers about soil conditions and weather, all the way to Rattletrap, a food truck serving coffee that used mobile device to keep fans updated on their whereabouts.
Launch issue cover
Sugga T. article cover
Each issue would be centered around a theme and tell four different stories about completely different things based on that theme. The nods to mobile usage were subtle, but always there in the background to show how mobile experiences play a part in every day life.
2nd issue cover
Rattletrap article cover
Video player with inline comments
Related content page
To show how compelling these stories could be, we went out and found an actual story to tell. We spent two days filming the Rattletrap crew to use as a proof of concept documentary.
Article page with comments
In addition, we also wanted to allow users to share their own stories and contribute to each article.
Mike Boutté - art direction, DP, editing, post production, user experience design Keith Weaver - creative direction, user experience design Jennifer Blehm - copywriting, content development Patrick Copeland - audio production Mike Bray - design Andrea Gill - design Michael Keenan - design Hunter Grove - design
When we received W+K Tokyo's invitation to participate in the Hinomaru Project, we felt honored and challenged by the prospect of producing something in response to the catastrophic events of March 3, 2011. We questioned how does one create something appropriate and heartfelt for the people of Japan, that both acknowledged their suffering and loss, and paid homage to their history and flag. It needed to avoid sentimentality while expressing respect and kindness in the simplest form, much like a love letter from those of us in Atlanta, Georgia, to the survivors in Japan. In that, we found inspiration... Hinomaru represents the sun – the source of all light. Light is color, and color and light convey emotional realities that words and images fail to communicate. In the spirit of collaboration, we wanted to create something we would be proud to send to Japan that captured that spirit.
Behind the scenes
Mike Boutté - creative direction, art direction, DP, post production Daniel Soder - creative direction Michael Gibson - creative direction, art direction, set building Keith Weaver - creative direction, art direction, DP
For the launch of Under Armour's new Combine 360 Training web site, we were tasked to create five videos that explained the what and how of Combine 360 Training. Using real atheltes and trainers at Under Armour's training complex in Florida, we focused on showing the training itself and showing how important measurements were to improvement and success in the program.
Mike Boutté - art direction, shoot direction, animation Chesley Lowe - creative direciton Stefan Sokal - motion design Chris Wood - motion design Joel Edwards - sound design Jimmy Milans - editing Cathy Thomas - producer Tom Bingham - DP Paul Korel - copywriting Steve Taylor - strategy
After phase one of the Pennington Wild Bird Seed campaign was under way, we needed to establish Pennington as the leader in the wild bird seed market. So we created the Pennington Wild Bird Band.
First we developed four characters.
Next we began working on developing TV concepts that would kick off the national campaign. All three went into testing.
The Last Seed
After much testing and tweaking, Monkey was chosen to be put into production. I travelled to Stockholm to work with Milford Film and Animation to art direct and work closely with their amazing team of 3D artists and animators.
Monkey - the finished spot
To support the TV campaign, we produced 3 radio spots, a Facebook page that allowed for downloads of every kind, and an out of home campaign that aligned with our banner ads.
Out of home
Mike Boutté - art direction, animation direction Joel Krieger - creative direction Joel Edwards - audio production Paul Korel - copywriting Chelsea Darling - design Tam Cao - design, animation
With virtually no awareness in the bird seed market, and with their competition about to change that, Pennington came to us with a two phased challenge. First, show an immediate increase in awareness and sales in the bird seed market. Second, establish Pennington as the leader in wild bird feed.
For the first phase, we created the Pennington Yard Entertainment guide which gave folks a way to get outside and enjoy wild birds with activities, recipes and more.
the yard guide promo video
Offered as a free download from the Facebook page, along with other bird related bits, Pennington was able to see a jump in sales within less than a month.
Mike Boutté - art direction, animation Joel Krieger - creative direction Kristen Iskandrian - copywriting Chelsea Darling - design Tam Cao - design, animation
Ad Council came to IQ needing online support for it's What's Your Excuse campaign, being presented by the Department of Energy. The solution was to create a site that was packed full of ridiculous ways to waste energy - and the simple ways to conserve it.
The site includes a poster maker and gallery, an energy rescue game and Lost Excuses Land, where you'll find some ridiculous creatures with even more ridiculous excuses for wasting energy. Visit the site
energy rescue game
lost excuses land
Mike Boutté - art direction, animation, development, user experience design Mason Poe - creative direction Brandon Barr - copywriting, user experience design Philip Darden - design Thomas Weiser - design, animation
iShares wanted to build a tool that would illustrate the benefits of Exchange Traded Funds to financial advisors. To do this, we proposed using a combination of interview footage of rock star advisors and interactive tools to show real world results from using ETFs.
Using a spreadsheet metaphor, the design laid out tracks of content that could be accessed in any number of ways. Every direction was a different way to learn about ETF's and related to the specific needs of financial advisors.
An animatic was used for testing which produced positive result with a resounding thumbs up from a crowd that usually just wants to see the numbers. Unfortunately, iShares was purchased by another company before this project ever launched.
Mike Boutté - art direction, motion design Joel Krieger - creative direction Brandon Barr - copywriting Stefan Sokal - motion design