// Research:

As always,  we get to know the product and it’s competition inside out. In this case, we identified a few key differentiators that would inform our creative execution. Ultimately, the story was simple, send a text message from your wireless phone number using your computer or tablet instead of your phone.

// Distinct Creative:

During our research we learned that the history of of text messaging was unconsidered, almost accidental. (Oversimplification alert) An engineer discovered some extra network availability and needed to find a use for it. Voila! Text messaging was born. This informed our first concept which used texting history as a device to illustrate a past to present comparison showing what texting can be when liberated from the mobile handset.  This direction was primarily typographic, 2D and illustrative in nature starting with a vintage treatment.

Our second execution, and the winner, was based on creating a completely unique piece of video content.  This goal informed every decision including scripting design, voice over, music, typography. Our script -uniquely- allows the Zipwhip brand voice to communicate through on-screen text bubbles in an exchange with an initially confused (but catching on as the video progresses) consumer. This unique approach to scripting allowed Zipwhip to be informed and cool when responding to the confused consumer. There is no Zipwhip ‘voice’ in the piece other than what is represented by the text bubbles. The visual execution relies on quirky (nearly hand made) paper looking sets and characters used illustrate scenarios focused on the value that the Zipwhip service can add to the daily routine. 

// Experimentation informs final execution:

After experimenting with characters in all shapes and sizes we came up with a minimal quirky design where all emotion was expressed through full body movements, eyes and hair (sadly for them they were mouthless - all the more reason to send a text message). Also, rather than traditional scene transitions, we would flip the rooms on sort of a carousel to get from one scene to the next.

Finally sound was a major consideration - it needed to emphasize the personality and punctuate on-screen activity.  Audio design elements were used to accentuate various actions like doors slamming, toasters popping and scenes transitioning for comedic effect.  We also decided to go for a cartoonish, confused delivery and worked closely with the VO artist to develop this tone.  As well, the music was originally composed for this piece, and a style was chosen that seemed initially incongruous with the visuals. But it adds another unique detail and a sense of urgency and discovery.

Well considered video content can play a key role in activating brands online. Whether for brand awareness, lead generation or sell through. If you want to discuss how this might work for your brand or project please get in touch, we’d love to hear from you.

Zipwhip Consumer Launch Video from WINTR on Vimeo.

+ Creative Content thinking.

We believe that presenting information in compelling, original and interactive manner is an effective strategy for raising awareness and engagement. Recently there have been numerous posts across the industry that champion the case for creative and cutting edge content marketing - a key service offering of ours. Mashable explains that “content marketing encompasses new techniques and methods of sharing information. Spreading unique, helpful bits within the industry or with consumers creates brand awareness, new customers and client loyalty.”

We agree. And we welcomed this challenge with open arms. Presenting an alternative, even experimental execution merging interactive and motion techniques.

+ Storytelling, Interactive and Motion skills - together in harmony.

In addition to presenting the information in a fresh, sit up and notice way it was essential that we crafted an experience that engaged and motivated people beyond the non-profit and philanthropic communities. A key objective. Creating relevant content can capture attention from your audience, both new and existing, we needed to create something with inherent shareable value - an interactive experience to bring the message to life. Narrative was key. By focusing on just one woman we could craft an experience that enabled the user to discover just how this investment could create positive results for one woman, her family and her community - ending with the message that investment ultimately leads to a better world for us all.

With our creative direction set we knew bringing the story to life would be technically complex, calling for our interactive and motion teams to work closely together to provide a seamless, cutting edge solution. The result? An original experience that came in the form of an immersive, interactive infographic, told through chapters for a user to navigate, or sit back and watch as an animated sequence. And it works across devices and platforms. Here’s how it came to life:

+ Production details.

The main animation sequence in the Women in Agriculture infographic is created in the 3D modeling software Cinema 4D. Once the design and basic animation was nailed down, each frame of the sequence was exported from Cinema 4D as a separate image. This gave us a frame sequence of 26 images. The next step was to create a javascript-based playback mechanism for the sequence. Using Coffeescript (http://coffeescript.org/) and jQuery, we created a custom class for running the sequence. With it, we were able to play, rewind, and jump around the sequence easily and efficiently. The class also allowed us to preload the next stage of the sequence in the background to ensure a smooth experience, relatively free of recurring preloader interruptions. 

In addition to the playback of the main frame sequence, the experience features some short looping animations at each of it’s “stages”, such as chickens pecking the ground and children hopping up and down. Another Javascript class was created to run these for each stage. The code allowed for easily increasing (or decreasing) the randomness of each animation, creating an organic, natural pacing, allowing for a delightful experience where control is in the hands of the user.

+ In conclusion and to the future…

Women in Agriculture is just one example of an in house tailor made solution that fulfills our clients objectives around content marketing. If you’d like to find out more about the thinking, the process and the impact we’d be happy to chat further - reach out.

+ Twitter activity at launch.

Facebook has never held a marketing conference before and the primary focus was on how they’re integrating themselves further into the brand space. Top big-brand representatives spoke about social transparency, further connecting to wider networks and doing so while simply acting in a more human way. Walmart for example shared plans for their movement back to “old school customer service” using the example that 100 years ago we all would expect our local shopkeeper to know our likes, dislikes, what we might be interested in.

An intelligent use of the social web enables us to redefine and bring back to life personal relationships between brands and consumers - no matter how big or small a business.

The afternoon showcased success stories with consumer connection at the core. Projects such as American Express Small business Saturday, or our friends and clients at Starbucks and their Pumpkin Spice Latte campaign are great examples that were referenced. We know from experience, campaigns of this nature require original creative thinking and solid strategy.

So what can we learn to take future experiences next level with the big design changes as they impact users experience of brand pages? Also how can the features and benefits be leveraged to create more game-changing social stories? Check it out.

// Cover Photo

Timeline for brand pages is now here. And if you’re not ready to take the plunge, you have the next 30 days to try it out ( or better yet curate the experience) before it becomes inevitable. One of many great features is the new cover photo acts as a visual status. It’s valuable real estate an 851 x 315 digital (free) billboard. And it can be updated to highlight events, campaigns, competitions - really anything. We have lots of ideas up our sleeves and we like this example from client of ours AT&T, who bring together an ‘ever changing mosaic’ of the consumers photos:

// Friends will curate the content

“A way for pages to become much more personal to me, through the eyes of my friends”

Head of Design, Facebook

It’s time to swap wisdom of crowds to wisdom of friends. Brand pages will now display relevant content from friends who have interacted with the brand previously. We’re talking serious intel. Your old room mate visited a Target last summer and checked in? It’ll be at the top of your brand experience when you visit the Target’s brand page. We’re particularly excited by brands with products already leveraging the Open Graph features of Facebook. Spotify is a great example. Check out the extra layer of personalization that happens with Open Graph content aggregation as it displays on a brand page Timeline. Look at this example from exploding-she’s-so-popular artist Lana Del Ray’s brand page. You can see not only who likes Lana with me (I thought it was the entire wold these days?) but who last played her album, what song, what’s popular. The experience becomes evermore personal, through the collective lens of your network of friends. 

// Bigger is better - ‘tab’ and app space

Where’d the the tabs go? How can consumers get to the brand’s current contest or app? With Timeline these are displayed in a new way, but it’s more intuitive and as users have been acclimated to interact with their own Timeline’s, it’s an easier transition for brands. Check out the image below and you can see the new navigation to ‘get to’ other tabs and applications. Also, there is the option to ‘swap position’ so that a recent tab, or a current campaign is what displays without expanding the toggle.

Most of the features for tabs and apps are the same and, designers rejoice, ... there is most space to play with! The new width is 810 instead of the 520 > 760 view. If you have a tab or an application that is currently 520 it will still work, there is just extra space in the margin as you see in the image of our WINTR welcome tab. Also, take a look at a wireframe for an application we’re creating that will utilize the 810 space. If you have questions about how to convert your tab and/or application or create a new one to make the most of this space ( let alone leverage the radness of Open Graph) we’d be elated to elaborate.

Another important thing to note here is brands can no longer control the default view for consumers who have not yet ‘liked’ a brand’s page. For example, our welcome ‘tab’ used to be the first thing users saw when they visited our page if they had yet to ‘like’ us. Now, the first thing everyone will see is a brand’s Timeline. So best be makin’ the most of it! Next we’ll look at some ways to do just that.

// Exclusive Offers

Facebook launched a tool that allows brands to create and share exclusive offers as a status post. As you ‘claim’ an offer, you’re sharing it out to your network. The result, another valuable way for brands to become part of the all-important newsfeed and a great way to track digital initiatives to retail sell through. Freshly unveiled just last week, some select partners tested the feature in beta and consumer participation metrics were great. One partner, Macy’s, spoke, mentioning a boost to page activity including new ‘connections’ (likes), quick adoption from consumers and positive sentiment. As you can see in the example, this looks much different than Facebook ads.



// Brand Storytelling

Every brilliant brand has a story it’s sharing and engaging methods for consumers to play a part. Communication is great, but an authentic narrative unlocks a richer level of interaction between brand and consumer. Another reason to embrace Timeline for brand pages! Timeline is a super immersive way to interact with a brand’s history as you can populate content back to the begining - long before Facebook was ever around. This feature is a big bonus for heritage brands and if leveraged well, demonstrates how a brand is capable of change, innovation and customer loyalty. We’re looking forward to making the most of Timeline with our clients - where it all started, the big wins, the turning points, the landmark celebrations. Here are a few examples of some pages who have used a new tool to lay out a long history:

Manchester United

Ben & Jerry’s


// Direct Messaging

Another important change is the new messaging portal! Now, consumers can interact with brands directly through messaging - and brands can respond in the same way. As more people turn to Facebook rather than websites for customer service related comments, this will no doubt become a fundamental new tool in brand relationships. This very easily could become *the* customer service channel - make sure yours is up and running with brand ambassadors listening and ready to respond. Community management is critical and brands must consider the medium when crafting the message. 

// Let’s make some future history

These are just some of the changes that inspired us. Check out all the updates and what this means for your brand story over here.  Want to read more about what brands are doing a swell job? You can view them here. Or, if you’re interested in your brand bringing something remarkable to life using the social web we’d love to have a conversation about how we can make that happen for you - from laying out the strategy to making the most of the features and benefits available through Facebook as they make sense for your brand and objectives.

In a recent experiment we’ve driven mobile or desktop users to interact with an application to receive an image, tag or other piece of branded content that they then take into the retail store. Using their mobile device, they present this content to a webcam enabled display to unlock a reward or clue.

Here’s are the basics of how this works:

1) Traffic is directed to a campaign web application (with desktop and mobile views) using geo-targeted and Facebook ads:

2) Here, we incentivize users to interact with the application to receive unique content in the form of a ‘marker’ that will ‘unlock’ additional content in-store with an augmented reality experience:

3) Users take the ‘content’ to a physical destination to “unlock” it. This “unlocked content” could include a whole host of things - instant wins, game accomplishments, character creation or any other brand appropriate incentive. A natural extension of branded games, contests or online competitions:

To further illustrate a use-case, we’ve created a story for how this might work to drive consumers in store for a promotional campaign. Let’s say, HTC is sponsoring the American tour for Niki & the Dove (we recently created a video for this band), both Niki & The Dove’s record and HTC devices can be purchased at retail partner Best Buy. Yes, you can still buy CD’s at Best Buy… How do we drive fans to Best Buy with this experiment?

Here’s how our story unfolds.

1) Like we mentioned above, traffic is directed to a campaign application. Likely a mobile web/facebook app.

Consumers learn about the promotion on their favorite websites, from their Facebook feed, Facebook ads, geo-targeted ads or maybe an in store promotion.

2) The campaign application (mobile web or Facebook) to deliver promotional content ‘marker’ to user’s mobile device .

Interacting with a mobile web or a mobile Facebook app, leaves consumers with a unique promotional content ‘marker’ saved right to their mobile device. This promotional content can contain valuable marketing messaging for HTC and Niki & the Dove and visuals, for example information of how to “redeem” this special collateral in store at Best Buy. This ‘marker’ is what will be recognized in an augmented reality experience. Consumers may be instructed to visit at a specific location and/or time to redeem the promotion.

3) In-store augmented reality experience.

At the physical Best Buy store, an HTC branded digital kiosk, is set up with a camera and a monitor.  When consumers holds up his or her phone with the marker to the camera they will see their “redeemed” promotion.

In our use-case, consumers would see an interesting 3D animated object, text, or even a clever mask from the band’s latest music video release, placed over their head. An opportunity to meet the band!

When the environment changes so does the object displayed. And, since the augmented object reacts to how you’re moving a specific marker you’ll literally walk away with a completely unique experience. Consumers are engaged in a memorable experience they are likely to share.

With the wide spread adoption of mobility of technology there is both a huge opportunity and audience for augmented reality, opening the door to bring many types of campaigns to life. It’s here to stay, and will help define a new, immersive and relevant space for consumers to engage with brands. Interested? We’d be psyched to have a conversation about how this can work for your next campaign.

A few technical details:

In this instance we’ve chosen an adaptable framework that can accommodate a wide range of hardware and integration with internal fulfillment systems. This includes the Processing platform, Processing is a powerful open source programming language for developing interactive applications. Initially developed to serve as a software “sketchbook”, it allows for very rapid prototyping with a strait forward syntax. Processing is on the forefront of bridging the gap between code and the physical world, from Arduino to interactive displays, processing allows you to truly bring interactive ideas to life.

More About Hyper Island:

During the last 15 years Hyper Island has been designing learning experiences for students and industry. Starting out in what used to be an old prison in the small naval town Karlskrona we now have offices in Stockholm, London, Manchester and New York and are present in almost every corner of the world – from Amsterdam and San Francisco to Tokyo and Berlin.

During this time digital has gone from being another channel for communication to an integrated fibre of the fabric that surrounds us. Hyper Island has been at the forefront of that journey, by working with industry leading pioneers. We have recognized that in this fast changing landscape people will need a different type of education where they can pick up a more dynamic, richer skill set that goes beyond the traditional craft. So, after years of acquiring experience and knowhow, always in close collaboration with the best agencies around the world, we launched the first Hyper Island Master Class in August 2008.

Our educational philosophy “The Hyper Island Way” is founded on Problem-Based-Learning, Experience-Based-Learning and the Case Method. We have high ambitions to break down the traditional walls that separate education from it’s surroundings, society and the work place. We design learning experiences that give the participants the opportunity to work close to reality and coach them through their experiences. The courses themselves are rich practical experiences, both in content and process.

Hyper Island offers the Master Class out of our offices in the UK, USA and Sweden where we also run the following long-term educational programs: Digital Media, eCcommerce Manager, Interactive Art Director,  Mobile Applications, and Motion Graphics.

”Here in the UK Hyper Island is regarded as the pre-eminent breeding ground for top-class digital talent. A Hyper Island student is practically guaranteed a job the moment they walk through the doors.” - Gavin Gordon Rogers, Creative Director, Agency Republic, London

It’s creative content worth sharing. It helps to start with a great product, in this case, an amazing song. The rest is by design, through our process of identifying the target audience and engineering content to appeal to their current preferences, tastes and trends. The content takes on cultural currency, an intrinsic sharable value within a target culture. And content refers to more than video, it could be an app, an interactive story or an augmented reality experience. In this case it’s a music video for a soon-to-be-large Swedish band. This project provided us with an excellent opportunity to apply our thinking to create cultural currency and flex our in-house motion design and 3D skills.

Spotify is a great example of an app that is leveraging the new Open Graph features. Already one of the defining social music apps on the web, they expanded to the US this summer and added well over 4 million new users since f8. If you’ve not tried Spotify yet, it’s well worth it, give it a shot. Full disclosure here, we work with Spotify so we may be partial.

Actions and Objects is one example of the app-enhancing features of Open Graph. For example, on Facebook, you’ve likely noticed friends ‘listening to’ [a song title, by artist’] ‘on Spotify’. Listening is the action, while the song is the object and this activity is happening within the app, in this case, Spotify.

Also, if you’re a developer who has Timeline installed, you’ve seen how your interaction with apps, from what you read, to what you listen to, games you play, are all defining aspects of your Facebook profile experience beyond your ticker and activity log. Looking more specifically at music and the way Spotify integrates with Timeline, you can see the aggregate of what you’ve been listening to lately, what you listen to the most, and playlists you create and subscribe to. If your response is -  um, rad, but why don’t I have Timeline? - fret not, it will soon be available to everyone. And yes, it is tres rad.

So, now your friends on Facebook can know what you are ‘listening to’, what does this mean?

You can rapidly share and easily discover music with your friends. Try creating a collaborative playlist on Spotify and share it out to your friends to contribute. Simply right click on a playlist you’ve created on Spotify and select collaborative playlist. 

But, what if you don’t want people to know what you’re listening to? Maybe some guilty pleasure that could impact your street cred. Simple solution. You can choose to go stealth mode with Spotify. You can choose to go stealth mode with Spotify. Within Spotify, under the application navigation under Spotify select private listening. 

It’s all about you.

If you have an app or apps, you’re likely wondering, how you can use these features to create more meaningful experiences around your app and brand. Glad you’re curious! We’ve been working with new Open Graph features since they were announced and are very excited to be applying and leveraging the new features in ways that enhance the user experience and social interaction of existing and new apps. If you want to know more about what this means for your brand, your action is to - holler.

We’ll start with the “art” piece of the headline. Motion design is the practice of bringing graphic design to ‘life’ through -  yes! - motion. 2D, 3D, live-action video, stop motion imagery and beyond. Starts to make more sense if you think of it as ‘Motion [graphics] design’.

Where do you see it? On every screen you use. The user interface on your smartphone, online videos, motion picture titles, video games, and broadcast commercials are a start. The digital “revolution” has accelerated it’s adoption and created the necessity for well considered motion pieces. Everywhere. Yet there is no single resource dedicated to this discipline that has it’s origins with the advent of the motion picture.

Knowing that and having likely encountered the question “what is motion design” numerous times, Paola Boileau & Kook Ewo two talented motion designers have created the first of it’s kind motion design resource. What is motion design With the objective of “opening the world of motion design to the public.” They have done an amazing job of explaining what is perceived to be a nebulous creative discipline in this video and on this website. They do a great job explaining the rich history of the discipline starting at the beginning.

Is this something I was supposed to know? Not really, motion design gets confused with character driven animation (think cartoons) all the time.  Having created motion design work for various brands from consumer goods to healthcare including AT&T, HTC, to Thomson Rueters, Dell and Microsoft. And not surprisingly, some form of the question “what is motion design?” regularly arises in meetings or creative reviews. Fortunately the source of this question is almost always someone that parachutes into the project after it is well under way. And we’d like to thank the guys at Motion Plus Design for doing such an excellent job of answering the question.

Motion design as a discipline is responsible of the most eye-blasting, contemporary work in the creative industry. Think about the last video you you saw and asked yourself “how did they do that??”, probably included some motion design.

And now for the commerce part of the headline. You may be asking yourself from a marketing perspective, why do I care? Well, internet video from how-to’s to promotional pieces are being rapidly adopted for a couple of key reasons. First they increase conversion rates, sometimes as much as 30-40% in our experience in consumer goods, electronics and software industries. And motion design pieces based on branded graphics are an excellent way to tell your brand and product story while increasing conversions. Art and commerce.

In web development, finding bugs can be challenging and costly.  Even more challenging is making sure more bugs aren’t created as new features are added and updates are made. Instead of trying the same thing over and over again expecting different results, to help keep us sane and to avoid these regression bugs, we have begun employing a test-driven development (TDD) process for many of our more complex web application projects.

We literally set the application up to fail.

With TDD, we first write a failing automated test case that defines the results of a new feature. The test itself is a simple block of code that performs an action and checks to see if the desired result occurred. Once the feature is added, and working, the test will pass. As time passes, more features (and their tests) are added. With the tests in place we are notified immediately when a new feature causes an older one to break. So, while writing the tests is initially more time consuming, in the long run, we are way ahead of the game.

By having thorough tests in place, our codebase is much more resilient to future bugs, which saves our time and therefore our client’s money. The alternative to TDD, which relies on the developers (in all our imperfection), to test everything manually, is beginning to look downright wasteful. There are testing frameworks available for most code languages… we are mostly using the RSpec testing framework for our Ruby on Rails applications.

Speaking of “test driving.” this M1 is pretty fresh.

WINTR SEA > NYC for Fashion Week

WINTR and Spotify have teamed up to sponsor the sounds for designer Logan Neitzel’s upcoming Spring Summer 2012 collection with a live collaborative Spotify set on 09/09 starting at 7pm EST.

Collaborate on the playlist for Logan’s show and after party and follow @WINTR_US for live updates during the show.

Need Spotify?

After party? Check our Facebook where we’ll post the final playlist enjoyed live by Spotify, Vogue, W, Style.com and other peeps at the exclusive event.

And Courtney made a cameo.