Personal Key: Site Design

1
Personal Key Site Design
2
Consistent branding Structural branding of the
microsite is similar to other brand initatives
already online Primary Navigation Secondary
Navigation Serves as playhead through the
experience. Content area Maximizes the
available real estate for brand messaging. (blue
for illustration purposes only)
Player controls and Call to Action Placed for
consistency throughout experience
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.
4

• Who uses Personal Key?

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.
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.
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.
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 shes
doing everything to assure her safety online.
9

• Sallys personal key

Sally will serve as an example of how we will
move through the content
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.
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.