web redesign project update july 28, 2010
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
Web Redesign Project UpdateJuly 28, 2010
Agenda
• Project Scope• Project Requirements• Best Practices, Navigation and Information
Architecture• Usability Testing• Next Steps
09/06/10
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
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
Project Scope
• Close guidance and Recommended IA:• Faculties (Departments addendum to Faculties)• Undergraduate Admissions (Future Students -
MUR)• Services/Support Unit• Alumni• Support• Graduate Admissions
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
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.
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
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
BEST PRACTICES, NAVIGATION, IA
Best Practice Documents
• Content and IA Review– http://web.uwaterloo.ca/files/BestPractices-IAContent.
• Homepage Content – To be updated based on usability
• Panels Recommendations– Being finalized
• Faculty X Best Practices– Being finalized for public view
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
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
WATERLOO NAVIGATION SPECIFICS
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
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
Common Suggested Headers
• Global connections• Quick Facts – instead of Fast Facts,
Facts, etc. • Community engagement | Outreach• Teaching • Research• Policies | Procedures
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
FACULTY X NAVIGATION
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
Faculty X Top Level
• About [FacultyX]• Departments | Schools | Programs• Teaching• Research• Resources | Services• News | Events
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
HOME PAGE
Content Recommendations
• Published on May 29th, 2010– http://web.uwaterloo.ca/story/homepage-content-strat
egy• 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.
ABOUT WATERLOO
About Waterloo
• Why Waterloo? • Teaching• Research• Community engagement | Outreach • Public accountability• University leadership• History | Traditions• Contact Waterloo
NAVIGATION - NEXT STEPS
IA Work
• Prepare pathway page categories:– Future Students– Current Students– Faculty– Staff– Employer– Alumni
• Finalize navigations:– Support Waterloo– Co-op / Career Services
And more
• Create and finalize the wireframes• Usability testing• Accessibility testing• Adjust navigation
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)
09/06/10
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
09/06/10
Usability Testing
• 2nd phase results:• participants shown paper mock-ups of proposed
homepage and asked to complete tasks
Usability Testing
• 2nd phase results: 9 key areas1. 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 panelsRead more: http://web.uwaterloo.ca/story/phase-2-usability-testing-results
Usability Testing
• 2nd 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
Usability Testing
• 3rd phase: mid-August• Incorporate recommended changes
and retest• Wireframe-based testing• Build out of wireframes for testing
underway [preview]
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
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
Thank you!Questions?Comments?