Web Design Initiatives

1
Web Design Initiatives

• University of Oregon and Willamette University
• 2007 OLA ConferenceApril 19, 2007

2
Web Design Initiatives

• Web design process at two institutions
• University of Oregon and Willamette University.
• Requirements gathering
• Information architecture
• Usability testing
• Graphic design
• Implementation

3
Willamette University

• Design initiative authorized Summer 2005
• Design group
• Head of Systems (design and implementation lead)
• Humanities Liaison
• Sciences Liaison
• Business and Education Liaison
• Systems Librarian
• University Web Designer (graphics lead) 
• Target launch date Fall 2006

4
University of Oregon

• Strategic Direction The UO Libraries will
  provide physical and virtual environments that
  promote interactivity, exploration, discovery and
  community.
• Tactical Response need for a redesigned website
  and permanent web team identified as library-wide
  priorities in 2005 department heads retreat.

5
UO Web Development Team

• Team appointed Summer 2005
• Team incorporated skills required both for
  redesign phase and ongoing support
• Information Architecture / Usability Lead (CET
  Interactive Media)
• Graphics Lead (CET Interactive Media)
• Technical Lead/Programmer (new position in
  Systems)
• Training Staff Support Lead (Systems)
• Editorial Lead (Library Communications)
• Reference/Instruction Representative (Knight
  Library Reference)
• Metadata Services / Digital Projects
  Representative (MSDP)
• Library Administration Representative
  (Instructional Services)
• Target launch date September 2006

6
Requirement Gatherings

• Eliciting and analyzing information about
• Institutional goals
• Stakeholders
• Target audience (primary and secondary)
• Tasks and processes
• Informational / instructional / functional needs
• Content (type, format, terminology)
• Technical specifications
• Look and feel

7
Requirements GatheringUO Core Directives

• Core directives from library admin
• The site will be navigable and usable by external
  (e.g. non-library) audiences, including our
  newest students right out of high school.
• The site will reflect the full range of library
  services and collections in a balanced and
  appropriate way.
• The site will display clarity, consistency, and
  style in editorial content, graphic design,
  information architecture and navigation, and
  technical functionality.
• To the extent possible, the site will be
  graphically and stylistically congruent with the
  recently redesigned UO website.
• Technical and editorial administration of the
  site needs to be efficient and sustainable.

8
Requirements Gathering UO Process

• Review previous usability results and other
  websites
• Create requirements gathering questions
• Meet with library departments
• Conduct online survey with target audiences
• Identify areas for further research via focus
  groups.
• Conduct follow-up focus groups with target
  audience
• Simultaneously researched content management
  systems

9
Requirements GatheringWU Process

• Design Group critique of current site, with wider
  staff input
• Review web site logs to determine page use
• Scan other web sites to identify potentially
  useful design concepts
• Conduct student and faculty focus groups
• Finalize general design principles

10
Requirements GatheringWU Design Principles

• Comprehensive, topical site navigation
• Global navigation scheme on all pages
• Direct access to primary services from the home
  page
• Essential library content and services available
  with a minimum number of clicks (thus favoring
  breadth over depth in page hierarchy)
• Minimize or eliminate library jargon
• Graphically attractive home page consistent with
  University style and look

11
Information Architecture

• The combination of organization, labeling, and
  navigation schemes within an information system.
• The structural design of an information space to
  facilitate task completion and intuitive access
  to content.
• The art and science of structuring and
  classifying web sites and intranets to help
  people find and manage information.
• An emerging discipline and community of practice
  focused on bringing principles of design and
  architecture to the digital landscape.
• Information Architecture for the World Wide
  Web, Rosenfeld Morville, OReilly and
  Associates, 2002.

12
Information ArchitectureThe Willamette Process

• Informed by requirements gathering.
• Full-day retreat to develop organization and
  labeling.
• Additional meetings to develop navigation scheme.
• Meeting with Office of communications designers
  to discuss concepts for integration into
  University site.
• Share IA with library staff.

13
Information ArchitectureDesign Retreat Card Game
14
Information ArchitectureWU Organization and
Labels 1
15
Information ArchitectureWU Organization and
Labels 2
16
Information ArchitectureNavigation

• Designing for navigation involves a transition
  from IA to graphic design and usability.
• The Willamette team used our IA concepts, design
  principles, and models from other libraries to
  develop the navigation scheme
• Clearly prioritized content and services.
• Two web sites in particular informed our approach
  to navigation.

17
Information Architecture Model 1 UNC
18
Information Architecture Model 2 Simmons
19
Graphic Design/Implementation Initial Wireframe

• Image Here?

20
Information ArchitectureUO Process

• General IA priorities informed by Requirements
  Gathering.
• Focus on template for homepage and internal pages
  (departments, guides, resources, services, etc).
• Group retreat to examine requirements gathering
  results and begin work on content organization,
  terminology/labeling, and navigational structure
• Continue meetings refining IA
• Multiple wireframes based on IA
• Final wireframe for usability testing

21
Information ArchitectureNavigation

• UO team first prioritized content based on
  requirements feedback
• Specific focus on needs of new vs experienced
  library users (link terminology, homepage
  visibility)
• Prioritization guided the layout and design of
  navigation
• Also reviewed navigation and layout of specific
  library websites which seemed to be taking a
  similar approach

22
Information ArchitectureStanford - Assistance
Tools
23
Information ArchitectureColumbia - Homepage
Search
24
Information ArchitectureWireframes
25
Information ArchitectureWireframes
26
Usability Testing / Wireframes

• "Usability refers to the extent to which a
  product can be used by specified users to achieve
  specified goals with effectiveness, efficiency
  and satisfaction in a specified context of user."
  - ISO 9241-11
• Test frequently performed tasks
• Conduct with wireframes or prototypes
• Team members observe tests to identify usability
  problems and make changes

27
Usability Testing / WireframesUO Usability Tasks

• Tasks varied based on target audience
• Find articles on human evolution
• See what books you have checked out and when they
  are due
• Find books placed on reserve by for Anthropology
  312
• Find resources to help begin your research paper
• Check out a laptop
• See if the library carries the online version of
  a specific journal
• Find an image of Steve Prefontaine
• Reserve a study room
• Check to see if library has The Old Man and the
  Sea
• Find out when the library closes on Saturday

28
Usability Testing / WireframesUO Conduct Tests

• Usability tests with undergraduates, grad
  students, faculty and staff
• Design specific tasks for each audience
• Create scripts, questionnaire, consent form
• Conduct tests with interactive PDFs
• Revise PDFs based on results
• Conduct second round of tests
• Create final wireframes based on results

29
Usability Testing / Wireframes UO Interactive
PDF - Round 1
30
Usability Testing / Wireframes UO Interactive
PDF - Round 2
31
Usability Testing / WireframesWU Usability Tasks

• Tasks focus on students
• You need to find a journal article on psychology.
  
• You need to find a book on plant diversity.
• It's Friday night and you need a book, but you
  don't know when the library closes.
• You need to find an article in the Wall Street
  Journal from 1980.
• Your professor has asked you to schedule an
  appointment with the Economics Librarian?
• You need to cite a web page in APA format and you
  need to find an example.
• You want to check on the status of your
  Interlibrary Loan requests.

32
Usability Testing / WireframesWU Conduct Tests

• Recruit undergraduates with varying experience
  levels
• Develop paper wireframes for areas of site being
  tested
• Create pages meet / suggest changes
• Revise and fine tune paper prototypes
• Conduct individual tests, one leader/page turner
  two observers
• Develop simple wireframe to share with
  communications

33
Usability Testing / Wireframes WU Paper
Prototype - Home
34
Usability Testing / Wireframes WU Paper
Prototype - Inside
35
Graphic Design / Implement

• Visually communicate information or message using
  typography, imagery, color, etc.
• Based on information architecture
• Design should support target audience in
  accomplishing their goals
• Design studies lead to final design
• Design, information architecture and technical
  solutions converge in site development
• Quality assurance to test functionality and
  review content and graphics

36
Graphic Design / Implementation WU Graphic
Design Process

• Met with Communications designer to discuss our
  wireframe, organization, and navigation concepts
• Received design studies from Communications
• Review design studies, with staff input
• Gave feedback to Communications
• Reviewed new design studies
• Selected final design
• Received page template from Communications,
  including html and css

37
Graphic Design/Implementation Communications 1
38
Graphic Design/ImplementationCommunications 2
39
Graphic Design / ImplementationLibrary Comments
40
Graphic Design / ImplementationCommunications 4
41
Graphic Design / ImplementationCommunications 5
42
Graphic Design / ImplementationWU Final Design
43
Graphic Design / ImplementationWillamette Catalog
44
Graphic Design / ImplementationImplementing the
Design

• Extend design template/CSS to entire site
• Library News in University blog software
  (Moveable Type)
• Incorporate catalog and other services into new
  format
• Tested pages on multiple browsers and corrected
  style sheet rendering problems.
• Transfer our Web site technologies into the wider
  University IT infrastructure (web server,
  database server, virtual machine for library
  applications).
• Possible future use of Universitys new CMS.

45
Graphic Design / ImplementationAssessment and
Next Steps

• Design group reconvened in Spring 2007
• Currently assessing the Web site design focus
  groups, staff feedback.
• Anticipate evolutionary changes revision of
  Databases section, modest changes to home page,
  color.
• Usability tests will be conducted for site
  revisions.
• Implementation and migration to University IT
  services is still ongoing.

46
Graphic Design / ImplementationUO Graphic Design
Process

• Create 3 initial design studies based on
  wireframe
• Review color palettes and general design
  direction with UO Creative Publishing
• Review of aesthetics, branding, and technical
  feasibility
• Create final design and present to Library staff
• Make minor revisions based on feedback
• Create html/css templates for implementation in
  Content Management System (CMS)

47
Graphic Design / ImplementationUO Design Study 1
48
Graphic Design / ImplementationUO Design Study 1
49
Graphic Design / ImplementationUO Design Study 2
50
Graphic Design / ImplementationUO Design Study 2
51
Graphic Design / ImplementUO Final Design
52
Graphic Design / ImplementUO Final Design
53
Graphic Design / ImplementUO Implementation
Process

• Port design into content management system (CMS)
• Created script to move many existing library
  pages into new CMS template
• Begin staff CMS training
• Departments review content presentation and
  create new pages in CMS
• Quality Assurance
• Launch

54
Web Design Initiatives Contacts

• Andrew Bonamici, Associate University Librarian
  for Instructional Services, UO Libraries,
  bonamici_at_uoregon.edu
• Kirstin Hierholzer, Assistant Director, Center
  for Educational Technologies, UO Libraries,
  kirstinh_at_uoregon.edu
• Bill Kelm, Systems Librarian, WU Hatfield
  Library, bkelm_at_willamette.edu
• Michael Spalti, Associate University Librarian
  for Systems, Hatfield Library, mspalti_at_willamette.
  edu