Redesign for Success: Developing a Student-Centered Website

1
Redesign for Success Developing a
Student-Centered Website

• Gina Garber, Digital Services Librarian
• Michael Hooper, Electronic Services Librarian

2
Program Outline

• Background
• Analysis
• Conceptual Design
• Prototypes
• Production
• Launch
• Maintenance
• Questions

3
Background

• Factors that indicated change was necessary
• Original web administrator resigned
• Students wanted a change
• Poor usability of materials and resources
• Too much information on the homepage
• No website policy and procedures

4
Background

• No one was maintaining the website
• Example 1 Library Test Collection
• Example 2 Gift Policy
• Example 3 Humanities 1010 Instruction

5
Background

• School of Business - Marketing 4310
• Dr. Carmen C. Reagan
• Business Approach
• Students developed five advertising strategies
  for the library (red folders) 10-20 pages each
• Marketing Objectives
• Relationship of Advertising to Library Usage
• Consumer Benefits
• Marketing Plan
• Implications of Market Research
• Communications Media and More

6
Background

• Students wanted a change
• Homepage is too wordy
• Drop down boxes semi-confusing do differently
• More color
• Add icons
• Organize databases for easier access
• Make it more user friendly

7
Background

• Poor usability of materials and resources
• Example 1 Library Reserves
• Example 2 Database Access

8
Background

• Too much text on the Library homepage
• Example 1 Library Homepage (original design)
• Example 2 Library Homepage (mini redesign A)
• Example 3 Library Homepage (mini redesign B)

9
Background

• No website policy and procedures

10
Analysis

• Identify Users
• Identify Users Needs
• Identify Web Administrators Limitations
• Identify Librarys Limitations
• Auditing Web Pages

11
Programming Needs

• Microsoft FrontPage
• Microsoft Active Server Pages
• Cascading Style Sheets
• JavaScript
• PHP
• Dynamic Navigation (global navigation)

12
Conceptual Design

• Beginning the Creative Process
• Defining Smart Design
• Reviewing Website Goals
• Developing Concepts
• Presenting Designs and Gathering Feedback

Goto, K., Cotler, E. (2002). Web Redesign
Workflow that Works. Indianapolis, IN New Riders.
13
Visual Design

• Focused on a relief sculpture that hangs in the
  stairwell entrance between the 2nd and 3rd floor
  (associated with the library)
• Explored color schemes
• Explored design options on paper
• Explored other academic library sites
• Reviewed site goals
• Advertise Exhibits and New Services

14
Design Graphics

• Adobe Creative Suite Premium
• Photoshop

15
Design Template
16
Old Library Homepage

• Felix G. Woodward Library

17
New Library Homepage

• Felix G. Woodward Library

18
Prototype (Protosite)

• Prototype first full-scale and usually
  functional form of a new type or design of a
  construction
• we recommend building a Protosite, also called
  an HTML click-thru

Merriam-Webster Online Dictionary
Goto, K., Cotler, E. (2002). Web Redesign
Workflow that Works. Indianapolis, IN New Riders.
19
Why Create a Prototype?

• To test design feasibility (did the designers
  have the required technical knowledge?)
• To determine if the website could be represented
  properly in HTML format
• To seek feedback from relevant members of the
  university community (especially students)

20
Prototype Development

• Used FrontPage to create web pages and organize
  website
• Took photographs and created graphics
• Located scripts and modified code for rotating
  images, mouse rollovers, and the catalog search
  box
• Used trial version of menu software to create
  main navigational menu

21
Locating scripts code

• Library search box Sheridan Libraries (John
  Hopkins)
• Image (webpage) rotation free script from
  Automatic Labs (website now unavailable)
  requires PHP
• Image mouseover JavaScript W3 Schools
• Main navigational menu Free Trial download for
  Open Cubes Visual Infinite Menus

22
Prototype Review

• Prototype reviewed by the university website
  designer (member of public relations department)
• Meeting to discuss prototype with Library
  faculty, staff, and student workers
• Focus Group consisting of APSU students

23
Focus Group Questions

1. Name one of our frequently used databases.
2. Access your library account.
3. Who is the subject specialist or library liaison
   for the Music Department?
4. How would you contact a specific member of the
   Library verses asking a librarian a question?
5. How do you look up information regarding
   government publications?
6. How quickly can you find your information?
7. Is the information logically organized? If no,
   what needs to be changed?
8. Compared to the old interface, is the new
   interface easier for you to find information? If
   no, what needs to be changed?
9. Are you satisfied with the new Web site design?
10. Do you have recommendations for improvements?
11. What do you like and do not like?
12. What else you would like to see on the Web site?

24
Prototype Feedback

• Students provided feedback regarding colors,
  screen resolution, and desired content Screen
  Resolution Test
• APSU web designer provided a graphic with an
  official university logo
• Staff made recommendations concerning priority of
  menu items, categorization of items under main
  menu, and the label for the library catalog.

25
Prototype Recognition
26
Production

• Modifications made to prototypes based on
  feedback
• Purchased software used to create main menu (Open
  Cubes Visual Infinite Menus)
• Resolved differences in prototype appearance
  among various browsers
• Created template for new internal web pages and
  modified existing pages to match

27
Production

• Weeding of outdated and unused items
• Transfer of new and existing HTML files to new
  web server
• Check for functionality (modifications to ASP
  forms and other scripts were necessary)
• Validate code using W3C Markup Validation Service
  located at http//validator.w3.org/

28
Launch

• Introducing users to a redesigned website can
  require some preparation of expectations. Users
  may not know what to do when they are suddenly
  confronted with a new look or navigation
  structure. Therefore, you should communicate any
  planned changes to users ahead of time

U.S. Department of Health Human Services.
(2006). Research-Based Web Design and Usability
Guidelines.  Washington D.C. U.S. Dept. of
Health and Human Services. Retrieved
January 15, 2007, from http//www.usability.gov/pd
fs/guidelines.html.
29
Launch Advertisements

• Ad placed on existing homepage several weeks
  before launch
• Advertisement made on the universitys e-mail
  announcement system after launch
• Information sessions held for APSU faculty
  members at start of Fall Semester

New Library Website Coming Soon!Ad location on
old homepage
30
Launch Procedures

• Activated new web server containing modified HTML
  files (no classes in session)
• Alias domain name was created and set for target
  URL (homepage) on new server
• Testing for appearance and functionality was done
  on various browsers and screen resolutions
• Depending on the users ISP provider, the new
  site may not appear until their cache has expired

31
Maintenance

• Created Website Policy to designate maintenance
  responsibilities
• Created Procedures for New or Substantially
  Revised Web Pages to regulate new additions to
  the website and help maintain integrity.
• Provided template for creation of new web pages
• Periodically check for broken links and outdated
  content

32
Maintenance
Announcements
33
Future Development

• Investigate website analysis software
• Provide a blog to announce new services and
  policy changes (Ex Electronic Resources _at_ APSU
  Blog)
• Investigate link-checking software to discover
  broken links
• University may move to a new content management
  system (not compatible with Front Page)

34
References

• Ball, J., Roby, J., Senica, V. Staggs, B.
  (2006). Advertising Plan for the Felix G.
  Woodward Library. Clarksville, TN Austin Peay
  State University - Marketing 4310.
• Bean, T., Davis, K., Jones, B., Meisch, R.
  (2006). Use Your Peay Perks and See How the
  Library Works. Clarksville, TN Austin Peay State
  University - Marketing 4310.
• Bellinaso, M., Hoffman, K. (2003). ASP.NET
  Website Programming Problem, Design, Solution.
  Indianapolis, IN Wiley Sons, Inc.
• Bishop, B. (1998). Strategic Marketing for the
  Digital Age (pp. 13-29). Toronto, Canada
  HarperCollins Canada.
• Byers, J., Flournoy, J., Jerrim, C., Rascoe, T.
  (2006). Advertising Proposal for APSU Woodward
  Library. Clarksville, TN Austin Peay State
  University - Marketing 4310.
• Chumbley, J., Ham, T., Harriman, J., Harris, M.,
  Henson, K. (2006). Advertising Plan for APSU
  Library. Clarksville, TN Austin Peay State
  University - Marketing 4310.
• DeBolt, V. (2005). Integrated HTML and CSS A
  Smarter, Faster Way to Learn. San Francisco, CA
  Sybex Books.
• Dudas, M., Blair, R., Savage, B., Kelly-Rich,
  M. (2006). APSU Library Advertising Strategy.
  Clarksville, TN Austin Peay State University -
  Marketing 4310.
• Felix G. Woodward Library. (2007). Retrieved
  April 11, 2007, from http//library.apsu.edu
• Goto, K., Cotler, E. (2002). Web ReDesign
  Workflow that Works. Indianapolis, IN New Riders
  Publishing.

35
Questions?

• Thank You!