Awarding fans badges has also become a key component in the “gamification” of the online social media experiences. Social media companies such as Foursquare, GetGlue, and others have popularized badges as a way of rewarding, engaging and motivating users. In the context of online social media, badges can be considered “virtual goods” – digital artifacts that have a visual representation. Badges can be awarded to users who complete specific tasks or activities, or reach a certain score or level of participation, or they can simply be given away as means of spreading your marketing message.

Social Media Badge Applications:
Over the last year, we have built a number of badge applications for Facebook and Twitter applications that enable fans to promote their favorite artist with a dynamic music badges (see below) which get posted on their Facebook wall.

Newsfeed Badge “Player”:
Once posted on a fan’s Facebook newsfeed, viewers can interact with the dynamic music badges. Once expanded in a viewer’s newsfeed, the badge can play one or more tracks and allows the viewers to purchase the album or click by including links to iTunes and/or Amazon.

Comprehensive Campaign Component:
It is also possible to integrate badge marketing into other, more comprehensive marketing campaigns. For example, this Nirvana Nevermind 20th email subscription application adds a marketing badge to make it more interesting and interactive on both Facebook and Twitter.

Ideal for music artists with an upcoming remix album or EP or a successfully remixed single. Metablocks’ Remix Widget allows fans to create (and share) their own multi-track mashups or re-mixs online using a simple point and click user interface and then share their creations with friends. Available as a Facebook application or stand-alone widget, the Remix Widget supports mixing of individual tracks or can simply be used as a remix player. Features include:

• Volume controls and visualizer
• Multi-track support (up to 12 tracks)
• Color-coding, tracking locking and other features
• Saving and sharing capabilities on Facebook, Twitter, email, i.e. (optional)
• Unique links for each link (http://2mix.es/tobymac-26)
• Demo track and help support
• Tracking capabilities (optional)

TobyMac: Dub Your Own Remix – Facebook Application

 Kaci Battaglia – Facebook Application

Recently, Facebook rolled once again out a major overhaul of their Pages – introducing Cover images and timelines to Facebook Pages. Here are a series of posts that explore these changes in more detail – the good, the bad and the ugly. You can check out our best practice and examples posts below:

• Facebook Cover Examples
• Appliation/Tab Icon Best Practices
• Music Label Cover Page Examples
  

The advent of Facebook’s new covers gives fans the opportunity to express themselves by supporting or promoting their favorite music artists.  Our Artist Cover application simply automates the process by making it easy for fans to use “official artist covers”. By allowing music labels to promote official artist covers and by making it easy for fans to transform their covers, the Artist Cover application is both cost-effective and efficient! You can checkout some examples at: Sony Nashville and Interscope.

Recently, Facebook rolled once again out a major overhaul of their Pages – introducing Cover images and timelines to Facebook Pages. Here are a series of posts we have done (and will continue doing) that explores these changes in more detail – the good, the bad and the ugly. The first set of posts focus on the more immediate design needs of some of our clients – what should my cover look like? what should my tab icons look like? How are the new changes going to impact my application.  Most of the changes are good ones! Tab navigation has changed (for the better). Your applications and tabs will continue normally. The notion of a default tab is gone (for better or worse).  The timeline is here!

This is what the new Facebook Page looks like. We have included pixel size as a quick reference to those in the process of in the middle of the redesign process. You can check out our best-practice examples and posts below:

Recent Best Practices and Examples Posts:

• Facebook Cover Examples
• Appliation/Tab Icon Best Practices
• Music Industry Facebook Covers

Other Resources:

• Facebook Pages (Facebook)
• Facebook Pages FAQ (Facebook)
• Facebook Cheat Sheet: Sizes and Dimensions (DreamGrow)
• Facebook Timeline (Facebook)

Not in Music and Entertainment? Then Use This Form!

Those who have had a chance to play with the New Facebook Pages (see FAQ) will notice that application and tabs have moved from the sidebar to the upper right of the page, under the Page’s cover (Also See: Facebook Page)

Page administrators can have as many as 3 tab images featured.  The rest are available via a drop down menu. From a marketing perspective, these new tab images are a big improvement over the small icons in the previous design.  Here are some examples, best practices, and design approaches when it come to the new application/tab icon images:

Key Points:

• The page administrator (not the application developer) is responsible for changing the tab images. You can change the tab icons in the Admin -> Apps (See example) of the page
• You can have as many as 3 tab images (the “Like” is non-functional and can/should be replaced). Click on a tab icon to get a drop down that let’s you change its position (See example)
• Custom tab images can be 111 x 74 pixels (but we have found 110×72 pixels works better and is a little more crisp)

Best Practices:

• Combine icons, photos, or images WITH text to reinforce call to action
• Avoid text-only or icon-only approaches if possible (people don’t like to read text and not all icons are intuitive)
• Take international users/usage into consideration if you are a global brand (consider using icons)
• Consider getting your icons professionally designed (see below)
• Facebook redesign comes with a learning curve! Help users find your application icons through good and perhaps “foolproof” design

Examples:

The Vow: Good use of space, nice balance between icons and text, good choice of icons

Redbull: These guys always seem to get social media right! Really good choice of graphics. Intuitive, visual, boom! You get it.

Toyota: You can tell when people pay to have their tab images designed..because they look so good! Excellent mix of intuitive, visual and communicative icons


Sony Brazil: Strong international icons (plus simple tab names)

UMG: Good use of images and text. Enter to win stuff from Lady Gaga…that makes a world of sense!

Darksiders: Consider sales/marketing “bursts” (New!, Extra!, Updated!) to draw attention to tab icons. Otherwise good use of graphics

Macy’s: Another example where the icons look professionally designed. Excellent use of text, graphics and images!

Microsoft Xbox: Mapping products (games) to tabs is a good way to go for some brands, but images should be immediately identifiable (as they are in this example)

Demos: Use of photo and text where icons don’t make as much sense. “Foolproofing” by reinforcing “Click Here” call to action

Verizon Wireless: Use of photos can work well for some brands, but one needs to be careful not to use generic images (see below)

AT&T: Another professionally designed example

Nespresso: Decent design with good use of logo and products

Not So Good (Bad) Examples:
Here are some less-than-perfect examples that you can still learn a lot from – either things NOT to do or ideas that can be improved on.

Fanta: Repeat of logo, poor connection between images and tabs. What does a can have to do with events?

Good icon/text combination, good contrast (but potentially boring)

Livestrong: Good branding but icons could be improved, would also make sense to add text. B is not universal icon for blogs!

Ford: Poor choice of icons creates for non-intuitive navigation. You can’t tell photos from videos, home icon doesn’t make sense and why put the Ford logo on a pages tab? Counter-intuitive!

Castleville: If you HAVE to use text, this may be the way to go – at least use a big unique font and a background image. Example of “foolproofing” but can be improved

Johnson’s Baby: Wow, any idea what’s behind these tabs? A line-up of similar and generic images defeats the point of good navigation (might as well have images of kittens)

Dove: Same problem as Johnshon’s Baby..can you say “worst practicies”

Chevy Sonic: Example where using a photo (of the same car) is NOT a good idea

In the last 2 weeks the folks in our research department have looked at as many music label Facebook Pages as possible to identify some of the Facebook cover design trends and approaches (given Music is an industry we play in heavily). Here are some of the design trends we found:

• Album Collages Covers: Collection of popular, recent or representative album covers
• Artist Collages Covers: Collage of artists (few or many) associated with the music label
• Album Release Covers: Featuring album covers of current or coming big album releases
• Call-To-Action Covers: Covers with not-so subtle promotions or calls-to-action

Album Collage Covers

Interscope

Subpop Records

Sony Music Latin:

Artist Collage

Universal Music Group

UMG Norway

Album Release Covers

Epitaph Records

Sony Music Brazil

Vagrant Records

BEC Recording

Call-To-Action Covers
Although Facebook “discourages” excessive call-to-action messages in Cover photos (aka Ads). Here are some (good ones) – including both the very subtle and those that definitely push the limits.

Mercury Records

Kult Records

Sign up for our newsletter and we will keep you posted about ongoing design trends!

Most of you have already noticed the new and redesigned Facebook Pages.  A growing number of brands have already upgraded their pages and all pages will be automatically upgraded on March 30, 2012. We have received a number of calls and emails from clients about the new Facebook pages and how the new changes will affect their applications, page design and marketing efforts. Here is a high summary of the changes

• Facebook pages now feature a Cover image (851 x 315 pixels)
• The vertical navigation (sidebar) has been replaced by Apps area were applications and tabs can be featured. You can fit and position as many as 3 application tab images in the upper right hand of the page. These custom tabs images can be 111 x 74 pixels (but we have found 110×72 pixels works better and is a little more crisp)
• Facebook page tabs can now be as wide as 810 pixels (although this is the number Facebook gives, we have found that 780 pixel is the maximum width to “nicely” center tab content)
• The notion of a default tab (for non-fans) is gone. We found this to have worked very poorly in the past, and provide limited utility (since it applied only to non-fans), so we don’t think this feature will be sorely missed. The timeline is now the default tab.

There are other changes that are less visible and potentially impactful that include:

• New admin panel and the ability to fans/users to send page admin messages
• More control on posting ability and visibility, tagging, country restrictions and other communication controls
• Ability to better feature posts on the timeline, which now provides better support for large images that brands should really exploit

As brands scramble to update their Facebook pages in the next 10 days, here are good samples of what clients (and non-clients) are doing with the Facebook covers and tab icons.

Darksiders (THQ):
Demonstrates simplicity and good tab icon/image design.

Demo Page:
Demonstrates “minimize-proof” cover design and “fool proof” tab images.

Interscope:
Demonstrates creative cover design.

Ben & Jerry’s:
Demonstrates creative cover design, reinforcing use of profile photo (as logo), and good tab image design.

Verizon Wireless:
Demonstrates use of user generated content in cover design and use of photography in tab image design.

Livestrong:
Demonstrates good iconic tab image design.

Need Inspiration? Here are list of great cover examples for ideas and inspiration!

• Facebook Cover Page Examples
• Creative Facebook Cover Examples

We recently deployed a series of Jigsaw Puzzle Applications for the CMT Network for 3 of their shows: Sweet Home Alabama, Bayou Billionaire (CMT) and My Big Redneck Vacation (CMT). The puzzle application supports both a basic sliding puzzle and the more complex jigsaw puzzle. Fans can play weekly and have the option to unlock premium content (such as photos, video, or music) or simply compete with each other for a high score. The graphic puzzle application supports a custom graphic header, sharing capabilities (on Facebook and Twitter), leaderboard support (with social sharing), comments and discussion as well as tracking.

Features and functionality include:

• Support for different sizes and complexity
• Support for high score leader board and social score sharing
• Controls like timer, reset, hints, save, auto-save and auto-solve capabilities
• Support for custom header, design and comment/discussion block
• Ability to unlock exclusive content (photo, video, music)
• Like-gating, email-gating, age-gating and geo-gating support
• Sharing support (Facebook and twitter)

You can check them out here for yourself here:

• Bayou Billionaire Crossword Puzzle
• My Big Redneck Vaction Crossword Puzzle
• Sweet Home Alabama Crossword Puzzle

Crossword puzzles are said to be the most popular and widespread word game in the world! Today, their popularity remains strong and crossword puzzles can be a great way to interact with Facebook fans, especially older and more affluent fans.  UMG Canada has successfully deployed a music-themed crossword puzzle on their MusicVaultz site that is updated on a monthly basis and that allows fans to share their high scores with friends on Facebook.

Features and functionality Include:

• Support for different sizes and complexity
• Support for high score leader board and social score sharing
• Controls like timer, reset, hints, save, auto-save and auto-solve capabilities
• Support for custom header, design and comment/discussion block
• Ability to unlock exclusive content (photo, video, music)
• Like-gating, email-gating, age-gating and geo-gating support
• Sharing support (Facebook and Twitter)

You can check it out here:

• MusicVaultz