Successfully reported this slideshow.

How to Plan For and Manage a Successful Web Redesign Project

1

Share

Loading in …3
×
1 of 28
1 of 28

How to Plan For and Manage a Successful Web Redesign Project

1

Share

Download to read offline

Have a working knowledge of how to carry out a redesign process

Know how to communicate and reach agreement with stakeholders

Know the right way to get a premier site - not only in design but in function as well

Have a working knowledge of how to carry out a redesign process

Know how to communicate and reach agreement with stakeholders

Know the right way to get a premier site - not only in design but in function as well

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

How to Plan For and Manage a Successful Web Redesign Project

  1. 1. How to Plan For and Manage a Successful Web Redesign Project Matt Herzberger Director of Web Communications Florida International University
  2. 2. After this, you will… Have a working knowledge of how to carry out a redesign process Know how to communicate and reach agreement with stakeholders Know the right way to get a premier site - not only in design but in function as well 2
  3. 3. Why We Redesign? —  Why?   —  Shifting  strategic  priorities   —  Technology  is  ever-­‐changing   —  Previous  redesigns  were  done  without  planning     3
  4. 4. How Do We Redesign? —  How?   —  On  average,  sites  are  redesigned  every  3  -­‐  5  years   —  Don’t  design  simply  to  get  a  new  look   —  Have  an  informed  and  strategic  redesign  that  aligns  with   your  institution  goals     4
  5. 5. Let me give you a good example… —  The  site  is  not  in  line   with  being  student-­‐ centric.     —  IA  is  all  over  the  place   —  Slow  code,  bad   techniques   —  10  years  since  last   redesign   5
  6. 6. Users talked, we listened —  “Accessing  FIU  Mail  is  a   headache.  Isn’t  there  an   easier  way?”   —  “The  information  about  life   on  campus  is  very  limited.”     —  “As  a  prospective  student,  it   is  necessary  to  know  which   campus  I  would  be  on  in   order  to  decide  if  this  is  the   . right  school  for  me.”   6
  7. 7. Do as I say, not as I do! —  NOTE:  A  redesign  is  fluid;  not  every  step  is   needed     —  Don’t  be  lazy  and  don’t  disrespect  or  shortcut   the  process   —  Client  needs  to  be  heavily  involved  in  the  process   7
  8. 8. Discover, Research and Gather —  Find  all  the  research  you  have  about  your  current   site   —  Feedback,  webmaster  emails,  analytics,  etc.   —  Ask  the  users  /  audience   —  Focus  groups   8
  9. 9. Review your peers William  &  Mary   Bates College www.wm.edu   www.bates.edu   •  Bold  imagery   •  Useful persistent footer •  Big  Branding   •  Solid imagery •  Focus  on  audiences’   •  Great interaction needs   9
  10. 10. Conduct Usability Tests [1] Youtube link http://www.youtube.com/watch?v=SFwU_rvMBaE 10
  11. 11. Create Personas [2] /tmp/PreviewPasteboardItems/fiu-personas (dragged).pdf 11
  12. 12. The Website Strategy —  Meet  with  stakeholders  to  get   their  goals;  make  them   measurable[3]   —  Make  a  project  plan  (who   needs  to  be  at  the  table)   —  Create  a  schedule  [4]  and   determine  the  budget   12
  13. 13. Content Strategy & Information Architecture —  Create  a  content   inventory  [5]   —  Test  the  IA  via  focus   groups,  card  sorts  [6]   —  Make  it  obvious  who  is   responsible  for  content   and  how  long  it  takes   —  Teach  them  how  to  write   for  the  web,  or  use  a  web   content  expert.   13
  14. 14. Define : Card Sorting Card sorting http://www.youtube.com/watch?v=-89cj71-Vfg 14
  15. 15. Build Wireframes —  Wireframes  [7]  are   simple  tools  for  showing   page  structure  and   content  requirements   —  This  is  where  you    get   stakeholder  buy-­‐in  on   the  layout.   15
  16. 16. Design and Mockup the Site — NOTE:  If  you  are   starting  your  redesign   here,  then  you  are   doing  it  wrong!   16
  17. 17. Design and Mockup the Site —  A  draft  or  visual  design,   a.k.a.  “comps,   —  It  should  be  very  easy   because  it  is  just  a  high   fidelity  wireframes   —  Get  feedback  and  get   sign  off  on  design   17
  18. 18. Create and Program Templates —  Be  sure  to  consider  template  requirements   —  CMS,  Framework,  Flat  HTML,  Development,  Scripting     —  Test,  test,  test  –     —  optimize  code  [8]   —  SEO  [9]   —  accessibility  [10]   —  Add  your  analytics  [11]   18
  19. 19. Migrate the Content —  We  already  proofread,  revised  and  cleaned  all  the  content     —  This  is  slow  and  boring,  but  be  sure  that  you  are  reviewing   the  content  and  are  consistent  in  the  flow   19
  20. 20. Test, Test, Test. Then Cleanup —  Test  code  validation   —  Fix  bugs   —  There  should  be  small  tweaks  only  at  this  point       —  Get  final  sign  off   20
  21. 21. Time to Go Live —  Change  the  DNS  move  to  live  site   —  Be  sure  to  remember  redirects  [12]   —  Monitor  and  review  for  little  snafus       —  Notify  and  congratulate  the  client  as  well  as  anyone  else   who  needs  to  know   —  HAVE  A  BEER!   21
  22. 22. After the launch: Train and Maintain —  Train  the  team.  Show  contributors  how  to  create  pages  and   add  content  to  the  site.   —  Provide  documentation  and  materials   —  Maintain  your  work.     22
  23. 23. After the launch: Care for Your Website —  NOTE  there  are  always  iterations  and  changes.     —  “A  website  much  like  a  child  -­‐  it  needs  our,  or  our  clients,   love  and  attention  on  a  daily  basis.”   —  If  you  have  done  it  right,  you  should  have  a  framework   that  will  grow  with  your  needs  for  some  time  to  come  [13].   23
  24. 24. CONGRATULATIONS! — You’ve  just  launched  a  website!     — If  things  have  gone  as  planned,  you   won’t  need  to  revisit  this  process   as  a  whole  for  years  to  come.     24
  25. 25. Checklist —  Discover,  Research  and  Gather   —  Define  a  Site  Strategy   —  Form  a  Content  Strategy  and  Information  Architecture   —  Build  Wireframes   —  Design  and  Mockup  the  Site   —  Create  and  Program  Templates   —  Migrate  the  Content   —  Test,  Test,  Test.  Then  Cleanup   —  Launch  the  Site   —  Train  and  Maintain   —  Repeat   25
  26. 26. Resources —  [1]    Usability  Testing  -­‐  http://slidesha.re/hee-­‐usability   —  [2]    Personas  -­‐  http://bit.ly/hee-­‐personas   —  [3]    Client  survey  -­‐  http://bit.ly/hee-­‐client-­‐survey   —  [4]    Timeline  -­‐  http://bit.ly/hee-­‐timeline   —  [5]    Content  Inventory  -­‐  http://bit.ly/hee-­‐content-­‐inventory   —  [6]    Card  sort  -­‐  http://bit.ly/hee-­‐card-­‐sort   —  [7]    Wireframes  -­‐  http://bit.ly/hee-­‐wireframes   —  [8]    Optimize  code  -­‐  http://yhoo.it/hee-­‐optimize   26
  27. 27. Resources —  [9]    SEO  -­‐  http://bit.ly/hee-­‐seo   —  [10]    Accessibility  –  http://bit.ly/hee-­‐accessbility   —  [11]    Analytics  -­‐  http://bit.ly/hee-­‐analytics   —  [12]    Redirects  -­‐  http://bit.ly/hee-­‐redirects   —  [13]    Realign  -­‐  http://bit.ly/f3ZR9O   27
  28. 28. Questions Contact Me: mherzber@fiu.edu 7-0094 Web Communications: http://webcomm.fiu.edu   Get  the  slides  at   http://go.fiu.edu/redesignfiu     28

×