Redesign of the Chico State Web Site

1
Redesign of the Chico State Web Site

• An Enterprise-level Process

2
Why Have a Process?
Think before you act. Don't just put up a new
site because you think you are behind the times.
This is a common trap. Understand that there is
more involved than simply designing a snazzier
interface. Plan to plan. A logical workflow will
help you cover all your bases. -Goto Cotler,
Web ReDesign

• The CSU Chico web site is the single most
  important communication tool the university has
• It is our primary point of information contact
  for the campus community and the outside world
• 1,080,123 page views in 2003 (home page only)
• It communicates our image to our users
• Web design has become a complex,
  multidisciplinary field
• Usability, user interaction design, graphic
  design, accessibility, information architecture,
  web technologies, etc.
• Long gone are the days of the lone webmaster
• A clear process defines goals and the means to
  achieve them
• No process, no success. Know process, know
  success.

3
Whats Wrong with Just Refreshing the Look?
The main page serves as the most prominent and
important navigation interface for users. Changes
to this page can really hurt the mental model
users have formed of the web site over time.
Rosenfeld Morville, Information Architecture
for the World Wide Web

• Even minor changes in design can have large
  impacts on usability and user attitudes
• The home page is the single most important page
  in the site
• Yes, it should look nice, but is that reason
  enough to subject users to the pain of change?
• If we do this refresh now, we lose the
  opportunity to incorporate what we learn from
  Fred Condos class
• Whats the rush??
• Without addressing the underlying structure of
  the site
• We dont add any value to the user for putting
  them through change
• Well just have to do this again, six months or a
  year from now
• When we address real issues with site structure
  and functionality, which we will have to do
  eventually
• If we decide to make real changes in structure
  later on
• If we feel that we have to use the new design
  (and we will its new after all - and free), it
  will seriously limit our options in restructuring
• Form follows function if form comes first, it
  limits function to fit the form
• We subject our users to the unfriendly process of
  multiple adjustments
• It decreases trust
• It costs more
• We dont know the effect of these changes
• Everyone has opinions, but no one has any facts
• Will the new look attract more new students?
• We dont know

4
Project Steps
Because design is something you can see, its
interesting to everyone. Everyone wants to jump
to that first. Everybody has opinions about
colors and fonts and layout But they skip the
functionality stage and start designing
backwards. Indi Young in The Unusually Useful
Web Book

• Administrative buy-in
• Define redesign goals
• Assemble redesign team
• Establish scope, timeline budget
• Establish standards
• Analyze test existing site
• Profile site users
• Develop test information architecture(s)
• Develop test visual design(s)
• Create test protosite
• Create implement real site
• Finish documentation
• Go live
• Maintenance

Good resources http//www.washington.edu/webguid
es/workbook/usercenter.html http//www.webstylegu
ide.com/index.html
5
Administrative Buy-in
Web sites can be highly political projects.
Everyone has their own ideas on what their
companys site should do and how it should look.
One of the biggest challenges for web producers
is how to get your entire organization working
toward a common goal. June Cohen, The
Unusually Useful Web Book

• Involve high administrators early in the process
• Nobody likes surprises
• Get input from administration and department
  heads
• What they would like to see in the new site
• Remind them they arent designing the site
• Dont give them control over terminology or
  labeling
• Remember IR has the servers and the expert
  personnel
• Get high-level sign off on redesign process and
  project control
• Avoids meddling and micromanagement down the road

6
Define Redesign Goals
What is the goal of this redesign? Why are we
redesigning? What will the redesigned site
accomplish that the present site doesnt? You
need answers to these questions. emphasis in
original - Goto Cotler, Web ReDesign

• Whats wrong with the current site?
• Whats right with the current site?
• What issues must be addressed?
• What issues do we want to address?
• What standards must be met?
• What are the limitations?
• Technological
• Political
• Time money
• How will the new site be better than the old one?
• How will the new site better address the
  universitys core objectives?

7
Example Redesign Goals
If you don't know where you are going, you will
wind up somewhere else. Yogi Berra

• Create new, fresher, more hip look
• Implement strategic goals for university web
  presence
• Improve navigation/site structure
• Make site easier to use
• Address accessibility issues
• Attract more new students
• Fulfill university core objectives
• Improve site performance
• Make site easier to maintain/change
• Enhance university image/branding
• Increase design consistency across entire site
• Implement new technologies
• e.g., content management system

8
Assemble Redesign Team
We are continually amazed by the scale of
business blunders caused by the false assumption
that anybody can do this work. - Rosenfeld
Morville, Information Architecture for the World
Wide Web

• Roles (one person may fill several roles)
• Producer/Project Lead
• Graphic/Visual Designer
• Information Architect
• Interaction/Usability Designer
• HTML Coder
• Programmer
• Accessibility Designer
• Content Manager
• Quality Assurance
• Some campuses implement workgroups for each role

Good resource http//www.macromedia.com/resources
/techniques/define/plan.html
9
Establish Scope, Timeline and Budget
Scope creep is the slow, inevitable migration of
a website from a straightforward, comprehensible
project to an out-of-control nightmare. - Goto
Cotler, Web ReDesign

• What will and will not be done
• Personnel
• What percentage of timebase?
• What parts of the process are they involved in?
• Establish milestones
• Set firm dates and stick with them
• Plan for content lag
• Involve content providers early in the process
• Write a detailed production plan/creative brief
• Outlines major goals, strategy timeline
• Get everybody (team members and their managers)
  on the same page
• Who will be needed when and what they will do

10
Establish Standards
Most sites are built to work exclusively in web
browsers this years web browsers. And thats
short-sighted. At some point (perhaps sooner than
you think) youre going to want your information
to appear in other display systems, like handheld
computers. June Cohen, The Unusually Useful
Web Book

• Coding (XHTML, CSS, file naming, etc.)
• Accessibility
• Security
• Graphic design
• Communications
• Branding, brand usage
• Labeling
• Content (writing guidelines, etc.)
• Etc.

11
Analyze Test Existing Site
"Believe in usability testing. Redesign with your
user in mind. Perform usability testing on both
current and redesigned sites during the
development process. Nothing gives you more
honest feedback than watching someone go through
your site." - Goto Cotler, Web ReDesign

• Examine log files for usage and patterns
• Page view logs
• Search logs
• Do a page structure analysis
• Create a visual site map to better understand the
  sites existing structure
• Conduct usability testing
• More effective than surveys
• Use volunteer students, staff faculty
• Doesnt have to cost much or take a lot of time
• Any testing is better than no testing
• Audit existing content
• Understand what is in the site
• Determine what can be reused

12
Profile Site Users
Everyone has an opinion about design. If your
debate is based only on opinions, the person with
the most power always wins. The team that has
rational support for its conclusion can trump
power and opinion. User research can give you
concrete proof that one direction is better than
another. Indi Young, www.adaptivepath.com

• Who uses the site?
• Categorize users
• Currents students, faculty staff, alumni, etc.
• What are their characteristics?
• Demographics
• Browser versions used
• Internet access (broadband/modem)
• Primary tasks on the web site
• Develop personas for testing/designing purposes
• 6-8 should be sufficient
• Why personas?
• They personalize the users you are designing for
• Helps you visualize how each persona might
  approach the site
• Used in testing scenarios
• E.g., How would Davin the art student use this
  feature?

13
Example User Profile
Personas are fictionalized characters, based on
the user profiles youve developed for each
segment of your audience. Though slightly, well,
cheesy, personas can be quite helpful for
creating awareness and understanding throughout
your organization. They help tell the story of
your site. June Cohen, The Unusually Useful
Web Book
Name Heather Age 21 Major Anthropology Familiar
ity with internet Basic Internet access
Roommates computer, campus labs Most commonly
used applications Email, Word, IM
Heather is a casual internet user. Because she
doesnt own her own computer and has only a modem
connection, at home she mostly uses the internet
to check email and chat with friends via IM. She
does occasionally shop on the internet. At
school, she uses the internet primarily to search
for information on her classes and assignments,
access course info via WebCT, and to sign up for
classes. She typically uses the internet several
times a week for class purposes. She knows
nothing about the technology of the internet and
cares even less.
14
User-Centered Design
The number one misconception that clients have
is that they are the target audience for the
site. But they are not, and their wife is not,
and their kids are not. So the biggest
misconception is that their opinion matters.
Were designing the site for your users, not for
you. Lance McDaniel in The Unusually Useful
Web Book

• Two best tools to insure user-centered design
• Usability testing
• User profile scenarios
• Focus on users and user goals
• Make things explicit for new users
• Provide shortcuts for expert users
• Campus politics must be eliminated from the
  design process
• User-centered design must have buy-in from top
  levels
• Site design process must be hands-off for
  administrators
• Test, test, test!

15
Develop Test Information Architecture(s)
Using the web is all about seeking information
and finding it quickly and easily. Its about
connecting your users to your content. Whatever
the task, users need to be clearly and simply
directed to the information sought. - Goto
Cotler, Web ReDesign

• Examine what other universities have done
• Develop taxonomies
• Hierarchical groupings of similar items
• Labeling is vital (e.g., Academics vs.
  Colleges Departments)
• Do card sorting tests
• Give users cards labeled with items and see how
  they group and interpret them
• Conduct task analysis for common tasks that have
  poor task modeling on current site
• Try to simplify click path
• Develop site maps
• Hierarchical structure and organization of
  content
• Model of navigation schemes
• Develop and test wireframes
• Paper mockups of pages (navigation and content
  areas)
• See how users interact with the organization you
  have developed
• Conduct user scenarios to keep IA on track

16
Develop Test Visual Design(s)
Whether you know it or not, - whether they know
it or not your sites appearance will resonate
with visitors on an emotional level, creating and
impression that affects the way they think about
you and act on your site. June Cohen, The
Unusually Useful Web Book

• Develop design concepts
• Refine into designs
• Insure that designs stick to the architecture
• Use approved labeling
• Use correct navigation schemes
• Follow wireframes
• Get feedback
• Focus groups
• This is the one place in site design where focus
  groups can provide valuable feedback
• Management
• Get approval
• Powers that be must sign off on the design
• No surprises and no complaining later on

17
Create Test protosite
Confirming assumptions before significant
dollars are invested in design and production is
always valuable. Testing should be part of every
workflow at as many stages as possible. - Goto
Cotler, Web ReDesign

• Create skeleton site
• Using proposed visual design, navigation site
  structure
• Multiple alternate designs can be tested
• Conduct basic usability testing
• Refine design and structure based on results

18
Create Implement Real Site
If this were pie baking instead of web design,
consider your fruit sliced, your ingredients
measured, your oven preheated, and your crust
shaped. After one more check of your recipe, you
are ready to bake. - Goto Cotler, Web ReDesign

• Reassess project status
• Has the scope or other factors changed?
• How are the budget, personnel, schedule?
• Check content status
• All content should be in and ready
• Publish final page templates
• Including CSS files and JavaScripts
• Populate pages with content
• Including invisible content
• ALT tags, TITLE tags, etc.
• Conduct internal QA testing
• Fix bugs/problems

19
Finish Documentation
The more detailed the Style Guide is, the better
insured the site is against the almost certain
eventuality of design breakdown during
maintenance. - Goto Cotler, Web ReDesign

• Documentation should have started at step 4
  (Establish Standards)
• Create a Style Guide for the site
• Fonts, colors, page dimensions, banners, etc.
• Create a Production Standards guide
• File naming conventions, code standards, CSS,
  etc.
• Create page templates
• Home page, secondary, tertiary, specialty pages,
  etc.

20
Go Live
All testing has been completed on the staging
server, fixes have been made, production is
frozen, and the announcement is in place. All
systems are go. - Goto Cotler, Web ReDesign

• Freeze all design and content
• Complete QA testing
• Plan announcement strategy
• Prepare long before the site goes live
• E.g., if the site is scheduled to go live August
  1st, let users know what to expect in the fall
  before they leave for the summer
• Place announcement prominently on old home page
• Consider phased, or soft, launch
• Sections are phased in over time
• Have a Whats Changed page
• Explain whats changed and why
• Familiarize users with the new site
• Transfer to live server
• Submit site to major search engines
• Party!

21
Maintenance
Maintenance doesnt just happen. There needs to
be a plan for immediate, post-launch fixes and
ongoing, long-term regular updating. A 12- to
24-month maintenance plan is a good timeline to
undertake. - Goto Cotler, Web ReDesign

• Get post-launch feedback from users
• Fix bugs, serious problems
• Determine who is responsible for maintaining what
• Which parts of the site are maintained by
  departments
• Develop maintenance plan that spells out
  responsibilities update schedules
• Train departmental editors
• So that they are familiar with standards, and
  with maintaining site integrity

22
Why all the Research and Testing?
"Fearing the perils of analysis paralysis,
managers tend to be very action oriented. 'Let's
skip the research and get started with the real
work' is a common sentiment. However, without
this careful investigation and experimentation
aimed at the discovery of facts, you'll find
yourself basing your strategy on the unstable
foundation of biased opinion and faulty
assumption." - Rosenfeld Morville, Information
Architecture for the World Wide Web

• Opinions and assumptions do not use your site
  users do
• The only way to know if something actually works
  is to have real users use it
• The more you know about your users, the better
  able you are to meet their needs
• The earlier you test, the earlier you can detect
  and correct problems
• Avoids very costly fixes down the line
• But research testing are too expensive and
  time-consuming!

Strategy
Design
Implementation
Fire, then aim
Strategy
Research
Design
Implementation
Aim, then fire
From Information Architecture for the World Wide
Web, Rosenfeld Morville
23
Sources
The following books and websites were used in
developing the structure of web committees for
CSU Chico

• Web ReDesign Workflow That Works
• Goto Cotler
• Information Architecture
• Rosenfeld Morville
• Adobe Master Class Web Site Redesigns
• Marcy DiNucci
• Macromedia
• Website Production Management Techniques
• Web Style Guide
• http//www.webstyleguide.com/index.html
• Human Factors International
• http//www.humanfactors.com/downloads/schaffermeth
  od.pdf