Realigning your Web Redesign Process

1,076 views
998 views

Published on

Presentation made by Nick DeNardis at the Case V conference on December 15, 2009 in Chicago, IL. It details the Web site redesign process of Wayne State University and how we successfully launched 350 redesigned sites in 5 years.

http://wcs.wayne.edu/casev/

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,076
On SlideShare
0
From Embeds
0
Number of Embeds
151
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Realigning your Web Redesign Process

  1. 1. Realigning Your Redesign Process Nick DeNardis @nickdenardis December 15, 2009
  2. 2. About myself • AssociateDirector of Web Communications at Wayne State University • Staff Writer at http://doteduguru.com/ • Host of http://educheckup.com/ • Computer Science background and love user experience, information architecture, accessibility and marketing. December 15, 2009
  3. 3. Preface December 15, 2009
  4. 4. Redesign is not all about pushing new pixels It’s about refining the user experience December 15, 2009
  5. 5. Wayne State Web department structure • Associate Director • One Content Administrator • Two Designers • Three Developers • One Multimedia Designer/Developer • Three Student Assistants December 15, 2009
  6. 6. Redesign is a pain • Not all sites need a complete redesign • Some might require just a few tweaks to make a world of difference • Others are so bad anything you change will improve the user experience December 15, 2009
  7. 7. December 15, 2009
  8. 8. December 15, 2009
  9. 9. Some simple rules • K.I.S.S. - You’re not publishing a book • Signoff ’s- Make sure the “client” knows the signoff is a commitment and changes afterward will effect timeline and cost • If you are the client make sure you have a timeline set before starting any work December 15, 2009
  10. 10. Web project timelines Planning Design Programming Review Launch 0 4 8 11 15 Ideal Actual December 15, 2009
  11. 11. Discovering your real users • How many of you have actually shadowed students using your site? • Focus groups with your primary audience? Prospective students? • Some passive testing tools: • Woopra - Real time analytics • CrazyEgg - Click heat mapping • Google Website Optimizer - A/B testing • Five Second Test - http://fivesecondtest.com/ December 15, 2009
  12. 12. December 15, 2009
  13. 13. Talk to the people in charge • Assess the primary goals early • Don’t be afraid to push something off to Phase II • If working with a committee make sure to have 3-4 goals for each meeting • Come up with 2-3 feelings the user should experience after a “10 Second Test” with the site • The key is to remove the “middle people” from making rouge decisions December 15, 2009
  14. 14. Determine a content strategy • Point the fingers early - You need to make sure the person responsible for content knows it and are competent • Catalog every public page, use something like HTTrack for PC to pull down the entire site. • Determine the process to review and publish content • Make sure they are aware of the time commitment December 15, 2009
  15. 15. Training content contributors • Not just on the CMS or how to physically update the site but more importantly how to structure web content • Train staff as early as possible and mandate it for any new content contributors • Don't bury the lead. Find the core of the page and place it up front December 15, 2009
  16. 16. December 15, 2009
  17. 17. Mapping out the site structure • The whiteboard is an invaluable tool • Post-It notes also do really well • Anything you can physically move around • If you prefer digital, OmniGraffle is a great tool • The goal is to move around the site as your primary audience and set a goal for every page December 15, 2009
  18. 18. December 15, 2009
  19. 19. Wireframe it out • Take all the visual elements and take 100 “points” to divide between them • Physical space and prominence are two different things • There is no fold. But make sure you put hints above the fold • Learn to love the grid December 15, 2009
  20. 20. December 15, 2009
  21. 21. Start the content transition early • Copy and paste is NOT a content transition strategy • Make sure every page gets looked at by at least one person • Pages should not get published without being looked at • This tedious and time consuming process will determine how successful the redesign is December 15, 2009
  22. 22. December 15, 2009
  23. 23. December 15, 2009
  24. 24. Intensive based design • Use the goals set for each page to influence the design • Make sure call outs are large and consistent • Give in to the little things but always remind the client of the design strategy • Don't loose the departments identity with a set in stone template December 15, 2009
  25. 25. Selling a design • If you have multiple options start with the worst • Only decision makers should be in the meeting • Walk through each element on the page • Explain why each element was placed where it was and its purpose • Make sure the university identity is not compromised by the clients wants December 15, 2009
  26. 26. December 15, 2009
  27. 27. December 15, 2009
  28. 28. December 15, 2009
  29. 29. Front end programming • What ever your university uses take advantage of any automated processes that you can. If you have control of the system even better • Make the site as light as possible. Attach Javascript actions after load, use sprites and combine/minify CSS and JS • Progressive enhancement December 15, 2009
  30. 30. Bringing it all together • The content and templates should now be merged • Don't forget about • Custom 404 pages • Redirect list • Analytics • Mobile testing • Printable style sheet • Test the site with someone who didn’t work on the project December 15, 2009
  31. 31. December 15, 2009
  32. 32. Site review • Walk the decision makers through the primary tasks of the site • Slight tweaks will happen, things change over time, just make sure it doesn't drag on too long • Get a signoff in writing or electronic • It doesn't have to be perfect, just good enough December 15, 2009
  33. 33. Launch the site • Change the DNS, folder, symlink. Do what you need to do to make the switch • Don't forget any 301 redirects. Search engines and users will thank you • Communicate the site change to all effected users possible • Send out an email or personally thank everyone involved for their hard work. For big enough sites have a launch party December 15, 2009
  34. 34. Maintenance • By far the toughest part of the redesign process • If your CMS has out dated page alerts use them • Check 404's daily • Check analytics once a week or more in the beginning • Meet once a month or so with content contributors to see if any changes are needed to the architecture December 15, 2009
  35. 35. Questions? Slides available at: wcs.wayne.edu/casev @nickdenardis December 15, 2009

×