Printer-friendly Version
 

 

Tennessee Libraries

Volume 57 Number 1

 2007

 

Redesign for Success: Developing a Student Centered Website

Gina Garber
Digital Services Librarian

Michael Hooper
Electronic Resources Librarian

Austin Peay State University

Conference Abstract: Learn how Austin Peay’s Webmaster Team developed a new Library Website which focused on end-user satisfaction,  a student-centered site.  See the model they followed that included Analysis, Design, Prototypes, Production, Launch, and Maintenance. Hear how conducting a variety of focus groups contributed to the successful end product.


 

About the Authors

Gina Garber, Digital Services Librarian and Michael Hooper, Electronic Services Librarian are librarians and assistant professors at Austin Peay State University (APSU). These librarians actually have a lot in common. Before they became librarians they both were employed by academic libraries to process and manage print and electronic Reserves. Garber was a library assistant at APSU and Hooper was a library assistant at Middle Tennessee State University. They didn’t know each very well until they took a couple of classes together at the University of Tennessee’s School of Information Science. A short time later, Hooper was hired at APSU’s Felix G. Woodward Library where they shared office space.

 Garber and Hooper were hired within the same 2003/2004 academic calendar year. As a result of a major reorganization within the library, they became the co-web administrators during the summer of 2006 with the responsibility of redesigning and maintaining the library’s website. In spite of what their job titles might imply, they were faced with a steep learning curve and almost no experience in building websites. In fact, their experience was limited to one class they both had in graduate school called, “Information Network Applications,” taught by Dr. Gretchen Whitney who challenged each and every one of her students to do their very best. They shamefully didn’t appreciate this class until they were challenged with redesigning the library’s website. Without the knowledge base gained in this class they would have been at a greater disadvantage taking on this endeavor.

Introduction

Over the past five years APSU has undergone substantial growth, building its student population from 7,000 students to just fewer than 10,000 students. Like many libraries, not only are the librarians providing service for traditional students on campus but an increasing number of online students too. All are affected by the library’s website. At first, Garber and Hooper thought they were only creating basic html, cascading style sheets, and adding a few images. They had no idea that challenges lurked around the corner. They quickly discovered that redesigning the library’s website is just as much about marketing and usability as it is about incorporating design elements.

This program outline covers why Garber and Hooper decided to completely redesign the site. Explained is their approach in the analysis, design, prototype, production, launch, and the web maintenance stages.

Background

Figure 1. Factors that indicated change was necessary

 

Listed in Figure 1 are five main factors that indicated a more complete redesign of the library website was necessary. At the time of the original library web administrator’s resignation, the website had already been labeled ineffective and outdated by students who frequented the library. Students let the library know they wanted a change through comments at public service points, through bibliographic instruction, and through the “Tell Us” email link where students submitted comments anonymously to the library director. They indicated that the homepage was too wordy, contained too much text, and was poorly designed. Some of the librarians also discovered that information was buried within the site and couldn’t be accessed through the present hierarchical scheme. Furthermore, no policies or procedures were in place regarding the maintenance of the site. Look at these factors in more detail.

Once the original library web administrator resigned, no one was maintaining the library website, which led to anyone with access to the web authoring tool and the root directory changing content or publishing new pages to the library website. It became a free for all by the librarians with no checks or balances to maintain the site’s integrity in place. Here are three examples discovered within the website:

Example 1: Library Test Collectionhttp://morris.lib.apsu.edu/library/3_6testpolicy.htm

  • This is a poorly developed webpage. This page is incorrectly titled Agriculture Collection Dev Policy which is displayed on the title bar in the browser. However the content title is incorrect too. The title reads Woodward Library Test Collection Policy. The correct title should read Felix G. Woodward Library Test Collection Policy.
  • There are too many fonts on this page. Some of them are italicized and different sizes, which is distracting.
  • There are issues with bullets, tables, HR tag (horizontal rule) and line spacing.
  • The footer takes up nine lines which is bulky and a waste of webpage space.

 Example 2:Woodward Library Gift Policy http://morris.lib.apsu.edu/library/Woodward%20Library%20Gift%20Policy.htm

  • Example 2 is of poorer quality than Example 1. This is another inadequately developed webpage that builds on the problems from Example 1 (title, font, footer, bullets, etc...). The content is not within the library website’s header, footer, or sidebar. It is floating on the page.
  • Additionally, the margins and page justification are not set correctly.
  • The red is not APSU’s official RGB 164, 9, 54 red color, and
  • The web address has spaces within the title.

Example 3: Humanities 1010 Instructionhttp://morris.lib.apsu.edu/library/3_9heritage.htm

  • Example 3 is of poorer quality than Example 2. Again, this example builds on the problems from Example 2 but is unacceptable (No header, footer, sidebar, content is floating, etc…).
  • Additionally, there is no contact information on this page.
  • There is a HR tag (horizontal rule) in the middle of the content.
  • The links are not explained, they are just titled, and
  • Poor representation of the library and university.

These three examples were not staged, but are actual web pages discovered during the content audit.

Figure 2. Marketing 4310 project

 

Librarians partnered with the School of Business’ Marketing 4310 class, taught by Dr. Carmen Reagan, School of Business Professor, to bring ideas from the students and classroom to the library from a business perspective (see Figure 2). This main class project included five advertising strategies that students presented to the library staff at the end of the semester. Each strategy included marketing objectives, relationship of advertising to library usage, consumer benefits, communication and more. Librarians were able to analyze the strategies and overall feedback from the students. Figure 3 shows what Garber and Hooper learned about the library’s website.

Figure 3. Results of Marketing 4310 project

Comments from students coupled with the advertising strategies were very helpful in identifying the changes that students wanted to see in the new library website.

Poor usability

Students indicated that they wanted the databases organized for easier access. In the original database access point, students had to click on the dropdown arrow to select a database. This was confusing because some students thought the library only subscribed to nine databases. Students missed the List of All Databases link on the menu that went to the complete listing of databases. Furthermore, much of the information had to be found by using the site map. There were three links to Library Reserves on the library homepage; however, finding those links seemed to be difficult for students. Too much text on the homepage made it difficult to navigate and find needed information. This is an excellent example of information overload.

Examples 1 and 2: Database Access and Library Reserves http://morris.lib.apsu.edu/

Too Much Text on the Library Homepage

The following are three homepages that at one time were active and used by the library before the present redesigned site. Example 1 is the active homepage when the former web administrator resigned from the library. When opened, the user’s eye travels to the image of a student studying in the library. This is the least important area of the page. As you see in Examples 2 and 3, the pages become cluttered with text, a variety of fonts and colors, and strange positioning of content within the page, evidence that even mini redesigns were not enough. It was time for a major website redesign for the library.

Example 1: Library Homepage (original design) http://morris.lib.apsu.edu/defaultold.htm

Example 2: Library Homepage (mini redesign A) http://morris.lib.apsu.edu/default2.htm

Example 3: Library Homepage (mini redesign B) http://morris.lib.apsu.edu/defaultilltest.htm

No Website Policy

There were no policies or procedures in place to govern what content could be published or to keep the website uniform for esthetic purposes. Guidelines for the university’s website were discovered; however, the library operates separately when publishing and maintaining their site. Therefore the library needed to implement policies and procedures that would aid librarians in maintaining the site and be within the guidelines of the university and governing board (Tennessee Board of Regents). Policies and procedures will be covered again during the maintenance stage of the redesign process.

Analysis Stage

During the Analysis Stage which consisted of gathering information, Garber and Hooper addressed many of the expectations for the project. The Analysis Stage was time consuming. Organization early on was the key to the success of the project. They worked to identify

  • the library’s requirements
  • the library users
  • Garber’s and Hooper’s limitations
  • the limitations of the library
  • the web pages that needed to be revised, archived, or deleted

The website redesign could not inhibit or interfere with users’ research. Therefore they had to set a reasonable time table to complete the project. The website redesign needed to address students’ requests and proposals to make the site more user-friendly. Students were a priority; however, the library’s services go beyond students. The library also serves faculty, staff and local community members. Pointed out during the Analysis Stage was the library staff member who serves other library staff via the website.

Garber and Hooper recognized they only had one course in web design and some on-the-job training with Microsoft FrontPage. Collaborating on this project made the process easier because of their strong collegial relationship. In addition to learning more about web design, they also continued with their normal librarian responsibilities. They were working with no budget, although a purchase request could be submitted if justified.

Every page was evaluated for content. The decision to keep content and transfer to the new site was made by looking at the date created/last date updated, owner, incoming/outgoing links, etc… Pages that needed to be updated or modified were identified and split between the Garber and Hooper. Discovered were some pages that were beyond being retired or archived. Those pages were deleted.

Programming Needs

The backend and programming needs were identified. The following were used in the website redesign project: Microsoft Active Server Pages, Cascading Style Sheets (CSS), JavaScript, PHP, Dynamic Navigation, and Microsoft FrontPage. NOTE: A new server was purchased before the website redesign project began since the old server was at its end of life.

Conceptual Design Stage

This process required Garber and Hooper to do some serious brainstorming on both creative and technical levels. They created and revised over and over until they thought they had a good product. At this point they shared their work with the university’s web administrator to get feedback.

They looked at defining smart design which is covered in Web ReDesign|Workflow that Works by Goto & Cotler. During this process they discovered developing a design was much more than a pretty interface. It had to follow the site objectives while being functional. Did the site serve the user’s needs? Was it functional and fast loading? They discovered in this process that less was more.

They kept reviewing their site goals. What did the students want in their library site? The bottom line was that most wanted a clean, organized site, easier access to information, with trendier graphics. While keeping the site goals in mind, Garber and Hooper required the site to be functional, fast-loading and browser friendly.

While achieving the four areas above, they also developed concepts which looked at the colors and again put rough ideas on paper and tested them on screen. They took their designs to faculty meetings and talked with staff members.

Visual Design

Garber and Hooper were bewildered on what to focus the visual design around. Priority was placed on connecting the design to the physical library. They focused on a relief sculpture that hangs in the library stairwell entrance between the second and third floors. Professor Emeritus of Art, Olen Bryant, a well-known sculptor and educator at APSU created the relief sculpture. Bryant had recently received the Tennessee Distinguished Artist Award and was honored at the Schermerhorn Symphony Center in Nashville. Garber and Hooper decided to focus the design around this piece called “Seeds.”

Color schemes coupled with design ideas were put on paper. During this design phase Garber and Hooper reviewed the site goals once again. Color schemes were explored by looking at the university colors, athletic uniforms, and letterhead designs. They also explored other academic library site designs. They evaluated what design elements to avoid and what elements to investigate further that work well. For example, one noticeable problem with many academic library sites is the amount of text on homepages. Garber and Hooper took this opportunity to explore how to advertise new services and exhibits on the homepage without having to add more text to the page. The next slide shows the approach.

Graphic Design

Adobe Creative Suite Premium was used to create graphics that were turned into JPEG images. These images were used to advertise new library services such as wireless printing, instant messenger, the digital library, exhibits, events, etc. (Figure 4) Each image is a link that takes the user to a page with more information. This works well with the rotating homepage that will allow multiple images to be viewed by users. Each time the user refreshes the page, or returns to the homepage, a new image will appear.

Figure 4 Graphics for new website

Design Template

Once the foundation was laid for the site, Garber and Hooper were able to build a site template (Figure 5). The template included CSS, HTML, JavaScript, a navigational menu, header, footer, and an area to add content. Once completed, they could populate the template with content. This template was saved in every folder as the designated page within the site for colleagues to create new content, while at the same time, maintain the site’s integrity.

Figure 5. Site template

Compare templates by looking at the old library homepage (pre-web redesign) at http://morris.lib.apsu.edu/ and the new library homepage at http://library.apsu.edu/.

Prototype (Protosite) Development

The next step after the completing the design stage was to develop a prototype. As the definition for the word prototype shows, a development of a prototype is a standard step in most types of construction. For example, if you were going to build an airplane, you would certainly want to test a prototype for safety before taking off on an actual flight. Garber and Hooper applied this same concept to website construction and created a prototype for the proposed website redesign. In some literature, development of a prototype for a website is referred to as a “protosite” or “HTML click-thru”. This is an excellent way to describe the first functional website that was developed based on the proposed design.

Building a “protosite” is listed as optional in the book Web Redesign: Workflow that Works, but Garber and Hooper knew that was a required step due to the reasons listed on this slide. At this point, the design only “looked good on paper”. A functional website was needed to determine how the visual aspects of the design would appear when translated into HTML format. In addition, a prototype was required to determine if the designers could create a website that was suitable for use by students and all other members of the Austin Peay State University community.

Hooper and Garber developed the prototype using Microsoft Office FrontPage, the HTML editor and web site administration tool for which the University has a site license. No additional purchase was required for this resource, but it was necessary to modify the HTML created by this software to improve appearance and customize features of the prototype. To make the website functional it was necessary to complete the following steps:

  • take photographs to make graphics,
  • locate scripts to enhance the website,
  • download and learn to use trail versions of the software used to create the navigational menu

Locating Scripts and Code

One way to find code for your site is to view the source code for web pages that contain features you find desirable. Since the design for the prototype contained a search box for the Felix G. Woodward Library online public catalog on the home page, the web was searched for academic libraries using the same type of OPAC as APSU (SirsiDynix Horizon). The homepage for Sheridan Libraries at John Hopkins University (http://www.library.jhu.edu/) was discovered to contain a box for searching their Horizon OPAC. After viewing the code for this feature, Hooper and Garber were able to make modifications to implement a similar component on the redesign prototype for Felix G. Woodward Library.

Many websites such as The Java Script Source (javascript.internet.com/) offer free “cut and paste” scripts that can be incorporated with HTML to enhance your website. Hooper and Garber modified a popular script for an image mouseover found at the W3 Schools website to serve as a way to enhance the icon for the APSU “Ask a Librarian” service.

The software used to create the main navigational menu is called Visual Infinite Menus by Open Cube. Screen shots and a description of this software can be found at http://www.opencube.com/im_overview.html. This software has been used by corporations such as Best Buy and Fed-Ex to create website navigation. It is very detailed software and some experimentation is required to fine tune and properly insert created menus into a website.

Prototype Review

Several APSU community groups were chosen to review the prototype, including  the university website designer (also a member of the public relations department); library faculty, staff, and student workers; and APSU students.  Most consideration was given to feedback gathered from the student focus group because of the desire to create a student centered website; however, valuable feedback was received from all participants. Of course, suggestions from library employees also merited much consideration because they use the library website on a daily basis to provide instruction, to provide assistance at the reference desk, and to accomplish other library related tasks. Finally, Hooper and Garber recommend having a member of the campus public relations department review the prototype before it is launched. This step will confirm that the redesign for the library website properly represents the home institution and will help make sure the prototype design complements possible changes to the university website.

Shown in Figure 6 are the questions from a handout provided to each member of a diverse focus group of Austin Peay students ranging from freshman to graduate students. The students recorded their responses to each question by writing them on the handout. One of the most important responses to review was the answer to question number eight. If the answer is no to this question, it is time to restart the process and build a new prototype.

Figure 6. Focus Group Questions 

Figure 7 contains some examples of feedback provided from each prototype review, including a graphic provided by the APSU web designer to help visually associate the library website with the theme for the University website. Some students from the focus group wanted to be able to view the library web page using portable devices such as personal digital assistants, while others mentioned a desire to use widescreen monitors while surfing the internet; therefore, it was necessary to make sure the prototype appearance was the same among all screen resolutions. An easy way to determine website appearance is to use the Web Page Screen Resolution Simulator located at http://www.webconfs.com/web-page-screen-resolution.php.

Figure 7. Prototype Feedback

A thank you letter was provided to each student who participated in the focus group to review the prototype. This was just a small token of appreciation for taking time out of their busy schedule to provide excellent feedback (see Appendix A).

Production

It should be noted that some modifications were made to the prototype after the first and second reviews of the website redesign. For example, obvious mistakes were corrected and some new features were added immediately based on the suggestions provided. However, most revisions were not completed until the production stage of website redesign. Figures 8 and 9 show some of the activities completed during this stage.

Figure 8. Modifications

Figure 9. Modifications, continued

All web documents were reviewed and items deemed unworthy of archiving were deleted. The remaining files were transferred to the new web server. Due to the fact that the transfer to a new server created a new URL address for the website, it was necessary to modify some scripts and HTML documents, such as existing ASP forms, to ensure continued functionality.

In the final stages of the production process, the HTML prototype for the redesign was validated using the W3C Markup Validation Service located at http://validator.w3.org/. This process checked the web documents created by the designers for conformance to W3C recommendations. The designers modified the code for the prototype until all errors were cleared and the document was declared as valid HTML 4.01 Transitional. This validation is an important process because it ensures the redesign prototype can be displayed properly on adaptive technology devices.

Launching the New Website

This quote (see Figure 10) from Research-Based Web Design and Usability Guidelines published by the U.S. Department of Health & Human Services stresses the importance of announcing a website redesign to users before the launch of the new website.

Figure 10.  Quote from Research-Based Web Design and Usability Guidelines

Garber and Hooper employed three methods (listed in Figure 11) to advertise the redesign of the Felix G. Woodward Library website. Placement of a launch advertisement on the previous library website can be viewed at http://morris.lib.apsu.edu/. The announcement was placed on the website about three weeks before the anticipated redesign launch date. Shortly after the launch, faculty members were invited to attend information sessions where Hooper provided an overview of the redesign and gave attendees an opportunity to ask questions concerning the new website.

Figure 12. Launch Advertisements

Due to the fact that the transfer to a new server created a new URL address for the website, an alias domain name (http://library.apsu.edu) was created to match the alias from the previous server. This procedure enabled existing bookmarks and publications containing the library URL address to remain unchanged. It should be noted that many Internet Service Providers use an extended cache system that may not expire until twenty-four hours have passed. For this reason, some users may not be able to view the redesigned website until several hours after the official launch date.

Figure 13. Launch procedures

Maintenance

To maintain the integrity of the website redesign, it was necessary to implement a website policy (http://library.apsu.edu/library/policies/8_01.htm) which designated maintenance responsibilities such as updating content and creating new pages on the website. To ensure all new pages were free from HTML and spelling errors, contained the proper features to match the redesign theme, and were stored in the proper directory on the web server, Hooper and Garber decided it was necessary to review these pages before they were made available to the public. To support the new website policy, website procedures http://library.apsu.edu/library/policies/8_01_1.htm) were developed and implemented so library employees would be able to create and submit web pages for review as needed. To assist library employees with the creation of pages, a template was made available within FrontPage which requires little knowledge of HTML to add basic content. An online example of this template can be found at http://library.apsu.edu/template.htm.

An email message (see Appendix B) was sent to all Felix G. Woodward Library faculty and staff to announce the new and revised web pages on the library website. It is important to keep library employees informed of such changes so they will be able to provide students with the most current information. In addition, it is important to remember that library employees involved with instruction may have a lesson plan or online tutorial based on one of the modified web pages.

Future Development

Possibilities for future development include finding new website analysis software to help determine what times the website is used most often and which pages are visited most often. In addition, it may be necessary to purchase or download free software that discovers broken links within the website. A library wide blog similar to the blog Hooper created for library employees to keep up with changes to electronic resources (http://eresourcesapsu.blogspot.com/) may be created to announce changes and promote new library services to the entire campus community.

Finally, it will soon be necessary to manage the website using a new content management system which is being implemented for the entire university. This system will allow website administrators to give specific library employees permission to modify certain pages within the library website. For example, a librarian in charge of instructional services could be allowed to modify pages related to instruction, but not the library homepage or web pages created by other departments.


Bibliography

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


Appendix A. Focus Group Thank You Letter

Letter


Appendix B. Announcement

Appendix C. Powerpoint Presentation

Download the Powerpoint Presentation for this paper.

Contact Us

P.O. Box 241074
Memphis, TN 38124-1074
Phone: 901-485-6952
Email: arhuggins1@comcast.net

Copyright © 2011 Tennessee Library Association. All Rights Reserved.