This document provides user interface recommendations for a watch station website. It discusses navigation elements like headers, menus and breadcrumbs. It recommends layouts for key pages like the home page, brand landing pages, search results and product pages. Specific recommendations are provided for elements on these pages like promotional areas, featured products and guided search filters.

1. Watch
Sta(on
UI
Recommenda(ons
Naviga&on
Masthead
/
Header
•
Drop
Menus
•
Keyword
Search
Input
Size
•
Breadcrumbs
•
Brand
Naviga(on
LeD
Menu
Guided
Search
1
Page
Layouts
Home
Page
Brand
Bou(que
Landing
Page
Lis(ng
Results
Page
•
Results
Browser
•
Quicklook
Product
Detail
Page
Blog
Page

2. UI
Recommenda(ons
2
Masthead
/
Header
Large
Search
Input
–
allows
customers
to
enter
beNer
keyword
searches
Chat
/
Customer
Care
links
–
quick
easy
access
to
customer
care
informa(on
and
online
chat
help
AJAX
Shopping
Bag
–
provides
immediate
feedback
when
adding
items,
shows
latest
addi(ons
in
a
drop
panel
(like
fossil.com)
Drop
menus
in
Top
Naviga&on
–
more
than
just
lists
of
page
(tles,
can
show
photos,
icons
and
more
to
help
customers
navigate
Breadcrumb
Trail
–
customers
always
know
where
they
are
and
how
to
get
back
to
the
page
they
liked

3. UI
Recommenda(ons
3
Home
Page
Large
full
width
promo&onal
space
–
flexible
to
accommodate
sub-­‐layouts
if
desired.
Three
standard
small
promo&onal
spaces
–
also
help
to
funnel
users
down
the
page
•
Shipping
or
Sale
promo(on
•
GiD
Cards
•
Community
or
Social
Callout
–
Can
be
Facebook
or
RedCross
or
both.
Three
SEO
op&mized
content
blocks
•
Trends
–
3
to
5
trend
headlines/photo
and
intro
text
that
link
to
ar(cle
landing
pages.
•
New
Products
-­‐
grid
of
new
products,
visual
indica(on
of
the
products
a
user
will
find
in
the
store.
Each
links
to
a
PDP.
Most
recent
12
addi(ons.
•
Blog
Updates
–
3
to
5
blog
headlines/
photo
and
intro
text
that
link
to
ar(cle
landing
pages.
Featured/Best
Seller
Product
scroller
–
8
to
12
top
selling
or
featured
products
across
all
brands.
4
products
displayed
at
a
(me
with
a
scrollbar
below
to
navigate
leD/right
through
them.

4. UI
Recommenda(ons
4
Brand
LP
The
Brand
Landing
Page
is
the
cornerstone
of
the
Watch
Sta(on
user
experience.
Many
customers
will
start
their
path
to
purchase
here
from
CPC
campaigns
and
natural
search
result
links.
Other
customers
will
arrive
here
from
the
home
page
or
from
brand
LP
links
on
results
lis(ngs
and
PDP
pages.
If
a
customer
is
looking
for
a
brand
specific
product
they
will
see
this
page.
Brand
Promo&onal
Space
•
Large
2/3rds
width
promo(onal
region
•
Can
be
used
for
guided
naviga(on
as
shown
•
Medium
sized
secondary
promo(onal
region
•
Sale
or
Featured
product
or
category
•
Small
mini-­‐site
promo(on
link
–
see
mini-­‐site
UI
Featured
collec&ons
content
region
–
3
to
5
items,
category
or
‘collec(on’
imagery
with
links
-­‐
“shop
Ceramics
>”
Featured/Best
Seller
product
scroller
–
same
func(onality
as
the
home
page
but
brand
filtered.

5. UI
Recommenda(ons
5
Brand
Mini-­‐Modal
A
Mini-­‐Modal
is
a
mini-­‐website
within
a
website
presented
in
an
overlay
window.
The
purpose
of
this
mini-­‐modal
is
to
provide
a
vehicle
for
a
brand
experience
which
does
not
interrupt
the
flow
of
Ecommerce.
A
customer
can
choose
to
open
the
mini-­‐site
and
learn
more
about
a
brand
without
leaving
the
WSI
website
or
naviga(ng
away
from
the
Brand
Bou(que
landing
page.
This
modal
content
would
be
served
on
the
page
but
hidden
off
screen
to
provide
enhanced
SEO
to
the
Brand
LP
itself,
only
being
made
visible
to
a
user
when
the
link
is
clicked
but
available
to
search
bots
during
their
normal
page
indexing.
Content
could
be
commissioned
via
Fossil
or
provided
by
the
Brand
–
as
html,
flash
or
even
pdf.
Content
could
be
sized
to
fit
the
available
window
or
made
for
scrolling.
The
X
buNon
at
top
right
of
the
window
closes
the
window.

6. UI
Recommenda(ons
6
Guided
Search
/
Refinement
Guided
Search
Lis(ng
result
func(onality
is
really
the
brain
of
WSI
(Brand
LPs
are
the
heart).
Key
guided
search
criteria
or
facets
will
be
based
on
Informa(on
Architecture
which
will
be
based
on
merchandising
and
catalog
selec(on.
A
ver(cal
accordion
UI
presenta(on
is
in
considera(on
though
an
open
list
of
op(ons
would
be
preferable.
Segments
such
as
collec(ons
would
poten(ally
only
be
available
once
a
brand
has
been
selected.
A
message
to
“select
a
brand
to
view
available
collec(ons”
would
be
displayed
in
that
area
by
default.
This
scenario
is
being
inves(gated
with
Endeca.
AJAX
would
be
used
to
update
results
lis(ngs
as
well
as
disable
op(ons
within
refinement
to
avoid
zero
result
lis(ngs.
A
standard
page
refresh
would
be
a
fallback
for
SEO
and
Accessibility.
Search
/
IA
Criteria:
•
Gender
•
Brand
•
Style
or
Type
(if
accessories
are
to
be
included)
•
Collec(on
/
Sub-­‐type
•
Price
•
Dial
/
Band
Color
•
Case
/
Band
Material

7. UI
Recommenda(ons
7
Lis&ng
Results
Page
Product
results
pages
are
where
customers
spend
the
majority
of
their
(me
on
any
online
retail
store.
WSI
objec(ves
are
to
provide
the
best
yet
simplest
method
for
customers
to
browse
and
locate
products
they
are
interested
in.
•
Guided
Search
tools
in
leD
column
–
See
Guided
Search
UI
•
3
-­‐
4
products
per
row
–
large
photos
•
Brand
LP
links
above
each
product
•
Product
photo,
name,
price,
ra(ng,
callout
•
Pagina(on
at
top
and
boNom
•
Number
of
items
per
page
•
Sort
order
•
Price,
Newness,
Ra(ng,
Popular
•
Add
to
list
+
Add
to
cart
icon
buNons
•
Browse
results
link
–
see
Product
Browser
UI

8. UI
Recommenda(ons
8
Lis&ng
Results
Browser
A
new
take
on
the
‘quicklook’
UI
feature
found
on
many
retail
websites.
•
not
essen(al
•
further
study
to
validate
conver(ng
to
buying
customers
•
most
func(onality
and
content
of
a
standard
PDP
page
•
does
not
include
cross-­‐sells,
reviews
or
other
addi(onal
resources
•
Full
screen
format
•
Large
zoomable
image
like
PDP
•
“more
informa(on”
link
to
standard
PDP
•
link
to
reviews
on
standard
PDP
•
thumbnail
scroller
showing
currently
displayed
product
and/or
horizontal
scrollbar
to
browse
the
selec(on
or
results
•
AJAX
(no
refresh)
“Add
to
Bag”

9. UI
Recommenda(ons
9
Lis&ng
Results
Quicklook
Tradi(onal
‘quicklook’
func(onality
is
popular
across
many
categories
of
retail
ecommerce
websites.
•
not
essen(al
•
further
study
to
validate
conver(ng
to
buying
customers
•
most
func(onality
of
a
standard
PDP
page
•
does
not
include
cross-­‐sells,
reviews
or
other
addi(onal
resources
•
“more
informa(on”
link
to
standard
PDP
(not
shown
here)
•
link
to
reviews
on
standard
PDP
•
previous/next
product
links
•
AJAX
(no
refresh)
“Add
to
Bag”

10. UI
Recommenda(ons
10
Product
Detail
Page
PDPs
should
provide
the
ul(mate
first
impression,
even
more
than
a
home
page.
This
is
the
first
impression
of
the
product,
rather
than
the
collec(on
or
the
brand
or
the
website.
Key
informa(on
about
the
product
needs
to
be
highly
placed:
•
“Add
to
Bag”
–
most
important,
high
contrast,
large,
high
on
page,
adjacent
to
the
price.
Include
an
“Add
to
wish
list”
or
similar
buNon
in
a
lower
contrast
style
as
a
secondary
CTA.
•
Product
Image
–
large,
mul(ple
views,
zoom-­‐able,
poten(ally
a
full
screen
view
op(on.
•
Price
–
also
large,
somewhat
contrasted
with
surrounding
copy.
Adjacent
to
the
“Add
to
Bag”
buNon
so
that
an
impulse
buy
is
easier
to
make.
•
Ra(ng
star
widget
–
prominent
loca(on
so
that
a
casual
browser
will
see
that
the
product
has
a
high
ra(ng
and
may
take
more
(me
to
review
the
product.
•
Share
links,
let
customers
share
the
product
without
looking
for
this
feature.
•
Quan(ty
–
likely
this
will
be
removed
but
available
during
checkout.
Addi(onal
resources:
•
Descrip(on
and
Details
–
a
tabbed
interface
allows
customers
to
review
more
detail
on
the
product
without
pushing
down
reviews
and
ra(ngs
which
are
equally
as
important.
•
Chat
Now
–
smaller,
less
prominent
than
on
customer
care
pages
but
s(ll
located
in
the
top
right
of
the
page.
•
Recommended
product
cross-­‐sell
in
right
column
•
Full
ra(ngs
and
reviews
below
main
product
informa(on.
•
Product
Guides
–
SEO
“Authority”
and
customer
educa(on

11. UI
Recommenda(ons
11
Product
Detail
Page

12. UI
Recommenda(ons
12
Product
Detail
Page
–
Watch
Size
Guide

13. UI
Recommenda(ons
13
Recommended
Products
Recommended
products
should
take
two
forms,
inside
PDP
and
outside
PDP.
Inside
the
PDP
page
recommended
products
should
be
based
on
data
about
that
product:
“Customers
who
viewed
this
product
also
viewed”
or
“Customers
who
viewed
this
product
ul(mately
purchased”.
•
Each
product
lis(ng
should
include
Brand
LP
link,
price,
product
name,
review/ra(ngs
Implementa(on
could
include
hiding
informa(on
then
revealing
it
on
roll-­‐over.
Significant
issues
surround
this
topic
related
to
brand
posi(oning:
•
Can
mixed
brands
appear
on
a
PDP
or
will
brand
homogeny
be
required?
•
Can
mixed
brands
appear
outside
of
a
PDP
(content
&
blog
pages)
or
will
brand
homogeny
be
required?
The
impact
of
homogeny
is
that
the
recommenda(ons
will
not
be
as
relevant
to
the
customer
and
will
limit
the
effec(veness
of
this
cross-­‐selling
technique.
Some
brands
may
not
have
a
diverse
enough
catalog
for
effec(ve
recommenda(ons.

14. UI
Recommenda(ons
14
Product
Guides
WSI
should
include
as
much
informa(on
about
products
as
possible.
In
addi(on
to
enhancing
the
value
of
the
site
for
customers
in
terms
of
educa(on
about
the
product
there
is
an
immediate
gain
for
SEO.
Both
html
and
pdf
guides
are
recommended.
Addi(onally
a
watch
fit
and
sizing
interac(ve
element
would
provide
a
standout
aNrac(on.

15. UI
Recommenda(ons
15
Blog
Content
A
blog
landing
page
should
display
the
most
recent
5
–
10
posts
(depending
on
average
post
length)
and
having
the
following
features:
•
Archive
of
Posts
by
date
•
Tagged
Posts
using
top
keywords
based
on
analysis
for
SEO.
•
Cross
links
to
other
blogs
to
establish
a
community
rela(onship
with
other
watch
content
outlets.
This
will
encourage
these
more
established
blogs
to
link
to
WSI
when
appropriate
thereby
transferring
their
own
authority
page
rank
to
WSI.
•
Trackbacks,
Facebook
integra(on,
Social
Sharing
of
each
post,
comments
and
ra(ngs.
•
Content
strategy
should
include
re-­‐pos(ng
and
providing
aNribu(on
to
insighsul
ar(cles
published
on
other
blogs,
ideally
with
new
original
content
added
which
is
relevant
to
WSI
directly.

16. Watch
Sta(on
Path
to
Purchase
16
Path
to
Purchase
Home
Entry
Home
=>
Women/Men/Color/Shape
Results
=>
Refine
=>
Refine
=>
PDP
=>
Checkout
Home
=>
Search
=>
Refine
=>
Refine
=>
PDP
=>
Checkout
Home
=>
Brand
LP
=>
Refine
=>
Refine
=>
PDP
=>
Checkout
Brand
Entry
Google
=>
Brand
LP
=>
Featured
Collec(on
Results
=>
Refine
=>
PDP
=>
Checkout
Product
Entry
Google
=>
PDP
=>
Checkout
Trend
Entry
Google
=>
Trend
LP
=>
Trend
Results
=>
Refine
=>
PDP
=>
Checkout
Blog
Entry
Google
=>
Blog
=>
Product
Link
=>
PDP
=>
Checkout

17. Thanks
for
Stopping
By!