Redesign for Success: Developing a Student-Centered

Website

Gina Garber, Digital Services Librarian

Michael Hooper, Electronic Services Librarian

• Background

• Analysis

• Conceptual Design

• Prototypes

• Production

• Launch

• Maintenance

• Questions

Program Outline

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

No one was maintaining the website

Example 1: Library Test Collection

Example 2: Gift Policy

Example 3: Humanities 1010 Instruction

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…

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”

Background

Poor usability of materials and resources

Example 1: Library Reserves

Example 2: Database Access

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)

Background

No website policy and procedures

Background

• Identify Users

• Identify Users’ Needs

• Identify Web Administrators’ Limitations

• Identify Library’s Limitations

• Auditing Web Pages

Analysis

• Microsoft FrontPage

• Microsoft Active Server Pages

• Cascading Style Sheets

• JavaScript

• PHP

• Dynamic Navigation (global navigation)

Programming Needs

• Beginning the Creative Process

• Defining Smart Design

• Reviewing Website Goals

• Developing Concepts

• Presenting Designs and Gathering Feedback

Conceptual Design

Goto, K., & Cotler, E. (2002). Web Redesign: Workflow that Works. Indianapolis, IN: New Riders.

• 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

Visual Design

• Adobe Creative Suite Premium

Photoshop

Design Graphics

Design Template

Felix G. Woodward Library

Old Library Homepage

Felix G. Woodward Library

New Library Homepage

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

Prototype (Protosite)

Merriam-Webster Online Dictionary

Goto, K., & Cotler, E. (2002). Web Redesign: Workflow that Works. Indianapolis, IN: New Riders.

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

Why Create a Prototype?

• 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

Prototype Development

• 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 Cube’s Visual Infinite Menus

Locating scripts & code

• 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

Prototype Review

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?

Focus Group Questions

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

Prototype Feedback

Prototype Recognition

• Modifications made to prototypes based on feedback

• Purchased software used to create main menu (Open Cube’s Visual Infinite Menus)

• Resolved differences in prototype appearance among various browsers

• Created template for new internal web pages and modified existing pages to match

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/

Production

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

Launch

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/pdfs/guidelines.html.

• Ad placed on existing homepage several weeks before launch:

• Advertisement made on the university’s e-mail announcement system after launch

• Information sessions held for APSU faculty members at start of Fall Semester

Launch Advertisements

New Library Website Coming Soon!

Ad location on old homepage

• 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 user’s ISP provider, the new site may not appear until their cache has expired

Launch Procedures

• 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

Maintenance

Maintenance

Announcements

• Investigate website analysis software• Provide a blog to announce new services

and policy changes (Ex: Electronic Resources @ APSU Blog)

• Investigate link-checking software to discover broken links

• University may move to a new content management system (not compatible with Front Page)

Future Development

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.

Information Network Applications. (2007). Retrieved April 11, 2007, from http://www.sis.utk.edu/courses

Nielsen, J. (2000). Designing Web Usability: The Practice of Simplicity (pp. 16-261). New York: New Riders Publishing.

Opencube: The Menu Company. (2006). Retrieved January 15, 2007, from http://www.opencube.com/index.html

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/pdfs/guidelines.html

W3C Markup Validation Service V 0.7.4 (2007). Retrieved April 11, 2007, from http://validator.w3.org

References

Thank You!

Questions?