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  

       

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  

 

 

 

 

 

 

 

 

 

       

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.  

 

 

 

 

 

 

 

       

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.  

 

 

 

 

 

 

 

 

       

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.    

 

 

 

 

 

 

       

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  

 

 

 

 

 

 

       

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    

 

 

 

 

 

 

       

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”    

 

 

 

 

 

       

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”    

 

 

 

 

 

       

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    

 

 

       

UI  Recommenda(ons  

11  

Product  Detail  Page    

       

UI  Recommenda(ons  

12  

Product  Detail  Page  –  Watch  Size  Guide    

       

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.  

 

 

 

       

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.  

       

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.  

 

 

 

 

       

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  

 

       

Thanks  for  Stopping  By!