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.

pdf

• 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?