Moving Minds and Moving Code - Understanding, Exploring and Defining SMB Website Requirements - May 2010

877 views

Published on

Believe it or not, understanding, exploring and defining website requirements for a small business website is often quite a bit more challenging than defining those of a large enterprise-level corporation. For one thing, an SMB Marketing Department is smaller; usually a department of one, and that manager's time and resources are usually already stretched to the limit. Also, different aspects of the project may have to be outsourced to different vendors, leading to additional obstacles and complications. Couple that with the fact that the project budget is in the thousands of dollars instead of the 10's or 100's of thousands and the challenges to "do more with less" becomes even more apparent.

This session will provide an overview of Michael Johnson's requirements process and design methodology at Pixelpunk Creative for building small business websites that are manageable, extensible and most importantly, provide a positive return on your marketing investment.

You don't need an army of account managers, project managers, product developers, usability experts and engineers (along with the associated price tags) to create a successful and profitable website - Michael will show you how.

Michael Johnson, is an award winning art director, web designer and internet marketing strategist with over 10 years of commercial online experience and with over 20 years of marketing and advertising experience. As the principal of Pixelpunk Creative, he designs, codes and markets websites that are simple and elegant, with a focus on the user experience, while providing a positive return on his client's online marketing investment. Michael is a long time member of the Ontario County Arts Council and is also an active member of the Rochester Advertising Federation. He was also invited by the Rochester Business Journal to judge this year's "best of the Web" competition.

This presentation was delivered at the 13 May 2010 IIBA Rochester NY Chapter meeting.

Published in: Business
1 Comment
1 Like
Statistics
Notes
  • Hello my dear
    I am Modester by name good day. i just went to your profile this time true this site (www.slideshare.net) and i got your detail and your explanation in fact the way you explain your self shows me that you are innocent and maturity and also understand person i decided to have a contact with you so that we can explain to our self each other because God great everyone to make a friend with each other and from that we know that we are from thism planet God great for us ok my dear please try and reach me through my email address (modester4life4@yahoo.com) so that i can send you my picture true your reply we can know each other ok have a nice day and God bless you yours Modester
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
877
On SlideShare
0
From Embeds
0
Number of Embeds
64
Actions
Shares
0
Downloads
16
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Moving Minds and Moving Code - Understanding, Exploring and Defining SMB Website Requirements - May 2010

  1. 1. Moving  Minds  &  Moving  Code   Understanding,  Exploring  and   Defining  SMB  Website  Requirements   PRESENTED  BY  MICHAEL  JOHNSON   www.pixelpunk.com  
  2. 2. 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  
  3. 3. 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  
  4. 4. 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  
  5. 5. 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  
  6. 6. 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  
  7. 7. Crazy  Egg   Quickly  see  how  people  are  actually  using  your  site.  Invest  5  minutes  for  instant  customer  insight.   www.pixelpunk.com  
  8. 8. Google   AnalyLcs   Site  Overlay   www.pixelpunk.com  
  9. 9. Google  AnalyLcs   Provides  insight  into  your  current  website  traffic  and  markeLng  effecLveness.   www.pixelpunk.com  
  10. 10. •  Install  Google’s   Webmaster  Tools   –  Site  VerificaLon   –  DiagnosLcs   –  Crawl  Stats   –  Site  Maps   www.pixelpunk.com  
  11. 11. My  Process   •  CompeLLve  Analysis  and  Research   •  Usability  Review/Analysis   •  CreaLve  ExploraLon  &  Design  Development   •  ProducLon  Management  &  ImplementaLon   •  Search  Engine  OpLmizaLon   •  Outcome  EvaluaLon     www.pixelpunk.com  
  12. 12. 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  
  13. 13. 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  
  14. 14. 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  
  15. 15. Prototype  Example   •  Pixel-­‐Perfect   •  Photoshop  Layers  for   easy  manipulaLon   •  Client-­‐owned   •  WYSIWYG   www.pixelpunk.com  
  16. 16. 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  
  17. 17. 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  
  18. 18. 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  
  19. 19. Google  Keyword   SuggesLon  Tool   •  CompeLLon   •  Monthly  Searches   •  Local  Searches   www.pixelpunk.com  
  20. 20. 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  
  21. 21. 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  
  22. 22. •  SERP  Anatomy   –  Plus  Box   –  PPC   –  Organic   –  Google  Base   –  Local   www.pixelpunk.com  
  23. 23. Outcome  EvaluaLon   •  How’d  I  do?   •  Measure  audience  response   •  What’s  next?  How  do  we  move  the  needle?   www.pixelpunk.com  
  24. 24. 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  
  25. 25. 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  
  26. 26. Thanks  For  Listening!     •  Any  quesLons?   www.pixelpunk.com  
  27. 27. 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   www.pixelpunk.com  

×