www.pixelpunk.com  

Moving  Minds  &  Moving  Code  Understanding,  Exploring  and  

Defining  SMB  Website  Requirements  

PRESENTED  BY  MICHAEL  JOHNSON  

www.pixelpunk.com  

A  Li@le  About  Me  •  I  design,  code,  and  market  websites  that  are  simple  and  

elegant,  with  a  focus  on  the  user  experience  

•  Providing  a  posiLve  return  on  my  clients’  online  markeLng  investment  is  key  

•  I  began  my  career  in  AdverLsing  and  MarkeLng,  and  then…  –  Art  Director  and  PublicaLon  Designer  –  Web  Designer  and  Online  Marketer  

–  Product  Manager  /  Web-­‐Based  SoSware  as  a  Service  

–  One-­‐Man  Show  @  PixelPunk  CreaLve  

www.pixelpunk.com  

Philosophy  •  Understand  the  problem  

–  Understand  the  organizaLon’s  industry  and  audience  –  Understand  the  organizaLon’s  core  goals  and  objecLves.  –  EvaluaLng  project  needs  and  establishing  a  strategy  for  execuLon  –  Define  and  measure  the  success  of  the  project    

•  Recognize  that  visitors  are  on  a  mission  –  Help  customers  on  their  mission,  design  for  usability  

•  Plan  for  the  future  –  Knowing  what  needs  to  be  taken  into  account  for  future  growth  –  Design  for  extensibility  so  that  the  site  can  grow  with  changing  client  needs  

www.pixelpunk.com  

MarkeLng  Department's  Role  (Small  Business)    •  SomeLmes  limited  to  simple  “look-­‐and-­‐feel”  decisions  and  

the  “policing”  of  current  brand  guidelines  –  (Insert  Lred  and  overused  “LipsLck-­‐on-­‐a-­‐pig”  analogy  here.)  

•  Under  pressure  to  “own”  the  Website  and  are  held  accountable  for  performance  but  may  not  know  what  quesLons  to  ask  or  what  features  to  implement  –  “What  do  you  mean  we  can’t  make  updates?”  –  “What  do  you  mean  we  can’t  test  new  markeLng  tacLcs?”  –  “What  do  you  mean,  ‘it  will  take  weeks’  to  make  this  simple  change?”  –  “Is  our  site  opLmized?”  

www.pixelpunk.com  

Requirements    •  A  requirement  is  defined  as  a  condiLon  or  capability  that  

must  be  met  or  fulfilled  by  a  system  to  saLsfy  a  contract,  standard,  specificaLon,  or  other  formally  imposed  documents  (IEEE  Standard  610.12-­‐1990).  

•  MarkeLng  Requirements  –  Express/Predict  the  customer's  wants  and  needs  for  the  product  or  service  –  Requires  soSer  skills,  analysis  –  Access  to  data  and  the  ability  to  quickly  test  and  adjust  to  market  changes  

•  FuncLonal  Requirements  –  More  tradiLonal  occupaLonal  skills  (wireframes,  documentaLon,  etc.)  

www.pixelpunk.com  

Current  Performance  /  FoundaLonal  Metrics  •  Current  analyLcs  data  

–  What  are  the  current  strengths  and  weaknesses  based  on  data  we  already  have  access  to?    

–  Fix  what’s  broken,  but  don’t  break  what’s  currently  working.  e.g.  Don’t  break  current  SEO  and  referring  sources  of  traffic  (301  redirects).  

–  (Insert  the  Lred  and  overused,  “throw-­‐out-­‐the-­‐baby-­‐with-­‐the-­‐bathwater”  idiomaLc  expression  here.)  

•  Sales  /  Lead-­‐Conversion  Results  –  Are  there  clear  goals  and  points  of  conversion?  Is  it  working?  

•  Install  Crazy  Egg  “Heat  Mapping”  SoSware  –  Visually  understand  user  behavior.  Visualize  the  user  experience.  

www.pixelpunk.com  

Crazy  Egg  Quickly  see  how  people  are  actually  using  your  site.  Invest  5  minutes  for  instant  customer  insight.  

www.pixelpunk.com  

Google  AnalyLcs  Site  Overlay  

www.pixelpunk.com  

Google  AnalyLcs  Provides  insight  into  your  current  website  traffic  and  markeLng  effecLveness.  

www.pixelpunk.com  

•  Install  Google’s  Webmaster  Tools  –  Site  VerificaLon  –  DiagnosLcs  –  Crawl  Stats  –  Site  Maps  

www.pixelpunk.com  

My  Process  •  CompeLLve  Analysis  and  Research  

•  Usability  Review/Analysis  •  CreaLve  ExploraLon  &  Design  Development  

•  ProducLon  Management  &  ImplementaLon  

•  Search  Engine  OpLmizaLon  

•  Outcome  EvaluaLon    

www.pixelpunk.com  

CompeLLve  Analysis  &  Research    •  Great  design  starts  by  understanding  the  problem  

•  Basic  analysis  of  the  current  business  landscape    •  Understand  the  demographic  

–  Get  into  their  heads.  Create  personas.  What  would  “Jane”  do?  

–  Design  a  site  for  “Bob”  and  “Jane”  and  people  like  them,  and  not  your  CEO.  

•  Analyze  compeLtor’s  relaLve  strengths  and  weaknesses  –  Compile  a  “wish-­‐list”.  E.g.  “If  we  had  a  million  dollars,  we’d  like  to….”  

–  It  doesn't  all  have  to  be  done  at  once…you  just  have  to  plan  for  it.  

www.pixelpunk.com  

Usability  Review/Analysis    •  Analyze  navigaLonal  schemes  and  link  structures  

–  A  user-­‐centered  approach  which  translate  users’  navigaLonal  requirements  into  system  representaLons  

•  Ease  of  use  is  vital  to  success  –  The  goal  is  increased  user  producLvity  

•  Sepng  and  meeLng  user  expectaLons  –  Users  are  on  a  mission    

•  “Don’t  Make  Me  Think”  –Steve  Krug  –  Usability  tesLng  on  10  cents  a  day  

www.pixelpunk.com  

CreaLve  ExploraLon  •  Begins  the  problem  solving  process  

•  Start  developing  ideas  to  visually  express  the  core  message  

•  What’s  the  “big”  idea?    

•  Pixel-­‐perfect  Prototypes  (The  Apple  Method)    

•  Refine.  Rinse,  wash,  repeat.  Complete.  

www.pixelpunk.com  

Prototype  Example  

•  Pixel-­‐Perfect  

•  Photoshop  Layers  for  easy  manipulaLon  

•  Client-­‐owned  

•  WYSIWYG  

www.pixelpunk.com  

ProducLon  &  ImplementaLon    •  Execute  on  the  final  design  

–  Approved  prototype  is  turned  into  a  fully  funcLonal  website  

•  XHTML  /  JavaScript  /  CSS  –  Separate  structure  from  design  

•  Search  Engine  OpLmizaLon  –  Based  on  compeLLve  analysis  data  

•  Browser  TesLng  –  Firefox  3+,  Safari  4+,  Internet  Explorer  7+  on  PC,  Mac,  SmartPhones  

www.pixelpunk.com  

New  Standards  For  Coding  Web  Sites  •  XHTML  (1.0  TransiLonal  is  okay)  /  JavaScript  /  CSS  

•  Separate  Style  From  Structure  –  www.cssZenGarden.com  

–  Easier  to  Maintain  –  Extensible  for  Future  Upgrades  

•  Accessible  to  those  with  DisabiliLes  •  OpLmized  for  Search  Engines  

•  Designed  for  Mobile  Devices  w/o  Massive  Code  Re-­‐Write  

www.pixelpunk.com  

Search  Engine  OpLmizaLon  •  Keyword  PosiLoning  

–  Keyword  discovery  from  the  compeLLve  analysis  –  Google  Keyword  SuggesLon  Tool  –  Google  Traffic  EsLmator  

•  InformaLon  Architecture  –  Intelligent  internal  linking  schemes  –  “Themed”  pages  

•  Page  Architecture  –  Make  it  easy  for  the  Search  Engine  spiders  to  crawl  and  understand  the  

importance  of  each  page.  

www.pixelpunk.com  

Google  Keyword  SuggesLon  Tool  

•  CompeLLon  

•  Monthly  Searches  

•  Local  Searches  

www.pixelpunk.com  

Search  Engine  OpLmizaLon  (conLnued)  •  TacLcal  On-­‐Site  OpLmizaLon  

–  Title  Tag  Syntax  and  OpLmizaLon,  Canonical  URL/301  Redirect  Issues,  Page  File  Size,  META  DescripLons,  URL  Parameter  LimitaLons,  URL  Depth,  Heading  Tags,  Hyperlink  opLmizaLon,  ALT  Tag  Requirements,  Strong/Emphasis  Usage,  Internal  Linking  Strategies,  Keyword  Density  and  Placement    

•  Off-­‐Site  OpLmizaLon  –  Inbound  links  determine  value  of  site  and  count  as  a  “vote”  for  that  site.  

–  Links  are  hard  to  get  

–  Start  with  relevant  directories,  local  community  sites,  trade  organizaLons,  local  professional  networks  

–  Offer  compelling  content  worth  linking  to  

www.pixelpunk.com  

Monopolize  Google  Search  Results  •  Organic  Search  Results  

–  Website  design  for  search  engine  visibility  

•  GoogleBase  –  Design  Web  to  conform  with  GoogleBase  rules  and  provide  monthly  feeds  

•  Pay-­‐Per-­‐Click  –  Use  PPC  adverLsing  for  highly  themed  targeted  ads  that  land  to  relevant  landing  

pages.  

•  PLUS  Box  (beta)  –  Take  advantage  of  new  “Plus  Box”  feature.  

•  Local  Search  

www.pixelpunk.com  

•  SERP  Anatomy  –  Plus  Box  –  PPC  –  Organic  –  Google  Base  –  Local  

www.pixelpunk.com  

Outcome  EvaluaLon  •  How’d  I  do?  •  Measure  audience  response  

•  What’s  next?  How  do  we  move  the  needle?  

www.pixelpunk.com  

Some  Basic  FuncLonal  Requirements  (…that  the  MarkeCng  Department  someCmes  forgets  to  ask  about)  

•  Header  and  footer  “Includes”  –  For  analyLcs,  conversion  code,  and  other  markeLng  tools  (e.g.  Crazy  Egg).  

•  XHTML  1.0  TransiLonal  Code  –  Make  sure  it  validates  –  Add  a  couple  of  empty  <DIV>  in  case  you  want  to  add  something  later  

•  Content  Management  System  –  Avoid  proprietary  systems  -­‐  Adobe  Contribute  is  powerful  and  simple  

www.pixelpunk.com  

Some  Basic  MarkeLng  Requirements  (or  “capabiliLes”)  

•  Current  Performance  Analysis  

•  CompeLLve  Analysis  

•  Usability  Review/Design  with  the  User  in  Mind  

•  Have  Some  Tools  in  Place  –  CrazyEgg,  AnalyLcs,  Webmaster  Tools  

•  Newsle@ers  and  Email  MarkeLng    –  Access  to  FTP  and/or  network  access  

•  Forms  and  Lead-­‐GeneraLon  –  “Freeform”  lead-­‐gen  form  creaLon  w/o  relying  on  technical  staff  

www.pixelpunk.com  

Thanks  For  Listening!    •  Any  quesLons?  

www.pixelpunk.com  

Links  •  Google  Keyword  SuggesLon  Tool  

–  adwords.google.com/select/KeywordToolExternal  

•  Google  Traffic  EsLmator  –  adwords.google.com/select/TrafficEsLmatorSandbox  

•  Crazy  Egg  –  www.CrazyEgg.com  

•  Google  AnalyLcs  –  www.google.com/analyLcs/  

•  Google  Webmaster  Tools  –  www.google.com/webmasters/tools/  

•  CSS  Zen  Garden  –  www.csszengarden.com