Bank of America | March 28th 2007 1

Personal Key: Site Design

Bank of America | March 28th 2007 2

Consistent brandingStructural branding of the microsite is similar to other brand initatives already online

Primary Navigation

Secondary NavigationServes as playhead through the experience.

Content areaMaximizes the available real estate for brand messaging. (blue for illustration purposes only)

Player controls and Call to ActionPlaced for consistency throughout experience

Bank of America | March 28th 2007 3

Introduction (5-10 seconds):

On initial site build, we suggest creating an iconic representation of how Personal Key works. This is by no means a full tutorial in the introduction, but a simple mnemonic that serves to prepare the user for the content to come. A figure rises out of the ground plane and the tools of her everyday life encircle her: phone, computer, and card. We see a random 6 digit code generated and it connects the devices. After a short cycle, the layout of the Personal Key site comes into focus.

Bank of America | March 28th 2007 4

Who uses Personal Key?

Bank of America | March 28th 2007 5

What is personal key: Sam

On rollover, nav illustrates the content subject matter. The content is driven by lifestyle imagery.

Sam is a real estate broker who uses Personal Key to ensure security for high-risk transactions. He uses it to make his clients feel more secure about his business transactions.

Sam prefers to use his cell phone as his primary device.

Bank of America | March 28th 2007 6

How to use Personal Key: Francine

On rollover, nav illustrates the content subject matter. The content is driven by lifestyle imagery.

Sally is a software developer and early adopter. Personal Key gives her peace of mind, whether at work or at home.

She prefers to use the standalone card as her device.

Bank of America | March 28th 2007 7

Extra Security: Matthew

On rollover, nav illustrates the content subject matter. The content is driven by lifestyle imagery. Matthew is a set designer who works with many people at different locations throughout the day. The singe-use password is perfect for him to assure his security, even if he has someone else make a transaction for him.

Bank of America | March 28th 2007 8

How to get started: Sally

On rollover, nav illustrates the content subject matter. The content is driven by lifestyle imagery.

Francine was a little leery about conducting transactions online, but with Personal Key, she knows she’s doing everything to assure her safety online.

Bank of America | March 28th 2007 9

Sally’s personal keySally will serve as an example of how we will move through the content

Bank of America | March 28th 2007 10

Content example: Francine

When the user makes a choice, the secondary nav collapses to form a discrete playerhead. The navigation is always accessible on rollover. At any time, the user can skip ahead using the play head or the player controls at the bottom of the page.

The content area takes advantage of all available real estate. Lifestyle images of Sally follow her throughout her day. When the voiceover is playing, the image slowly pans. The image associated with the content is in sharp focus, and supporting images are slightly blurred. This creates a ground plane for the copy window.

The copy window pulls information from the voiceover and small inset images demonstrate the product. In this example, the card would rotate around the copy window (animation established in the intro/loader) when applicable. When there is a transfer of the 6 digit code, the card rotates out and the computer rotates in, where the code is entered. This keeps the step by step process simple, without having to dominate the visual area.

Bank of America | March 28th 2007 11

Content example: Francine

When the user makes a choice, the secondary nav collapses to form a discrete playerhead. The navigation is always accessible on rollover. At any time, the user can skip ahead using the play head or the player controls at the bottom of the page.

The content area takes advantage of all available real estate. Lifestyle images of Sally follow her throughout her day. When the voiceover is playing, the image slowly pans. The image associated with the content is in sharp focus, and supporting images are slightly blurred. This creates a ground plane for the copy window.

The copy window pulls information from the voiceover and small inset images demonstrate the product. In this example, the card would rotate around the copy window (animation established in the intro/loader) when applicable. When there is a transfer of the 6 digit code, the card rotates out and the computer rotates in, where the code is entered. This keeps the step by step process simple, without having to dominate the visual area.