We really enjoyed watching the World Cup over lunch here in the Cooper office. The games sparked many conversations about soccer, beloved sporting traditions, and why FIFA is so bloody minded about goal-line technology use (okay, maybe that last one was just from a bitter England fan).

It's also been a time to admire the many new and unusual visualizations used for the tournament brackets, game-by-game breakdowns, and statistical replays. For the fans that wake up in the coming weeks with an empty feeling, perhaps this library of visualizations will provide a glimmer of comfort and distraction until the next tournament. (That is unless you're an England fan.) There are many visualizations to look at here but if I could suggest one to look at closely it would be the Guardian twitter replay. The best of the bunch.

And of course, congratulations to Spain on winning the World Cup!

Game Schedules & Results

The classic visualization for the World Cup is the table breakdown and brackets. For any hardcore fan this is the most exciting visualization where supporters can see their team's road to the final and victory.

MARCA World Cup calendar
One stadium visualization received plenty of attention for it's beautiful form and elegant interaction but, for me, it failed to illustrate the future match-ups. I never could understand the rationale of the order of the teams either.

World Cup radial bracket poster
While just a poster, this visualization gives a very quick glimpse into potential future opponents. It also is beautifully designed with bright colors and typography. Sadly, it isn't interactive.

After years of mumbling excuses about the cobbler's children and how busy we've been, we're thrilled to announce the launch of our new site. It's taken almost a year from our initial design explorations, but we're really happy with where we've ended up.

While its been a very collaborative effort, it's also been refreshing to design without the usual cast of stakeholders. (In order to overcome the well-known nightmare that is a firm designing its own site, we almost completely eliminated creative reviews by anyone not directly involved in the project.)

We think the new site much better reflects our design sensibilities and the direction of the firm. It's still a bit of a work-in-progress. (For one, we plan on adding social bookmarking features in the Journal when we have a moment.) But we're interested to hear your feedback—let us know what you think in the comments section.

Credits

Design by Nick Myers and Dave Cronin, with help from Jayson McCaulliff, Doug LeMoine, Imon Deshmukh, Martina Maleike, and Daniel Kuo. Copy by Dave and Doug, with editorial assistance from Steve Calde and Suzy Thompson. Code by the amazing Elisha Cook and Andrew Hoag at blackdrumm, and photography by the very talented Emily Nathan.

The recently launched MSNBC redesign really grabbed our attention yesterday. While we don't universally love everything about it, we found ourselves playing around with it a bit longer than we would have expected to. Here's a sampling of some of the comments heard around the studio.

Doug LeMoine:
This is a pretty impressive effort toward designing an interaction framework for a massive media conglomerate with a dozen sub-brands, content licensing deals with who knows how many third-parties, and an absolute clustercuss of a styleguide. I’d say that the designers performed capably under this duress, delivering strong mechanisms for staying upright and pointed downhill amidst the avalanche. I like the nifty “upscroll” that reveals an info-rich header (but crikey this particular header has a heckuva lot going on). The “annotated scrollbar” holds the experience together, providing a modicum of navigational predictability across the various content sets. I have a variety of visual critiques, large and small, but overall I’ll high-five MSNBC for not being afraid to spook loyal readers with new ways of interacting with content.

Imon Deshmukh:
Of course it feels strange at first, and I’m not sure if I would have noticed the option to scroll up to uncover content, had nobody mentioned it. My reaction is similar to how I felt when I first saw the new Cooper site [Editors' note: stay tuned for this!]: I’m not sure if it’ll really work, but it’s something I haven’t seen before and it feels more than an attempt to be different just for the sake of it. Even if it doesn’t work out, trying something new and different when everyone is watching is something I can appreciate and admire.

Tim McCoy:
Kudos to MSNBC for abandoning the cluttered, segmented, ad-saturated layouts typical of news websites for a truly content-forward experience. It’s a lot of change to encounter all at once, so the experience is a bit foreign, but I think that will pass with time as readers learn new idioms and the design adjusts to the strains of use. It is an odd hybrid of the information density of a sovereign desktop/iPad app and the long-page scrolling breadth of a web page. And it speaks volumes about how interconnected our content has become that the editors expect to provide every story with some combination of images, videos, interactives, and related articles.

Dave Cronin:
I really appreciate the fact that the MSNBC team tried some daring stuff with their redesign. As with any such effort, some of these innovations will probably turn out to not-so-good, others will turn out to need some tweaking, and if we’re lucky a couple of these ideas will help us all move forward with how we deal with all kinds of information coming from every different direction. I’m really digging the use of the upscroll to access headlines (in a similar vein to where search lives on the iPhone), and I like how far the vertical scroll has been pushed even further as a primary navigation element, as well as the nifty little jump buttons along the scrollbar. The site is certainly not perfect, though. While I can tell there is an underlying grid, it could certainly be stronger—it looks like every vertical layer is on a different horizontal rhythm. And while I know it’s tough to do anything graceful with big display ads, these feel particularly clunky, especially the way they stick with you as you scroll, breaking the vertical orientation of the page a bit.

Congratulations to the litl team for a great showing at the International Design Excellence Awards (IDEA), taking home awards in packaging, hardware and software, the latter of which we're proud to have contributed to. We're thrilled to have been part of such an amazing team and grateful for the recognition from the IDEA panel and litl.

Here's what the judges had to say about the litl user interface:

Designed to remove the barriers between you and web content, it is extremely simple to use and eliminates the clutter and distractions of traditional computer interfaces.

Credits from the litl blog:

Thank you and credit to John Chuang, Aaron Tang, Chris Bambacus, Chris Moody, Havoc Pennington, Eben Eliason and Ron Frank of litl; Daniel Kuo, David Fore, Jenea Hayes and Noah Guyot of Cooper; and Christian Marc Schmidt and Lisa Strausfeld of Pentagram.

I have to admit that I’ve been steering clear of talking about “design thinking” for a while now. A couple years back, when I first heard about what sounded like an exciting new angle on design strategy, I eagerly scoured the web to figure out what it was all about. At Cooper, we’ve always concerned ourselves with challenges beyond skin-deep ornamentation, and we particularly relish working for clients who value the insights that we can bring to their strategic business decisions. I’m interested in anything that gives us leverage to help businesses get beyond the assumptions that stand in the way of truly serving human needs.

So when I set off to learn more, I was a bit disappointed to discover that all the information I could find about “design thinking” appeared to prominently feature the Keeley triangle, some business success stories and not a lot more. (For those that aren’t familiar, Larry Keeley, an OG innovation strategist, devised the triangle as a way of expressing how successful businesses are balanced in the concerns about the desirability, technical feasibility and financial viability of their products.)

The Keeley Triangle. The d-school site appears to have been refreshed in the interim, but if I remember correctly, at one point, the home page featured a marker sketch of this diagram with the words “this is design thinking.”

To be clear, I have no argument with the Keeley triangle. It was part of the foundation of Alan’s arguments in The Inmates are Running the Asylum (Alan Cooper’s 1999 book about the challenges of creating great digital products), and throughout the years I’ve found it to be an incredibly useful device in explaining how design fits with business and technology concerns.

But I guess I feel like defining design thinking by the Keeley triangle alone is like explaining how to fly by stating the laws of physics. In a 1998 HBR article, one of the first articulations of design thinking, Tim Brown defined design thinking as “a discipline that uses the designer’s sensibility and methods to match people’s needs with what is technologically feasible and what a viable business strategy can convert into customer value and market opportunity.” I have very little to disagree with in this, yet I don’t find it particularly useful or interesting. And it really begs at least one big question—what part of “the designer’s sensibility”? The obsession over details? The ability to create incredibly disorganized Photoshop (or Fireworks) files? The propensity to wear black?

All this said, I certainly see promise in the vision and enormously appreciate the work that Brown and IDEO have done to popularize the idea that human-centered design methods are fantastic tools for improving all kinds of things—not just product skins and interfaces, and that businesses can get vastly more value when they ask designers to participate in the product (or service) conception process, rather than to just pretty-up an already-formed idea. So I was really excited when I finally got around to reading Roger Martin’s The Design of Business and discovered a conceptual model that has really helped me understand what part of the designer’s skillset is really useful for this big picture thinking.

Martin refers to this conceptual model as “the knowledge funnel.” The funnel starts with a mystery—for example, how to feed the newly emergent car-centric middle class of 1950s Southern California. Businesses then can create value by moving along the tunnel first to a heuristic, or simple idea about how to solve the mystery—a quick service hamburger stand; then to an algorithm, or the specific operational rules about how to achieve the heuristic—where the hamburger stands should be located, how they should be designed, what the menu should be, how to prepare every item on the menu, and how customers should be served.

Among other things, what emerges in Martin’s model of design thinking is that this “designer’s sensibility” that Brown speaks of is the ability to use an understanding of customers’ needs (as well as technology and business factors) to move inwards and outwards in this funnel by iterating through many different heuristics and algorithms to ultimately imagine and then validate a way of solving this mystery. Intrinsic to this ability is abductive reasoning— making logical leaps to imagine what might be true in the future.

These ideas really resonate with me, but I struggle with the notion that abductive reasoning abilities are unique to designers. Martin is dean at the Rotman School of Management at the University of Toronto, and his audience is largely business people. I understand why he wants to differentiate these sensibilities from the largely analytical skills that dominate modern business education. But when I first read and thought about the idea that abductive reasoning is “design thinking”, I had two reactions: first, this is what I’d thought business people were supposed to be doing all along; and second, I know plenty of designers who aren’t at all interested in or good at abductive reasoning beyond their medium of, for example, interaction design, visual interface design or industrial design.

Ultimately, I have grave concerns if imagining a better future becomes solely the province of designers or design thinkers, a world of business and political leaders will be absolved of their core responsibility—making things better. (Not that I’m suggesting either Brown or Martin propose this; in fact, they both very focused on how non-designers can learn to think like designers.) I also worry that the term “design” will lose relevance for all the other meanings we rely upon it to convey. As Michael Beirut recently put it, “Don't say design, say innovation, and when innovation doesn't work, make sure you saved some of that design stuff, because you're going to need it.”

Given the big challenges we face in terms of the economy, environment and society, I think it’s a great idea that everyone learns more about creatively engaging with mysteries through abductive reasoning. Still,there must be a better term than “design thinking” to describe it. Any ideas?

As more information flows through automotive information systems, the UIs have become ever more complex and confusing. Drivers must sacrifice more and more valuable time and attention to find menus, enter information, and manage the integration of “after-market” devices, e.g. cell phones and MP3 players. Let’s take a fresh look at the layout of the console, and see if there are opportunities to clear up this confusion.

Today: Notice that the console (3) isn’t optimized for either the primary driver vision axis (1), or the passenger (2).

In today’s cars, critical information — status, emergency signaling, speed, fuel, temperature, and RPM gauges — is located in the driver’s primary vision axis, behind the steering wheel. This minimizes the impact on the driver’s attention while driving. Current steering wheel controls often provide physical buttons to control various on-the-fly tasks — signaling, gear changing, cruise control, volume, back/next, take/drop a call — to ensure that the driver keeps his hands on the wheel.

The BMW 7 series HUD

In higher-end cars like the BMW 7 series, head-up displays (HUDs) are becoming standard. HUDs integrate simplified driving instructions, speed limits, and emergency information into the primary vision axis, reducing the need to look down even a couple of degrees. In fact, there’s even an app for this! It's called aSmart HUD.

In more and more cases, the center console offers a multitude of functionality, including the setup of various systems, navigation and entertainment controls. This console delivers a potpourri of content intended for both drivers and passengers, and it's placed directly in between driver and passenger, requiring both to move toward the middle in order to use it. From the driver's point of view, passenger operation of this console can feel like a friend grabbing the mouse from the driver’s hand and taking over. Not pleasant, and potentially the beginning of an argument.

Why not break up the center console platform and re-focus on the two different user types?

Tomorrow? Let's optimize the content for each user.

The driver-oriented UI

Obviously, complex functionality and setup routines should be disabled while the car is moving, but the basics would live within the sphere of the driver. This would begin to make the driving experience more targeted, more functional, and hopefully safer. A platform with an enlarged display such as Ford’s Fusion SmartGauge 3 could supply this added functionality.

For enhanced controls while the car is stopped, the steering wheel could provide tactile “navigate & act” controls, such as multi-touch track pads or even a touchscreen. This would also avoid additional controllers such as Audi’s MMI, BMW’s iDrive or Lexus’s latest Remote Touch.

The passenger-oriented UI

As we’ve already seen with many current cars, passengers already have individual screens available, though these are mostly in the rear seats. Why not place all non-driving specific controls explicitly in the hands of a passenger? This could be a solely touch screen system because the passenger isn’t driving and therefore can focus 100% on input and navigation of the system. You could even take it one step further, and allow the passenger to modify the driver’s view with supplementary information — GPS directions, weather, and so on. This would support and enhance the driver/navigator dynamic, and get away from the current situation, which all too often leads to confusion and conflict.

What do you think?

Here at Cooper, we find that looking at the world from the perspective of people and their goals causes us to notice a lot of bad interactions in our daily lives. We can’t help but pick up a whiteboard marker to scribble out a better idea. We put together "The Drawing Board", a series of narrated sideshows, to showcase some of this thinking.

The best-rated automatic cat feeder on Amazon has some serious interaction design problems, risking both well-fed cats and confident owners. In this Drawing Board, Cooper designers turn their attentions to the machines that take care of our four-footed friends.

Credits: Chris Noessel and Stefan Klocek.

On a recent research trip I stayed at the Holiday Inn in downtown Fresno, CA. The hotel was unremarkably average — clean and functional, if a little worn around the edges (a little like Fresno itself). There was one thing that struck me as unique — the elevators; specifically, their buttons. I've been in quite a few elevators over the years, but this was a first for me. The elevators had 4 buttons to control the doors: Two to close and two to open the doors.

One guess is that this arrangement was the result of a mistake, extra holes were filled with extra buttons for an expedient solution.

But, I prefer to think that this arrangement was the result of a heated argument about the iconography of the buttons — one person preferred the versions with a central line, the other held their ground that the non-lined versions were clearer. After weeks of argument, they broke the stalemate with this solution, "Let the user decide!" As a user in this circumstance, I can only say "Ouch!" Trying to keep the door open for someone approaching was a painful experience, and don't get me started on the PB, PG & 2R buttons.

What do you all think? How did this happen? And have you seen examples of elevator madness? (If you have pictures, send them to me, and I'll collect the best in a follow-up post.)

(This was originally published on Playwell, Alan's personal blog.)

Elisabeth Hendrickson has recently opened a new test-and-development training facility in Pleasanton CA called Agilistry. It’s bright and airy, well-lit and well-stocked, and it feels like home the minute you walk in. In order to publicize her new facility, she very generously hosted a week-long intensive learning exercise.

She invited eleven different people with widely varied skill sets, backgrounds, and interests. She challenged them to build a website in five days using the best practices of interaction design, agile programming, and test-driven-development. We christened it “AgileUpToHere” (#au2h) and it exceeded everyone’s expectations (you can see our results here).

Since it was my 15-year-old homophone web site that was being rebuilt, I nominally played the role of product owner, but I was an observer, an instigator, a goad, and a participant. It’s hard to remember when I had so much fun or learned so much. If you want to learn to be great, I strongly recommend Elisabeth and Agilistry.

Things I learned:

1. After 25 years, it’s time to lose the Windows computer and get a Mac.


2. Good agile developers are self confident; confident enough to trust interaction designers to do interaction design without distrustful oversight.


3. There are lots of programmers who understand that relational databases are not the only approach to solving problems.


4. It is time to build software.


5. Test-driven-development isn’t fully understood. In fact, software testing isn’t fully understood.


6. When even the leanest developer in the room sees really high quality BDUF (big design up front) for the first time, they get all woo-woo and want some for themselves.


7. Getting good software built demands the contributions of many different personalities, competencies, and roles, most of which are new and as-yet ill-defined.


8. Two programmers pairing can create more and better code in less time than one programmer can (I already knew this, but it’s always good to see it in action).


9. Even this jaded old fart can still get excited about changing the world.


10. There are many undiscovered and unfilled product niches on the Web, and one of them is “quality”.


11. People want a leader with a vision.


12. Elisabeth Hendrickson (@testobsessed) is a magical woman. To paraphrase Tom Robbins, “she’s been around the world eight times and met everybody twice.” Like a great chef or symphony conductor, Elisabeth knows how to combine the unexpected to create the sublime. She brought together a dozen people from all over the country, each with different skills, background, desires, and expectations, and then she blended them together into a cohesive, happy, effective team.


13. The pre-written code I arrived with was called “legacy” with a grimace, and was quarantined until discarded. Moral: Non-TDD (test-driven development) code is properly regarded like a ticking time bomb.


14. For interaction design, you can’t have too many white boards, made from porcelain-coated steel, firmly mounted to the wall. For agile development, that isn’t such a big deal.


15. Story-mapping is a major component of the bridge between interaction design and agile development.


16. Story-tracking software isn’t quite there yet.