Contents

Chapter Description

CNNSI had three goals for a minisite running in the weeks before the 2002 Winter Olympics: to gather names for a sweepstakes, to make sure the Olympics audience knew about Bud Greenspan, and to let users vote for their favorite all-time Winter Olympians. Thoughtbubble Productions used Flash to accomplish all those activities in a single page.

From the Book

Sports broadcasters CNNSI (Cable News NetworkSports Illustrated)
teamed with sponsor General Motors (GM) to offer an Olympicsflavored sweepstakes
in the days leading up to the 2002 Winter Olympics in Salt Lake City. Visitors
to a special Web site could register to win a trip to the 2004 Summer Olympics
in Athens, Greece. At the same time, they could participate in another
GM-sponsored promotion: the naming of the ten greatest Winter Olympians of all
time, as determined by Bud Greenspan, a sports historian and documentarian who
would announce his own top ten at the Olympic games.

The site's first screen (which Thoughtbubble
calls the "prologue") sets the scene. Here, visitors are introduced to
Bud Greenspan and told about the two activities on the site: entering the
sweepstakes and voting for their top ten Winter Olympians.

For Thoughtbubble, the challenge was how to bring the site's separate
goals together into a coherent presentation. "'Sign up here to win a
trip' doesn't tell a great story," says Jonathan Heck,
Thoughtbubble's chief development officer and co-founder. "We made a
case to our client that they had a significant opportunity here to capitalize on
their relationship with the visitors to the site."

The resulting site did indeed gather names for its sponsors, but that
wasn't the main event. Instead, visitors were drawn into the electronic
equivalent of a coffee-table book on historic Winter Olympians, with an added
interactive element: They could register their opinions about the athletes by
voting for their own top ten.

A Complex Task

When Thoughtbubble analyzed the task before it, the company found that the
site needed to accomplish three distinct jobs: It needed to introduce Bud
Greenspan and draw an audience to his announcement of his own top ten Winter
Olympians. It needed to let users vote for their own top ten choices. And it
needed to promote the sweepstakes. The trick would be to meet these goals in a
way that wouldn't be confusing to the site's users.

As the introduction loads, a screen advises users
that audio is on the way. "It was a way of letting people know how to get
the most of what's coming up," says Dave Carroll, Thoughtbubble's
director of multimedia. Even users without sound get the information, though,
thanks to the text of Greenspan's narration that is displayed over the
photos.

"It was a complicated scenario in that users voted for their top ten
and then Bud Greenspan had his own top ten. And there wasn't a direct
relationship between voting on your own favorites and being concerned with Bud
Greenspan's," explains Dave Carroll, Thoughtbubble's director of
multimedia.

The twofold answer to the problem hinged on carefully layering information as
the user enters the site, and meticulously planning the layout and interactivity
of the site's main screen.

One, Two, Three

Entry to the minisite was carefully paced. Most visitors would arrive from a
banner ad promoting the sweepstakes. When they clicked the banner, the site
would pop up in a new window that contained the prologuea page introducing
Greenspan and the chance to cast your vote for the top ten athletes, in addition
to entering the sweepstakes. "The prologue was a way of forcing people to
find out about the complexity," says Carroll.

When you click Enter the Site from the prologue, a montage featuring
Greenspan's voice and stylized scenes from past Olympics fills the same
screen. The images, accented by falling snowflakes along with Greenspan's
nostalgic narration, create a somewhat elegiac mood. Here's where the site
begins to build a relationship with its visitorswith all the emotional
capital of the Olympics brought to bear. When the montage ends, the screen fades
away, to be replaced by the interaction screen, on which all of the promised
activities take place.

"The introduction presents Bud Greenspan as the authority on Olympian
biographies," explains Heck. "His name carries a lot of currency in
the sports world and in the documentary world."

Focus on the Athletes

Once you've arrived at the main screen, the site homes in on individual
athletes. After a short load time, two photos and a text block featuring one of
24 preselected athletes slide into the center of the screen.

The Thoughtbubble team admits that the focus on the athletes rather than the
sweepstakes was a bit controversial. (An invitation to enter the sweepstakes
appears at the top right of the screen.) In the first layouts, where the call to
enter was at the bottom of the screen, the client objected that it needed to be
more prominent. In the end, though, everyone was happy with the result, with the
sweepstakes text in the top-right corner. "We made the font a little
brighter and a little larger, but we didn't want the first thing in your
face to be 'Give us your information,'" says Kevin Cavallaro,
Thoughtbubble's art director and lead designer. "We felt that the more
we give the user something to engage in, the more they'll look for."
And, the team reasoned, visitors would already be on the lookout for the entry
information, since they got to the site by clicking an ad promoting the
sweepstakes.

On the main screen, the information comes into view
dynamically, focusing the visitor's attention on one item at a time. First,
photos of the athlete slide in (top and middle), then the
athlete's story appears (bottom).

The presentation is elegant and efficient. Two photos of the athletea
longer shot, of the athlete in action, and a close-up, in reposethen a
short text biography move from right to left in layers, offering a full view of
each photo before it is overlaid by the next piece of information.

By using time and space thoughtfully, the studio achieved all three site
goals without causing confusion. The two screens that introduce the site let the
visitor understand what's going on without getting in the way of the main
action. The layout of the main action screen reflects the designers' view
of what's most important (the athletes). The dynamic presentation of the
key information there (skillfully paced introduction of photos and text,
followed by instructions on how to use the page) lands the visitor softly in
what might otherwise be a confusing landscape.

Managing the Assets

Marc Goldleaf, the project's producer, laughed ruefully when I
complimented the team on the effectiveness and economy of showing each athlete
in long-shot and close-up views. "I lost that battle," he says,
explaining that Cavallaro felt strongly about having multiple photos of each
athlete, but that he resisted, thinking of the complicated task of managing all
the photos. "We were working with assets from 50 years ago, and a limited
number of images were available," Goldleaf explains. And once the images
were found, they needed to be approved by the surviving athletes, GM, CNN, and
the athletes' national Olympic Committees.

Finding, getting permission to use, and then giving a
coherent look to photos that ranged in quality and over 50 years of styles
called for careful art direction and Photoshop work.

The work didn't end when the images were finally authorized. "It
was a lot of work making them look the way they do," says Cavallaro.
"There aren't a lot of images there that don't have at least an
hour of art direction involved."

To give the imagesranging over 50 years of styles and qualitya
clean and coordinated look, the team had to change the photos' backgrounds
and airbrush out competing logos, "even entire people," Goldleaf says.
Thoughtbubble had to collect releases from everyone in an imageor from
their estates, if they were no longer alive. If releases weren't available,
that person had to go.

Dynamic Exposition

After the bio and images are in place, text begins to appear below the photo.
Under the title "Vote for Your Top 10 Athletes" are just two lines of
instructions: "Roll over colored rectangles to browse through athletes.
Click to view. Drag and drop the athlete's color rectangle into an open
slot below to vote."

A Flash animation that types the instruction text one letter at a time is a
simple but effective way of drawing eyes to what would otherwise be just another
block of text. "In writing classes, they always say you need to make your
exposition dramatic," laughs Heck. Flash makes it possible to do that,
literally.

Carroll says he got the idea for typing out the text from futuristic screen
interfaces portrayed in films like 2001: A Space Odyssey. "The
screens in those films look eerily like Flash interfaces," he notes.
However, Carroll says, screen interfaces in films are typically a lot more
active than those on our own computers. "In movies, it has to be
engaging," he says.

Managing the Vote

Thoughtbubble put a lot of thought into the deceptively simple voting
process.

The need to present a level playing field for the athletes resulted in a
number of decisions. For one, the first athlete name you see changes each time
the site is loaded. Carroll created a RandomAthlete function to select
a number between 1 and 24 and an ActionScript LoadMovieNum function to
load the correspondingly numbered athlete's movie.

The need for parity also legislated the horizontal layout of the tiles that
represent each athlete, as well as the use of rollovers to show the
athletes' names. "Putting crucial information in a rollover is
generally risky," says Carroll, because users may simply never see it.
Here, though, the designers found it the only way to avoid a stacked layout that
gave precedence of position to one athlete or another. In the horizontal layout,
the tiles are organized alphabetically by last name, but users won't
necessarily scroll through the names from the beginning; they're just as
likely to choose an interestingly colored tile or one next to the current
tile.

Colored tiles represent each athlete. The currently
chosen one is indicated by a dot on his or her tile (top). Rolling over other
tiles displays the name of the athlete represented by each one. Clicking a tile
calls up that athlete's info. Users vote by dragging an athlete's tile
into position in the voting bar. When all ten slots are filled, the Submit Vote
button is activated (middle). When Submit Vote is clicked, the text changes to a
label, Submitted Vote (bottom), and a list of the current popular vote standings
is displayed, along with another call to enter the sweepstakes (right).

"We had the intuition that drag and drop was the way to go for the
voting," says Cavallaroan intuition that was confirmed as the team
designed the implementation. In the final design, you drag the athlete's
tile into one of ten voting slots to create your personal top ten.

"There were a lot of nice things that happened by accident," says
Carroll. Because each tile is positioned on the stage dynamically with
ActionScript, and each is assigned the properties of the athlete it represents,
the chip's behavior is the same whether it sits in the navigation lineup or
in the voting slots. You can still click them to call up the athlete's
information, or drag them out again into the roster in the same way you dragged
them in. (The tile snaps back to its original position in the line.)

The Thoughtbubble team says that all the comps it showed included some
version of drag and drop. "One design had you drag the photo into a ballot
box," says Cavallaro. "It took the idea really literally."

"When we were putting together the drag-and-drop interface, we were
concerned whether people were going to get it," says multimedia designer
Paul Gomez. The typed instructions were designed to make the interface clear.
But he also points out that you can get a lot out of the site without even
getting to the voting. Carroll agrees: "We wanted to introduce
next-generation interactivity but not make it necessary for using the
site."

Hidden Significance

Heck believes that the design of the voting system owes its success to the
way it mimics users' thought processes. "What we're asking the
users to do here is somewhat complex," he says. "Consider 24 possible
choices, evaluate the individual merits of each, and then keep all those facts
and opinions in their heads long enough to choose their ten favorites."

The tiles, he says, serve as useful aides-memoire. "Each colored
tile represents everything the user knows about the individual athlete, whether
learned from the site or from previous experience," he explains. The voting
mechanism allows the users to organize each of those individual ideas, compare
them, group them, and sort them. It's a process, he says, "that mimics
the countless cognitive evaluations and comparisons that go into every decision
we make." Users are able to reevaluate and reconsider their choices by
rearranging the tiles as much as they want before committing to a final vote.
The information about each athlete remains associated with its tile no matter
how the user organizes it, just as a host of associated information and ideas
connects to an item.