1. Web Redesign Project Update July 28, 2010

2. Agenda Project Scope Project Requirements Best Practices, Navigation and Information Architecture Usability Testing Next Steps 09/06/10

3. Project Scope Original scope = 1-click away from home page Specifically, addition of pathway pages lead to many more sites than originally proposed Changes in current information architecture (IA) led to redefined scope 09/06/10

4. 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

5. Project Scope Close guidance and Recommended IA: Faculties (Departments addendum to Faculties) Undergraduate Admissions (Future Students - MUR) Services/Support Unit Alumni Support Graduate Admissions

6. 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

7. 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.

8. 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

9. 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 Working with OPD, site will tested in late August, early September for compliance

10. BEST PRACTICES, NAVIGATION, IA

11. Best Practice Documents Content and IA Review –http://web.uwaterloo.ca/files/BestPractices- IAContent.pdfhttp://web.uwaterloo.ca/files/BestPractices- IAContent.pdf Homepage Content –To be updated based on usability Panels Recommendations –Being finalized Faculty X Best Practices –Being finalized for public view

12. IA Best Practices User-oriented navigation including navigation header names and order Intuitive organization Meaningful link names & streamlined across the sites No more than 7-9 navigation items No more than 3 levels of navigation No external links in the navigation

13. IA Goals Align and streamline navigation across Waterloo sites Improve usability of navigation and site content Improve accessibility of navigation Eliminate external linking within navigation

14. WATERLOO NAVIGATION SPECIFICS

15. Capitals & Punctuation Capitalize: –Only the first letter of the first word –The first letter of the first word after a pipe | –Proper nouns as they are officially known Punctuation – Avoid: –Ampersand & –Question marks –Periods –Exclamation marks

16. Navigation Must Haves About [Unit Name] –Mission | Vision – includes a mission and vision statement. –Our people – list of all contacts and staff in the unit or group. This should always be the last link of the About section. News | Events –Events –News –Contacts – if there are media contacts

17. Common Suggested Headers Global connections Quick Facts – instead of Fast Facts, Facts, etc. Community engagement | Outreach Teaching Research Policies | Procedures

18. Fat Footer The fat footer should be used to include calls to actions and not to duplicate the top-level navigation of the site. –Links must include: Contact [Department / Unit / Service Name] Work for [Department / Unit / Service Name] –Links should include, if relevant: Support [Department / Unit / Service Name] Visit [Department / Unit / Service Name] –[Department / Unit / Service Name] Maps | Directions

19. FACULTY X NAVIGATION

20. Faculty X One core navigation template and content recommendations: All 1 st level navigation items Core 2 nd level navigation items Some optional 2 nd level navigation items names 3 rd level not defined

21. Faculty X Top Level About [FacultyX] Departments | Schools | Programs Teaching Research Resources | Services News | Events

22. Faculty X Fat Footer Contact [FacultyX] Visit [FacultyX] Support [FacultyX] Work for [FacultyX] Information for: –Current undergraduates –Current graduate students –Future undergraduates –Future graduate students –Faculty | Staff –Alumni | Friends

23. HOME PAGE

24. Content Recommendations Published on May 29 th, 2010 –http://web.uwaterloo.ca/story/homepage-content- strategyhttp://web.uwaterloo.ca/story/homepage-content- strategy To be updated based on Phase 2 Usability Testing –Future Students to be a pathway page –Support Waterloo to be in the footer –International pathway page removed  to be integrated as a section in each audience pathway.

25. ABOUT WATERLOO

26. About Waterloo Why Waterloo? Teaching Research Community engagement | Outreach Public accountability University leadership History | Traditions Contact Waterloo

27. NAVIGATION - NEXT STEPS

28. IA Work Prepare pathway page categories: –Future Students –Current Students –Faculty –Staff –Employer –Alumni Finalize navigations: –Support Waterloo –Co-op / Career Services

29. And more Create and finalize the wireframes Usability testing Accessibility testing Adjust navigation

30. Usability Testing 1 st phase: Content recommendations for pathway pages (completed) 2 nd phase: paper prototyping of the homepage (completed; report online) 3 rd phase: online testing of low-fidelity prototypes/wireframes (mid-August) 09/06/10

31. Usability Testing 1 st phase results: Pathway pages need to be task based Want personalization (undergrad/grad) Calendar (campus events, filtered by group) Contact information searchable based on name and title (WATIAM ) Nice to have: News feeds, Dates, photos 09/06/10

32. Usability Testing 2 nd phase results: participants shown paper mock-ups of proposed homepage and asked to complete tasks

33. Usability Testing 2 nd phase results: 9 key areas 1.Remove “For” from pathway navigation 2.Change story tab names 3.Unbold “About Waterloo” 4.Remove “Start Here” from “Future Students: Start Here” 5.Clear way to close panels Read more: http://web.uwaterloo.ca/story/phase-2-usability-testing-results

34. Usability Testing 2 nd phase results (continued) 6.Move “Support Waterloo” from Header 7.Clear role for “International” tab 8.Remove “A-Z” from “Offices & Services A-Z” 9.“Academics” in “Faculties & Academics Read more: http://web.uwaterloo.ca/story/phase-2-usability-testing-results

35. Usability Testing 3rd phase: mid-August Incorporate recommended changes and retest Wireframe-based testing Build out of wireframes for testing underway [preview]

36. Usability Testing Testing will continue throughout the project (and beyond) Goal is to make usability testing and continuous improvement a key part of Waterloo web workflow

37. Next Steps Wireframes: As wireframes are received, they will be reviewed, sign-off (completion expected end of August) Usability Testing (ongoing) Design/Buildout: September - onward

38. Thank you! Questions? Comments?