How to Plan For and Manage a Successful Web Redesign Project

1,953 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,953
On SlideShare
0
From Embeds
0
Number of Embeds
81
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How to Plan For and Manage a Successful Web Redesign Project

  1. 1. How to Plan For andManage a SuccessfulWeb 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 processKnow how to communicate and reach agreement with stakeholdersKnow 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 peersWilliam  &  Mary   Bates Collegewww.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. QuestionsContact Me: mherzber@fiu.edu 7-0094Web Communications: http://webcomm.fiu.edu   Get  the  slides  at   http://go.fiu.edu/redesignfiu     28

×