1 / 38

Web Redesign Project Update July 28, 2010

Web Redesign Project Update July 28, 2010. Agenda. Project Scope Project Requirements Best Practices, Navigation and Information Architecture Usability Testing Next Steps. Project Scope. Original scope = 1-click away from home page

tuari
Download Presentation

Web Redesign Project Update July 28, 2010

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Redesign Project UpdateJuly 28, 2010

  2. Agenda • Project Scope • Project Requirements • Best Practices, Navigation and Information Architecture • Usability Testing • Next Steps

  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

  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

  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.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 1st level navigation items • Core 2nd level navigation items • Some optional 2nd level navigation items names • 3rd 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 29th, 2010 • http://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 • 1st phase: Content recommendations for pathway pages (completed) • 2nd phase: paper prototyping of the homepage (completed; report online) • 3rd phase: online testing of low-fidelity prototypes/wireframes (mid-August)

  31. Usability Testing • 1st 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

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

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

  34. Usability Testing • 2nd phase results (continued) • Move “Support Waterloo” from Header • Clear role for “International” tab • Remove “A-Z” from “Offices & Services A-Z” • “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?

More Related