Web Redesign Project UpdateSeptember 15, 2010

Agenda

• Recall: Project Scope and requirements

• Information Architecture

• Usability Testing

• Visual Design

• Next Steps

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

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

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

Usability Testing

• 2nd phase results:• participants shown paper mock-ups of proposed

homepage and asked to complete tasks

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

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

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

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

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

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

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

Thank you!

Questions?Comments?