It seems like every day our clients face questions around the “next great platform” and the need to be a part of it.  Regardless of which platforms to pursue, an often overlooked question is:  How do you seamlessly extend your product experience into multiple spaces?

Recently we delivered a multi-platform solution for Bloomberg Sports’ NFL Decision Maker that illustrates some of the key points to keep in mind.

1)      Understand needs and context

2)      Capitalize on platform strengths

3)      Anticipate interaction discrepancies

4)      Leverage an extensible design style

Check out the ‘Best iPhone Apps’ review of Decision Maker by AppSmile.com.

A Little Background

Bloomberg Sports’ NFL Decision Maker is a revolutionary sports analysis tool that provides fantasy football consumers with weekly player analysis of unparalleled breadth and depth. 

Following the release of the original web version at BloombergSports.com we worked with Bloomberg Sports to simultaneously extend the product across iPhone and iPad devices.  The success rested on translating the application across different platforms while maintaining Bloomberg Sports’ cohesive brand identity and unique user experience.

1) Understand needs and context

Each new platform tends to be environmentally different requiring a more intimate understanding of what people do and when they do it for each platform.

As we translated Decision Maker for the iPad and iPhone we had to make choices about the quantity, style and structure of information.  Similar in focus to the web version, the iPad release includes the same layered analysis within a more visually immersive and playful experience for iPad users.

iPad app

This contrasts with the iPhone release, which is targeted at brief interaction and is correspondingly leaner and more focused on responding to incidental requests.  Less exploration, more answers, in an experience that while dynamic is fairly utilitarian.

2) Capitalize on platform strengths

Understanding what each platform and device excels at and ensuring your product takes full advantage is critical to meeting the specific expectations of target users.

A core market differentiator for Bloomberg Sports is rich and dynamic charting.  As we conceptualized the iPhone and iPad offerings, we considered Apple iOS’ strong support for charting with advanced styling and dynamic, haptic behaviors that are natively available.

For the iPhone we were more judicious with charting given the focus on essential information, with comparative and single side bar charts providing a uniform experience across the main application displays. In contrast, the iPad incorporates highly stylized charts and an additional interactive chart that is unavailable in the Web version (risk/reward chart).

iPhone app

.

iPad app

3) Anticipate interaction discrepancies

Different platforms can have very different interaction models (e.g., haptic/touch vs. non-touch or picking items from a list).  Also, the scale of a given device can dictate a difference in focus that can have ripple effects across how a product behaves.  A multi-platform strategy requires both an understanding of these differences and an ability to tailor the design to the space.

Thankfully the Decision Maker web application was designed to work on haptic devices like iPad and iPhone, so many of the core paradigms translated fairly easily.  However, “passive” indicators needed to be rethought and interaction behaviors and controls needed to be redesigned to utilize Apple UI paradigms and components.  Additionally, because users expect the ability to interact with everything in a touch medium, we also needed to make the interface more reactive and responsive.

4) Create an extensible design

From the beginning, we ensured that the design for Decision Maker considered the need to deploy across different devices and products, and established a style that could be easily translated between different platforms.  Differences in tone and scale between devices require a degree of translation and rethinking to adapt for the space.

The entire family of Decision Maker platforms

While the iPad and iPhone have different interface styles (buttons, menus, etc.) and physical/proportional differences, they utilize a common visual language and tone that both marries with the broader Bloomberg Sports brand and establish a unified product experience. The extensibility of the underlying framework allowed us to insure that different capabilities felt like extensions of a single product.

Bringing It Full Circle

Pursuing a multi-platform product strategy isn’t inherently more difficult or problematic than designing a single product.  However, successful initiatives require that you think more broadly about your product and audience from the outset, establishing a vision that you can execute against a framework that can allow you to easily extend yourself into different spaces and experiences.

If you consider yourself a Twitter-addict or happen to visit new media blogs regularly you’re probably aware of the buzz that was generated the relaunch of the Skittles.com corporate website a few weeks back.  If you haven’t heard about it or haven’t yet seen what all the talk is about you should take a look for yourself at www.skittles.com.

The site has generated a lot of discussion within the interactive community, and this includes the folks here at Roundarch.  The opinions expressed have been strong and varied, ranging from those who think this is the beginning of the end to those who think this is a publicity coup and harbinger of a very different web.

Given the level of discourse around the “Skittles Gambit” we decided to take a moment to discuss the topic and walk through some of the aspects we think are the most interesting.

What am I seeing?
In keeping with Skittles’ irreverent and somewhat quirky brand identity, their updated site blurs (some might say erases) the boundaries between brand and customer identity.  It does this through the wholesale integration of social media services and content.

Of course we’ve all seen social media incorporated into websites before, however, the difference here is that Skittles has replaced four out of six site areas with external social media pages; Wikipedia (Home), Facebook (Friends), Twitter (Chatter), and YouTube (Media/Video), Flickr (Photos).  To summarize, Skittles has virtually reduced their site to a navigational aid/overlay.

The concept is pretty simple; create an in-page frame that automatically resizes to fit the content, load a specific location on the social media site inside it, and position a transparent overlay with your “global navigation” on the page to tie it all together.  While Skittles technically owns or manages the look of some pages on those third-party sites, the nature of social media content means the messaging itself comes from customers.

Why is this important?
The idea of leveraging social media sources is nothing new; many brands monitor chatter to understand how their brand is perceived, and the last few years has seen a growing trend towards integrating third-party services and content into brand sites (e.g., Digg, Twitter, YouTube, Facebook, etc.).  At the same time the basic interface concept behind the idea (using a global navigation element to unify disparate sites together under a common identity) is well established; major media companies like Lycos have been doing this since the ‘90s.

What’s different here is the degree to which Skittles has decided to decentralize and deregulate their brand.   Skittles has transformed their web site from an arm of their marketing group to a window on their market, nearly replacing “managed” brand messaging (most of the pages still belong to Skittles) with user generated content from third-party sources.  This has wide range of implications that are worth paying attention to.

What are some of these “implications”?
There are a lot of ideas to digest here, maybe more than you initially considered.  How do you manage content generated by customers on third party sites?  What’s your liability for comments on “your pages”?  How do you facilitate experiential continuity when using the disparate websites and applications?  What do you do if a critical third-party service is unavailable (e.g., Twitter.com’s problematic uptime numbers)?

All important questions that should be answered as part of an initial strategy.  However, aside from the operational concerns, a few of the more interesting implications involve strategic concepts around Brand Strategy and Cloud computing.  Yes, THAT Cloud computing… hang tight, we’ll come back to that in a minute.

Brand as a Mirror, or Is That a Window?
The feedback in the community and within our company has been fairly divided around the topic of brand strategy.  Some people feel that Skittles.com is a good example of everything not to do when managing your online brand identity.  Others feel that Skittles campaign has been effective in the near term and could be substantially so in the long term.  Who’s right?

Among the former group the feeling is that true brand strategy engages customers, keeps them involved, and provides compelling content and services to reinforce the identity the brand has fostered and marketed.  For this group a decentralized and laissez faire approach to content leads to a stale and uninspiring experience, subsequently undermining the brand’s effectiveness and inspirational capabilities.

On the other side of the aisle we have a slightly larger group who believe that the Skittles.com redesign, while poor in certain respects, hits or comes very close to the mark.   For this group the site is at least an effective viral campaign (look at the press), and at most the introduction of a nimble brand platform.

So where does this leave us.  Any decentralized model that leverages customer content to the degree that Skittles.com does runs the risk of become an outdated novelty.  However, this is as true of an owned corporate site as it is a fully deregulated one, perhaps even more so.  The main success of either approach lies in the brand’s ability to selectively introduce the content necessary to support and incite their community.

If we accept this commonality the big difference becomes one of reach; an owned corporate site relies on pulled traffic and unique visits, while a decentralized site pushes content into ancillary networks that can propagate and disseminate the material faster and more widely than virtually any corporate campaign.

Cloud Computing, The Early Years…
At the same time, the Skittles strategy provides a great example of something much larger than brand perception and marketing.  That is Cloud computing, a term you’ve probably heard bandied around by media pundits and technology gurus, but which you likely only have a fuzzy and general perception on.  Yeah, we know, wha?!?

Cloud computing is a lot like Web 2.0; the exact definition you get depends on who you ask.  For some folks Cloud computing conjures up ideas of dynamic data repositories accessible to an assortment of different applications across a variety of devices and mediums.  For others the “Cloud” is about bringing disparate services and applications together to form a larger experience.

The short answer is that both of these descriptions are correct.  The web as we know it is migrating towards a paradigm where content and services are decoupled and decentralized.  In this “web of the future,” online services will likely be both intelligent and portable, with content from one site sourceable to an application on another that is then integrated into a larger suite of services somewhere else.

Of course this isn’t going to happen overnight… not only does the technology and infrastructure not exist, but the basic interaction and behavioral patterns needed to support these kinds of services haven’t been adopted yet.  Instead it’s going to involve a progressive evolution, with a variety of different solutions appearing along the way.

Enter Skittles.com, which as lowly as it is, provides a protozoan example of this new paradigm in action.  Yes, it’s kind of ugly, and yes, it’s a little raw.  However, Skittles.com is forcibly assembling third party applications into a self-serving agglomeration, the site becoming a thin skin on a much broader set of distributed services.  The power of Skittles.com is thus its ability to provide a digestible “Cloud” example to people who have difficulty conceptualizing this far reaching future.

Bringing It Full Circle
So where does that leave us… Skittles.com, a canary of danger or a beacon of a compelling future?  The truth is that it’s probably too early to make a definitive call either way, and the success of the approach – both as a brand venue and as a harbinger of Web 3.0 – will depend in large part on how Skittles manages and uses their new toy.

However, what we can say is that this example is symptomatic of an accelerating trend towards an interactive medium in which there are fewer and less distinct boundaries between discreet digital applications and services.  Previously formal distinctions between brands and their customers are becoming increasingly less relevant, with companies looking to leverage the viral and associative aspects of social media networks to extend their message and increase the granularity of their touch points.

Scary and exciting all at the same time… now to wrap up and take a look at status alert I just received from my close friend, Jif.  Maybe you know him?