TLT Website Redesign

From ETS

Contents 1 Basics 1.1 Description 1.2 Web Site 1.3 Redesign Phases 1.4 Team Members 1.5 User Guides 2 Redesign Process 2.1 DEFINE 2.2 STRUCTURE 2.3 DESIGN 2.4 BUILD 2.5 MEASURE

Basics

Description

The TLT Unit Website is in need of a redesign from usability to information architecture to content management to visual presentation. To align the unit's strategic vision and goals with user needs and expectations. We will be using Weblion (Plone) as the content management system for the new version of the site. Here we will present our redesign workflow plan focused on the site's audience (user-center design), setting measurable goals, web standards, on-going interative usability testing and design cycles, and thinking long-term but focusing on short-term.

Web Site

Site to be redesigned:

http://tlt.its.psu.edu

Redesign Phases

• Phase I - Launched Aug 21, 2008
• Phase II - on-going

Team Members

• Audrey Romano -- Web Designer (TLT) Committee Chair
• Allan Gyorke -- Information Technology (ETS)
• Catherine Williams -- Web Developer/Designer (Weblion)
• Derick Burns -- Marketing (TLT)
• Erik Rose -- Programmer/SysAdmin (Weblion)
• Frank Singley -- ITS Tech Class Support
• Mary Janzen -- Writer/Editor (TLT)
• Tara Caimi -- Marketing (Training Services)
• Elizabeth Pyatt -- Instructional Designer (ETS)

User Guides

• Content Provider Quick-Start Guide for adding News and Events
• Content Provider Quick-Start Guide for managing Springboard pages
• Publishing a Feature Story on the Home Page

Redesign Process

Executive Summary

This is currently a working document setting out the steps in the process of redesigning the TLT unit website.

This process has been adapted from the "core [redesign] process" introduced in the book Web ReDesign 2.0: Workflow that Works, by Kelly Goto and Emily Cotler. The approach prioritizes initiatives that make sense, focusing on branding and audience, usability testing, and content development.

The process is laid out linearly here. In practice, some steps will be carried out in parallel. So Design and Build stages below in particular are more a catalogue of what needs to be done rather than a plan of the order in which things will be done.

Note: This plan was approved by TLT leadership in February 2008.

DEFINE

February 11 to March 14

1. Discover
• Gather Information: Director/Manager Interviews, Organization's Overall Strategic Plan.
• Understand Your Audience: Initial User Profiling
• Comparison Sites: Plone and non-Plone
2. Plan
• Create A Project Plan: Overall team and schedule approved, Scope of project and deliverables defined
• Clarify Budget: Technical needs, Time, Resources, Training
• Create Schedule
• Assign Team
• Set up Communication Staging Area
• Plan for Testing: Initial Usability Testing of Current Site
3. Clarify
• Set high-level initiatives: Initiatives Planner (worksheet/interviews)
• Prepare Design Brief: This document is the output of the surveys and interviews, around 3-5 pages, outlines the overall goals, perception, audience, what the redesign will accomplish, prevents scope creep, sed to align organization's vision/goals from Director surveys/interviews, Get Approval
• Kick off the Project

STRUCTURE

March 14 to April 25

1. Content Plan
• Audit existing content + URLs
• Outline new content
• Create delivery plan: Who owns the content. Clarify what content is due in rough and final form, determine readiness, outlines each page or section in a phased delivery process, and assigns responsibility for copy, images, assets, and other necessary elements
2. Structure Site: Flowchart Information Architecture, Establish navigation, page flow, content organization, and layout and user paths
• Create Sitemap
• Set naming conventions
3. Structure Pages
• Create wireframes: for primary and secondary pages
• Address navigation: Card-sorting/User Testing
• Naming and Labeling: Card-sorting
• Define User Tasks: User Testing (Paper-prototyping)

DESIGN

April 25 to July 25

1. Create
• Review Site Goals: Keeping in mind the strategy, branding and user goals
• Develop Concepts
• Design for the User
• Design presentation and get feedback: Present first round of page design/layout. Design of "look and feel" approved; begin art production.
2. Confirm
• Create protosite: (nondesign oriented) developed following approved page flow and UI design, Content is collected and modified.
• Test Functionality
3. Hand-off
• Create Graphic Templates
• Create Style Guide

BUILD

April 25 to August 15

1. Prepare
• Assess project status
• Establish guidelines: Best practices, clean code, accessibility
• Set files structures: Production begins using protosite as outline and structure
2. Build
• Slice and optimize
• Create Plone templates: template configuring and programming begins, incorporating content and design
• Implement light user-testing
• Migrate content into Plone
3. Test
• Create a QA plan: Confirm all specified browser and platform compatibility, Test cross-browser, cross-platform, test pathflows, pages and urls (internal)
• Prioritize and fix bugs
• Conduct final survey: Beta version of site is "live" for stakeholder sign-off and internal testing and QA begins. Site moved to end server for testing/QA/cross-platform testing.

MEASURE

August 15

1. Deliver
• Production style guide + Content Provider Documentation
• Hand-off Packet: Palette, Layout, Snapshots of styles, html, fonts, Track Documentation, Sign-offs
• Conduct post mortem: What worked, what didn't, what can be improved
2. Launch - August 15
• Prepare announcement plan
• Register with search engines
• Launch site
3. Maintain - Ongoing
• Maintenance team capabilities: training
• Internal maintenance: traning
• Develop maintenance plan: and next stage of iteration
• Confirm site security