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.

Fun Fact
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




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.

Spaces




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.

single room




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.



Start screen



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



The Team

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



Photo story



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.

Share menu



The Team

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

Razorfish
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









The Team

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.





styleframes










motion test



The Team

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

IQ Interactive
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.

character development







Next we began working on developing TV concepts that would kick off the national campaign. All three went into testing.

The Last Seed


Pitch Pipe


Monkey



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.

Facebook page



Out of home



banner ads



The Team

Mike Boutté - art direction, animation direction
Joel Krieger - creative direction
Joel Edwards - audio production
Paul Korel - copywriting
Chelsea Darling - design
Tam Cao - design, animation

IQ Interactive
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.

Facebook page




Banner ad



The Team

Mike Boutté - art direction, animation
Joel Krieger - creative direction
Kristen Iskandrian - copywriting
Chelsea Darling - design
Tam Cao - design, animation

IQ Interactive
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

home page




poster gallery




poster maker




energy rescue game




lost excuses land




windy's room




The Team

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

IQ Interactive
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.

launch page





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.

content selection




video content




interactive chart




dashboard





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.

animatic



The Team

Mike Boutté - art direction, motion design
Joel Krieger - creative direction
Brandon Barr - copywriting
Stefan Sokal - motion design

IQ Interactive