The Project Story

Gathering Stakeholder Requirements and Sketching Alternative Design Concepts

We begin by combing through some of the proposed marketing materials and vision presentation slides in order to come up with some conceptual ideas that would fit well with the message that the stakeholders were trying to get across to our clients with this new brand. We sketched several alternatives on paper, attempting to portray the tight integration and collaboration of our various global centers, our geographically distributed professionals, and our mutually defined service offerings.

The Winning Concept

We ultimately came up with a celestial, “one-universe” theme for the homepage. The site would initially show the Earth with an empty, starry sky above.

Storyboards for Opening Animation Sequence

I used storyboards to communicate the progression and sequence of animation events in the Flash intro. First, one firework launches from a center location on the global map (e.g. Boston). The firework explodes and as the sparks fall and settle, they morph into the name of one of IBM Interactive’s capabilities, such as “Visioning”. A large, purple star is left “burned” into the sky where the firework exploded.

After the first two explosions, the rest of the fireworks launch at the same time, simultaneously forming the rest of the “constellation of capabilities”. One final firework launches and the whole window flashes white, momentarily inverting the image colors, and then ultimately leaving behind a large, glowing, orange sun in the middle of the constellation of capabilities. At the same time, an “IBM INTERACTIVE” logo slowly fades into view and finally a thin orange line stretches horizontally across the sky, underneath the logo.

Homepage Design

In the final sequence, a list of Innovation Center locations scrolls up from the bottom left and finally the sun sends out an orange searchlight (movie-projection-style beam) that opens up and expands vertically into a long rectangular bubble on which all of the service offerings are listed in a hyperlinked menu. Rolling over a “capability star” triggers the appearance of pulsing sonar rings around the star, while the label enlarges and becomes orange-colored. Clicking on the star causes a purple searchlight beam to project from the star and expand into a bubble, revealing more information about that capability.