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.

One of the more remarkable talks I attended at SXSWi (pronounced South By South West eye – not es-ex-es-double-you), was a talk by Matthew Smith from Squared Eye, a boutique web development firm.

Here are some takeaways:

• Design around the content. Don’t let your design aesthetics dictate your web design. Content is why the audience is there.
• It is not YOUR site – it is the site owner’s site. Your design must serve the goals of the site owner. As designers we are often emotionally attached to our work and often think of our work as an extension of us.
• Great web design helps content get stuff done (with pleasure).
• Spank that niche. I thought that this was hilarious.
• Knowledge
  • Know the Client
  • Know the Audience
  • Know the Medium
  • Know the Content
• Design Techniques
  • Use size to help design hierarchy visually
  • Establish a visual language (green for action, blue for links, features is 15pt font, etc)
  • Use color to draw people’s eyes
  • Design for pleasure – ex. Gowalla’s custom icons, motion, etc

Here are his slides although they are really best viewed along with the talk.

Coming from a background in branding and marketing, I spend a great deal of my time confusing and conflating the concepts of “user experience” and “usability,” often to the dismay of my more learned colleagues. I probably deserve their contempt — what with my slander of their profession and coral polo shirt — but the physical violence is generally unwarranted.

I am regularly reminded of the importance and inherence of the user’s expectations — the consistency of experience and interactivity — and how it can and should manifest throughout thoughtful application design. Beyond those grand efforts of simplifying features and improving interface design, how can we best communicate that experience just around the bend? How can we best rely on expected interactions and, when it’s necessary, attach overt user cues to unexpected ones? And so the bruises multiply.

But I cut my teeth in the land of sizzle, where the unexpected made the user experience, and the most we needed audiences to “get it” was to laugh at the punchline (right before the logo appeared and right after the duck barked). And though brand experiences and application experiences serve different purposes, I wonder if brand experiences have taught us to expect something from applications — just as application experiences have taught us to expect usability from brands.

Perhaps we have begun to expect pleasant surprises — intermittent bits of entertainment to break the monotony — from even our “function-first” applications.

As UX geeks, we often explore playful design and clever interactions as a way of nudging behaviors and deepening engagement. Even dry content is moistened with a bit of rewarding animation or a vaguely human-like conversational tone (Skype thrives as much on charm as it does technology, and everybody loves a 404 error with a little sympathetic spunk.). Unique interaction metaphors further up the ante. Hell, I recently found myself playing with an iPhone app that does unit conversions. UNIT CONVERSIONS.

But I propose that we are entering a time when engaging user experiences (including RIAs and other interfaces) transcends playfulness and, in select-and-increasing instances, toward a series of deliberate pleasant surprises. These pleasant surprises — scraps of media, public recognition, spontaneous games — enhance engagement, encourage exploration and, when metered out in balance with critical functions, improve productivity. That they come in unanticipated forms and at unexpected times encourages users to spend more time at their workstations (or whatever task acts as the trigger), trying to “crack the code” or simply stumble upon the next payoff.

It’s slot machine psychology for the everyday, really: nobody complains when they’re blindsided by reward. Instead, they sit patiently, work diligently, and look forward to it.

Safari launched Safari version 4 Beta on Tuesday. There’s some good things and bad things about it.

I won’t go through every facet of the update (you can find a list on Apple’s site). I’ll be focusing on the features that stand out to me the most.

Tabs

Tabs are the most obvious UI change in Safari. In version 3 and earlier, Safari had inverted tabs placed below the address (and bookmarks) bar.

before:

Now, tabs are integrated into the top window bar and serve 2 functions:

- a draggable bar to move your application window around
- a group of individual tabs you can cycle through

after:

the bad: Because the top bar is now serving a dual function, it’s harder to focus/select an individual tab. This is because Safari’s first response to an interaction (click/press) with the top bar is to treat it as an application window you can drag. If the interaction hierarchy were flipped, and tab selection was first priority, window dragging would prove to be nearly impossible.

While you can focus a tab by carefully clicking anywhere on the bar, it takes a few tries, unless you start to train yourself to move straight to the right corner of a tab, where you’ll see the ‘grip’ lines.

Bottom line, Fitt’s Law is being comprimised.

the good: On a positive note, about 20 pixels of vertical screen real estate is gained with the combined browser/tab bar. Economy of space is a great thing and it’s especially relevant on laptops.

Web Inspector – Design Consistency & Data Visualizing

A great feature that I probably won’t be using very much is the Web Inspector. For developers out there that use programs like Firebug within Firefox, the Web Inspector will look very familiar. It allows you do to look behind the scenes of a given page and view the HTML and style sheets as well as see how quickly all the elements within a page load. Coupled with the Activity window, it’s a great way to debug websites.

Like all things Apple, its not only how well the Web Inspector works that makes it great, but how well it’s visually designed. When I toggled from Elements view to Resources view, I was again pleasantly surprised to see that they had appropriated repurposed the iTunes Resource visualizations for the iPod and iPhone:

Web Inspector – Resources:

iTunes – iPhone capacity:

RSS Feeds

I don’t get the option to choose what application/service I want to use to read feeds when I click on the RSS icon in the address bar. Firefox gives me the option to choose Google Reader.

What happened, Apple?!

Address Bar & AutoComplete

This is the clincher for me. Safari 4 Beta does not let you type in any part of the address, or title, of the site you want to go to. This has become an integral part of navigating the web for me and the best improvement from Firefox 2.

It’s a feature that’s easy to overlook until you don’t have it anymore, then you realize you can’t live without it.

Summary

Safari 4 is in many way’s a solid step up from from Safari 3. Nothing feels broken or incomplete, and it is dramatically faster (as reports have claimed). Along with the autocomplete issues, the lack of add-ons is the only other major drawback that’s keeping me from switching from Firefox 3. Adblocker, Delicious, Tabs Open Relative – sure I only have 3 add-ons, but they make a world of difference when browsing.

For the non-techie user, Safari is an excellent choice.

It’s like a Porsche without power windows and door locks – sure they’re drawbacks, but the car still drives like a dream.

At Roundarch we often work behind the firewall – which for people not familiar with our terminology, means we work on projects we’re not allowed to discuss, much less show publicly. As designers, not having a public audience/forum for our work can be both liberating and frustrating. So when Sam Lessin and Chad Stoller from drop.io contacted us to assist them in redesigning their simple yet powerful service, our ears perked up. Not only would we have an opportunity to creatively contribute to a product we all believed in, but we could do so publicly without risking the ire of valued but secret clients.

I can’t stress enough how useful their tool really is. I use it all the time. I have used it for an internal Roundarch presentation on Cloud Computing as well as for other personal things like picture drops and quick file transfers (when my IM craps-out). The ways in which to use their service seem to grow with each user’s imagination.

Roundarch and drop.io
Roundarch was brought on board to work with drop.io for a few reasons.  As a company, we are focused exclusively on designing and building leading edge digital experiences.  We are known in the industry for tackling the toughest design challenges and for bringing both breakthrough design and enterprise scale technology.  We are also known for being a leader in the development of Rich Internet Applications.  This is really a long way of saying we understand design, user experience and technology and we know how to bring them all together seamlessly.  We also understood that drop.io has a long-term road map for the services it provides.  The old design was quite a bit confusing and not able to keep up with new technologies and service improvements.  They needed a design that would complement and grow with future services.  We understood this challenge and were able to collaborate on a design solution.

The Challange
Drop.io is “Simple, Private Sharing”, but that doesn’t mean it’s an easy service to understand. Simplicity can sometimes be confusing. Retaining simplicity while providing a design that was easy to use and understand from day-1 was our primary focus. The real design challenge is that if a user is new to drop.io, and they’re given a URL to go to from someone, say, at a party who has just taken some photos among friends, when that user arrives at that URL they’re deposited right in the middle of a “drop”. No context. No on-boarding. The user just wakes up in a room and needs to figure out what it all means. So the nature of their service is simple: online storage space where files of any type can be dropped, viewed and shared, but partnering with Roundarch was critical to presenting their service to the novice user in an easy, understandable way.

At the core of the drop.io service is inputs, views and outputs – but their old UI and design strategy didn’t reflect this. Switching views was confusing, output controls and parameters were located in a few different places and their choice of using the color red (to be ironic) was amusing to only a few. Our task was to collectively figure out a UI template that met a few key criteria: input, view and output needed to be clearly defined and the design had to be extensible for co-branding and personalization. We also wanted to target Drop.io For Business (DFB) with a template design and information-page that showed the flexibility of their service for businesses.

The Process
We began by taking their existing logo and “growing it up” a bit. We chose a beautiful and clean typeface (Archer) and chose a simple typeset execution.

Our next task was to nail the header. This was critical because the header is really where the concept of the service is expressed in the navigation of the site. Input, view, output became Add, View & Share. By keeping that functionality hidden but handy we eliminated the need for users to hunt around the site to trigger functionality. The trick was that when the user is browsing their drop, we wanted to keep the maximum possible vertical space for their content. It’s only when the user wants to do something with the drop that we wanted to surface UI controls (while retaining the statefulness of the page).

From there we chose to execute the body elements, the actual content of the drop, in a clean and simple way that clearly separated drop-content from any customization the user might choose to perform and future-proofed the content-display area from any other view paradigms drop.io might choose to implement moving forward. At the forefront of our minds was scanability. We needed the user to quickly scan the page and understand where their drop content was located. Through the use of iconography and a change in type size we were able to accomplish this while adding to the aesthetics of the experience. Lastly, we addressed the home page. Like most of the rest of the strategic planning for this site, the home page had a trick to it we needed to get just right. Unlike most homepages, the drop.io home page was most likely not the first page a user new to the experience would see. This is because users most likely would encounter drop.io in the context of viewing someone else’s drop. And in that scenario, the user would be deposited in the middle of a drop as explained above. So their drop page is really their homepage and their homepage is really their drop-provisioning page. It was in this light that we wanted to streamline the process of beginning to use their service as much as possible. 4 steps vs. 3 steps is a big deal in the web 2.0 world of zero patience. We solved this by defaulting certain settings in a collapsed menu and brought the number of steps a user had to do in order to create a drop down to two. Name it and put files in it. Done.

The Results
Needless to say the project was a success and all sides were thrilled with the results. I encourage you to check out drop.io for yourself.  As I mentioned earlier, this is really an outstanding service that will continue to push the limits of what can be done with file sharing and beyond (geotagging, freedom to upload from many sources, collaborative sharing options, etc.).  Sam Lessin sums it up thusly, “Roundarch did a very nice job learning about our product and our future feature roadmap and then helping us conceptualize some of the design vocabulary necessary to meet our immediate users needs, while still leaving us open to future growth and extensibility.” Agreed.

The Phizzpop Design Challenge will kick off today in Chicago.  Roundarch is one of four teams given three days to strategize, design and build an experiential Web application based on the latest and greatest Microsoft Web technology. While not limited only to the browser, the contestants will primary use Microsoft Silverlight, Microsoft’s next-generation development platform for Rich Internet Applications. They will also be using Microsoft’s new suite of tools for interactive software design and development, Expression Studio.

Mark Ferry, one of Roundarch’s Technical Directors, will lead the 3-person team in a challenge to design an application that applies to Chicago’s bid for the 2016 Olympic Games. No details around the specifics of the challenge have been released, making the event quite exciting (and challenging) for all involved.

The winner of this regional contest will move forward to additional rounds cumulating in the Phizzpop finals which will be held at the SxSW conference in Austin, Texas.

Meet the teams.

In our crusade for the grail of design innovation, nature’s 4.6 billion years of (re) evolutionary design supplies us with the perfect template.

Design innovation isn’t just about having the “big idea” (more about that and the role of research in my next post) – it’s a process, a funnel that produces success equal only to the cumulative failure required to achieve it. Not clear on that? Let mother earth and arguably the most successful innovation of all time, you and me, bring it into focus. You’ll notice there seem to be rules, patterns actually, to producing innovation, and massively successful designs (like homo sapiens and the ubiquitous iPod) have harnessed that power.

Looking at the geological time line starting with the Hadeon Eon (when earth’s crust took form) to the modern day, cycles of creation exemplified by the Cambrian and Permian eras have ushered new life forms into existence only to be followed by periods of mass extinction that have wiped most of them from the face of the planet. Nature has provided us with a compelling template for distilling successful design practices that produce innovation – a powerful suggestion of patterns that make up what we can call the universes’ law of design. It reveals a design funnel and a set of basic guidelines that innovative organizations, like Apple, have embraced as their own.

Bill Buxton’s “Sketching User Experiences” provided a first look at a design funnel. The design funnel that overlays earth’s geological timeline and the creation of man, is essentially an extension of this and surfaces key insights into repeatable innovation design:
1.    Innovation is the product of a refinement funnel – And that funnel starts wide and long, with and explosion of options that flow through cycles of reduction ultimately producing a single point of desirability and viability – the design solution. In a presentation at SXSW, Apple’s chief engineer Michael Lopp, explained how design flows through this funnel (that maps to Apple’s 10 to 3 to 1 design approach). As intense as it my seem, every Apple system feature is born in a set of 10 different detailed designs, all of which are genuinely valid options – not just those mock alternatives design firms typically push out to clients as a smoke screen to show “a lot of work and hard thinking”.
2.    Each cycle is marked by detailed design – This may shock a community that is fully bought into a notion of high level or “conceptual design” where low fidelity sketches/wireframes are the prevailing means of vetting the desired direction. I’m not suggesting here that we get rid of them, only that detailed design is an essential ingredient of the conceptual stage. Very much the same way thousands of actual living organisms, and not just sketches of potential organisms, were needed to make effective evolutionary decisions.
3.    Invest time up front – The era of modern man is only a spec on the grand scale of creation. Nature has clearly spent much more time and resources on the initial stages of design choosing to privileged detail and diversity over efficiency. This is clearly a tension for traditional design work. More often than not we find ourselves rushing through low fidelity conceptual designs to hone in on that one solution we push through to detailed design. Nature’s advice? Always give yourself more time for conceptual design and make sure you get the right amount of detail to support reductive decisions.
4.    The coin for innovation is failure (read: learning) – The same way that explosion of life on earth was followed by extinction (by the end of the Permian era over 50% of all land creatures and 95% of all sea creatures had been wiped out), innovative design is also marked by creative spurts and a selection process that pushes aside the undesirable and unviable. Successful shortcuts are as rare as they are likely to succeed. That means you need to bank on going through the motions – if failing is not an option then you can’t be serious about innovating.
5.    Innovation is expensive – Running the numbers on the resources required to generate thousands of life forms, most of which ultimately discarded by evolution, will show that true innovation has a price tag. The funnel can be long and mistakes need to be made. There is no way to sugar coat it, the bottom line is that real innovation requires resources and commitment. If it’s any solace though, the silver lining is the upside for return on innovative designs is tremendous.

Most user experience professionals learn early on that user centered design (UCD), or some variation thereof, is the go-to approach in the effort to generate usable, useful and joyful designs. I obviously don’t challenge the importance of the user and the need to make sure they are represented through out the design process (although I do admit an over zealous obsession with the end user has the potential to produce myopic design).

But we should consider evolving that approach to one that assumes user representation as a given, and more importantly, borrows from earth’s evolutionary heritage to articulate the design dynamics for achieving repeatable innovation. Call it Innovation Centered Design (ICD) – driving success for both you and your customers.

First, a disclaimer. I’m by no means a political junkie. While I’ve been as captivated by this recent election as anyone, I don’t intend to spark any political debates. When challenged with a political argument, my most likely response is something like “Yeah, maybe, but isn’t Desperate Housewives about to start?”

Photo courtesy of Scout J

That said, there are a few lessons from Barack Obama’s campaign that apply to our world of user experience consulting.

Those of us on Obama’s email list were barraged with messages. One thing every email had in common was a specific mission: get you to do something. It was often to make a donation, but not always. There were invitations to local gatherings, encouragement to contact voters in neighboring swing states, etc. Regardless, it was always obvious and easy to take the next step.

It’s a good strategy to keep in mind in our design work. In any given Web page, email, advertisement, whatever—make it clear what the user is supposed to do next.  If there are too many competing messages, or the call-to-action is somehow camouflaged, we’re making the user work too hard.

There’s no substitute for good graphic design. All of the Obama materials were consistently beautiful throughout the campaign. From the website, to the signage, to the downloadable desktop wallpapers—it all looked great and portrayed a distinctive brand.

I would argue that if you took the names off of almost any other candidate’s collateral, they would be very hard to tell apart. Not so with Obama. They managed to make it feel fresh and contemporary, but still retain the expected “patriotic” color palette. The attention to detail was impressive, down to the electronic tickets emailed to attendees of the Grant Park rally.

The lesson here is clear: work with smart, talented creatives. Involve them from the beginning, and encourage them to be the stewards of the brand throughout the process. This is our approach at Roundarch.

As interesting as the ubiquity of Obama branding was throughout the campaign, was its absence at the election night rally. While Obama supporters had plenty of swag on hand, the stage was devoid of it. The only decoration was a row of American flags. The message to me was, “The sales job is over. Now it’s time to do some work.”

Back to the emails for a minute. When I received an email, it was from “Barack Obama.” The same thing was true with campaign posts on Twitter–they had his name on them. I even got a couple emails from “Michelle Obama.” Now, I’m not naïve enough to think that she sat down and

tapped out an email to me while Malia and Sasha’s chicken nuggets were cooking. However, a communication from a “person” always feels better than one from a vague entity, such as, say “RNC email subscription service.” (OK, I made that up.)

Similar efforts to connect personally with constituents can be found on the Obama website. One of the main navigation items is “People,” which features dedicated content sections for specific audiences, e.g., “Small Business” and “African Americans.” Each group even gets its own clever version of the Obama logo.

In addition, there’s a prominent banner addressing “Hillary Supporters”–clearly reaching out to an audience that needed to be embraced.

How can we emulate this approach? Remember that’s it’s all about people. Be sure to know your audience. It’s impossible to develop a good solution if you don’t know the motivations and context of your site’s users. But it also means that you should get to know your clients. Communication will be smoother and more productive if you understand each others’ perspectives.

Finally, back up your work by “signing” it. Put your name on your documentation. Here’s a free tip–maybe a custom footer that says something like “I’m (insert name) and I approve of this wireframe.”

Throughout the campaign, I was impressed by Barack Obama’s composure. When personal attacks or outlandish statements came his way, he never seemed to get off track. He took a breath, smiled, and responded in a thoughtful manner. It left me with a feeling of trust.

At Roundarch, we value “soft skills” in our consultants as much as hands-on design skills. That means strategizing with a client, building consensus within a group, communicating the pros and cons of multiple options, and in general making smart, confident recommendations. Being able to explain and defend your thought process is critical. You may not always win over the audience, but if you demonstrate preparedness and passion, at the very least you will win respect.

Did you see the election night rally? Chicago is a great city. It has all the big city attractions–business, culture, recreation, physical beauty–and as a bonus the people are generally pretty nice and normal. I’m somewhat biased because I’ve lived here for 35 years, but visitors and transplants I speak with echo the same opinion. Sure, some people complain about the weather. But hey, it was 72 degrees on November 4.

The instructions for this are a little more complicated, so I’ll save it for a future blog post. Oh, make sure your family is awesome too, just in case someone starts poking around.

Roundarch hosted the New York chapter of the Interaction Design Association with an event intended to expose more people to the practice of design studio critique. Roundarch manager Victor Lombardi observed the variety of approaches that emerge when you drop 35 designers into a 60-minute design challenge.

Roundarch had an intranet years ago called Keystone, which evidently, was very slow, unappreciated and under-utilized. I, of course, didn’t experience any of this because I’m kind of new here – a lot of us are. We’re growing. And as the company grows so do our internal knowledge/client management needs. Enter the rebirth of Keystone, our confluence-based intranet.

Like most brand refreshes, we needed a clean slate to convey what keystone is all about: a new brand touch-point to ignite excitement. The challenge here was to create something a little out of the ordinary yet something that embodied what keystone is (part intranet, part wiki, part client presentation tool). The difficulty is that keystone is ever-changing, it’s never the same twice. Content is constantly in a state of flux. So are the users. So we set out to reinforce and promote innovation and creative thinking by thinking a little differently about what the logo should be.

It’s difficult to design the shapes and lines of a logo to visually represent something so ethereal as a digital space for sharing/mixing/provoking work/viewpoints/ideas, so we designed the logo to offer the user a glimpse into the inner workings of keystone. The logo mark itself is a visualization of the real-time activity taking place in each of Roundarch’s Communities of Practice. After all, a wiki without activity or an intranet without files doesn’t have a shape and therefore isn’t alive. But by giving form to these parameters floating in the ether, we were able to ground these concepts in something solid – the logo. Each triangle changes size and shape based on certain input parameters being returned to it from the confluence database. It’s not interactive, but reactive.

By choosing a color palette that is vibrant and on-brand, and assigning a color to each of Roundarch’s Communities of Practice, we developed a system whereby, at a glance, a user can see how active each of keystone’s pillars really are – and by extension – can judge keystone’s overall health by looking at the size, shape and placement of each of the triangles. The logo mark doesn’t just tell the story of health, it’s a visual representation of the mixing and converging of diverse opinions and views. By sharing a common boundary, each shape and each color tells their own story while being self-referential and self-reinforcing – like a round arch.