IBM Interactive Conceptual Website Design
For many years, IBM has operated a network of “Innovation Centers” at key locations around the globe. These solution centers offer a unique think-tank environment where clients can collaboratively work with experts in user experience and the latest development technologies to plan, develop and launch next-generation business solutions. The stakeholders decided that we needed a more integrated, consistent brand to unify these centers and market our customer experience consulting services more effectively. Our ultimate goal was to compete more strongly against other design and interactive agencies. From this premise, IBM Interactive was born. As a member of this organization, I volunteered to come up with a UI design concept for the website homepage and Flash intro.
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.
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.