![Page 1: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/1.jpg)
Web Redesign Project UpdateSeptember 15, 2010
![Page 2: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/2.jpg)
Agenda
• Recall: Project Scope and requirements
• Information Architecture
• Usability Testing
• Visual Design
• Next Steps
![Page 3: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/3.jpg)
Project Scope
• uWaterloo home
• Pathway pages: future student, current student, faculty, staff, alumni, employers
• Panels: About Waterloo, Today @ Waterloo (including Bulletin), Faculties & Academics, Offices & Services
• Other: Feature Stories, Communications | News, Support Waterloo
09/06/10
![Page 4: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/4.jpg)
Project Requirements
• Technical:• HTML: W3C XHTML 1.0 Recommendation; Strict
DOCTYPE, No JavaScript or CSS will be present in any mark-up file
• CSS: W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1), NO CSS hacks
![Page 5: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/5.jpg)
Project Requirements
• Technical (continued):• Browser Support: Internet Explorer 7, FireFox 2.0,
Safari 3.0, Opera 9, Chrome 2 and up
• Site Formats: Full, Print, mobile/naked
• Drupal: Any XHTML/CSS templates developed must conform to Drupal practices and restrictions.
![Page 6: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/6.jpg)
Project Requirements
Technical (continued):
• Javascript: • Framework: jQuery must be used for any and all
JavaScript in the templates
• Progressive Enhancement: fully usable without JavaScript; functionality must be developed with no JavaScript and then enhanced by adding JavaScript
![Page 7: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/7.jpg)
Project Requirements
• Accessibility• New site will be Web Content Accessibility Guidelines
(WCAG) 2.0 - Level AA compliant
• Level AA compliance = accessible to most users in most circumstances
![Page 8: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/8.jpg)
Information Architecture
• Prepared pathway pages (based on phase 1, needs assessments):• Future Students• Current Students• Faculty• Staff• Employer• Alumni
• Finalized navigation:• Support Waterloo• Co-op / Career Services
![Page 9: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/9.jpg)
Usability Testing
• Phase 2: Completed second round of testing (paper prototyping)
• Phase 3: online testing of low-fidelity prototypes/wireframes completed (mid-August)
09/06/10
![Page 10: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/10.jpg)
Usability Testing
• 2nd phase results:• participants shown paper mock-ups of proposed
homepage and asked to complete tasks
![Page 11: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/11.jpg)
Usability Testing
2nd phase (round 2)• Investigated particularly problematic areas identified in
the first round of paper prototyping:
1. Feature Stories: Feature story tabs continued to be problematic (may be due to inability to interact with site);further investigation needed
2. Support Waterloo: Removed support waterloo from header and moved to footer; was viewed much more positively
![Page 12: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/12.jpg)
Usability Testing
• 3rd phase: Online wireframe testing
• Over 700 respondents!!!
• Collected demographic information and matched to responses
• Due to the overwhelming response, data has not yet been fully analyzed
• Analysis focus to begin next week, results shared as soon as available
![Page 13: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/13.jpg)
Visual Design: Project Goals
Recall original project goals:
• accurately reflect the new branding attributes,
• create a new look and feel,
• enhance user experience by improving navigation, search and information organization,
• adopt new web standards on accessibility, flexibility in design, and adaptability to the differing needs on campus
![Page 14: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/14.jpg)
Visual Design: Templates
Based on content type, we asked for following:
• Faculty/Department/Service homepage
• Text heavy page with subsection
• Text light page
• Photo gallery
• Contact page with embedded email form and contact list
• Pathway type
![Page 15: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/15.jpg)
Visual Design• Design proposals were made available to
community at the end of August and beginning of September
• Most feedback = positive
• Key areas of concern expressed by community: 3D, “W” bar, photo selections
• Team is committed to meeting specifications originally outlined
![Page 16: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/16.jpg)
Next Steps• Consultation on IA and designs = complete
• Web Style Guide expected from consultant October 8th – will become a living document that will incorporate visual, communications and technical aspects
• Source code will be delivered by White Whale at the end of October and will be delivered to CMS project once any additional tweaks have been completed
![Page 17: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/17.jpg)
Next Steps• Bootcamp: Working with people from across
campus to prepare overview presentations aimed at giving pilot site contributors a solid foundational overview of:• Branding
• Writing for the Web
• Accessibility
• Usability
• Content analysis
• Information architecture
![Page 18: Web Redesign Project Update September 15, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062409/56815017550346895dbdfda7/html5/thumbnails/18.jpg)
Thank you!
Questions?Comments?