Building a New Academic Library Web Site

The Benner Library Web site at Olivet Nazarene University was targeted for an update and those responsible desired a systematic, efficient approach to the process. The project needed clear goals and careful coordination of all stakeholders, including all levels of patrons, library professionals and staff, and university administrators. A team composed of web developers, programmers, and graphic designers accomplished the technological process, but communication between team members and stakeholders was essential. The methodical approach proved to be time-consuming, but effective.


Building a New Academic Library Web site
The Benner Library Web site at Olivet Nazarene University was targeted for an update and those responsible desired a systematic, efficient approach to the process.The project needed clear goals and careful coordination of all stakeholders, including all levels of patrons, library professionals and staff, and university administrators.A team composed of web developers, programmers, and graphic designers accomplished the technological process but communication between team members and stakeholders was essential.The methodical approach proved to be time-consuming, but effective.

Recognizing the Need
Evans and Ward (as cited in Corob, Rezes, Beesmyer, Papendick, & Richardson, 2013) emphazised identifying both strengths and weaknesses of the existing site, and the opportunities afforded by the update process.On the positive side, overall the navigation of the existing library Web site was efficient and simple.However, the look and feel was dated, as was the home page layout.There were many uncategorized choices.Labels often represented professional library terminology rather than patron friendly vocabulary.Users could be overwhelmed by the number of choices on the home page.Behind the scenes, the structure had gotten out of control.There were many patches and some redundant content.Content owners had come and gone making ownership uncertain.The Web site had even become an archive for files that no one claimed.As Nielsen and Pernice (2009) aptly quipped, "Web pages are not bank accounts: Full is not better (p.47)."It was time for an overhaul to eliminate problems, integrate new technologies, and better represent the patron focus.

Establishing Goals
The goal for the Library Informatics Department was to redesign the library Web site, creating a modern interface that would support the university's academic focus.User-friendly navigation without library jargon was the first priority.Kim (2011) noted that Web site design and Web site performance are closely correlated and that user orientation is essential."If a Web site helps users complete their tasks, they are likely to use (it)" (p.99).Students expect to find what they are seeking and identify useful resources in a matter of seconds.This patron "trend towards (sic) 'fast and easy '" and "user satisfaction" (Thomsett-Scott, 2006, p. 517-8) drove the priorities.A struggling patron needed to be able to access help quickly.Return visits to the site and continued use of research tools defined success not only for the library Web site but for the university as a whole--especially in terms of retention (Haddow, 2013).As Grallo, Chalmers, and Baker (2012) observed, the library and its Web site serve as valuable links to campus information as well as to student research.Lombard (2012) correlated library influence with college recruitment, indicating a positive impact of library services, thereby providing further justification for a student-oriented Web site.The Web site had to function efficiently to facilitate user search processes.
Technical decisions were guided by the user priority.Developers used technological skills to create a simple, attractive interface that conformed to html standards.The new site was designed to be compatible with the devices students commonly used (Mahmood, K., & Richardson Jr, J. V., 2011;Nowlan, G., 2013).All resources had one home link to facilitate easy updates and necessary changes, and to avoid frustrating link maintenance (Randtke & Burrell, 2012).Resources referenced in multiple locations on the Web site would be directed to that single location so that users would not be confused by conflicting information.

Defining Parameters
Step 1: Identifying the team members.
The Informatics Librarian was the project coordinator for the library Web site update.
Her overall tasks were to assure that the new site conformed to university standards and to coordinate the technology and communication efforts with the needs of all levels of participants.
Her involvement in the plan, design, and implementation of the existing library Web site provided her with a solid frame of reference for the process.
The Informatics Librarian researched usability studies.She had participated in usability research in a practicum setting for MLIS (Masters in Library & Information Sciences) at the University of Illinois.In that role, she recommended strategies for improving one section of the university library Web sites.For the current project, she used informal focus groups, previous web statistics, and informal competitive analysis, as a basis for decision making.Since "attention to stakeholder concerns is crucial" (Bryson, 2011, p. 48), she reviewed the Benner Web site development process to ensure objective representation of the interests of stakeholders and customers as a whole.She understood the pros, cons, pitfalls, and gray tape involved in that process.Kim (2011) affirmed the value of input from immediate stakeholders in addition to that of the "secondary sources" (p.100), i.e., the webmasters and consultants who would identify technical flaws and contribute to design.
A total Web site redesign required the participation of people with many skills, including up to date knowledge of standards and technologies.Five key members were added to form the design team, each with a specific area of expertise.The Library Web Applications Manager had years of experience with different programming languages.His technology understanding guided the student programmer in the actual design and functionality of the site.As a student completing a Bachelor's degree, he also represented the user viewpoint of the adult student operating in a traditional undergraduate setting.
The Library Informatics Assistant had the computer and hardware expertise required for making functionality decisions such as what browsers should be supported with the Web site.
His day to day interaction with the staff, addressing their technology issues, made him a key representative of the library staff perspective.At the time of site development, he was enrolled in the Masters in Business Administration program so he represented the perspective of a graduate student as well.
Three undergraduate student workers rounded out the team.One student was a selftaught web designer and programmer who had been designing and creating Web sites for a few years.He had worked with the newer trends, software, and web coding.A student graphic designer also joined the team.She brought experience from other photography and graphic design positions both on campus and as a freelance designer.Her designs are found throughout our entire Web site.Finally, a student photographer, an art major, worked for months to provide attractive, representative photographs of the library.These students represented usability from the undergraduate perspective.All three operated as professionals, offering opinions, listening objectively to other's ideas, and humbly following instructions for decisions with which they did not always agree.
The seven professional librarians were encouraged to contribute to the decision making, especially as related to content of the site.Their contributions would be crucial to the success of the Web site.The opinions of the staff were officially included in the process by way of their librarian supervisors.Bryson states, "The support and commitment of key decision makers are vital if strategic planning in an organization is to succeed" (2011, p. 47).Input from library professionals and staff was critical to developing a product that would serve them well.
The library Web site needed to represent the missions of the university and of the academic library.The university mission statement reads: "We seek the strongest scholarship and the deepest piety, knowing that they are thoroughly compatible (and) … a Christian environment … where not only knowledge but character is sought."(Olivet Nazarene College, 1915).The Library's Mission Statement represents corollary concept: "Benner Library invests in scholarly resources, current technology, and knowledgeable staff in a Christian environment to promote student success, academic excellence, and life-long learning."(Benner Librarians, May 9, 2012).
The Informatics Librarian was familiar with university and library policies and procedures that applied to the look and feel of the Web site (Kim, 2011), as well as of other crucial factors that governed the process.These included: 1. Transitioning from the university Web site to the library Web site 2. Representing colors and graphics responsibly 3. Respecting all copyright laws including those related to graphics and photographs 4. Ensuring there were no privacy violations 5. Following any guidelines set by other organizations that were represented.i.e. the Federal Depository Library.6. Protecting library staff email accounts by not putting actual email addresses on the library Web site.
7. Ensuring that no personal information was placed on the library Web site.
Step 3: Evaluating the organization's internal and external environments.
External environments of like kind, both commercial and academic Web sites were used for informal competitive analysis to help identify the latest trends in functionality and web design (Aharony, 2012).External data was collected from a variety of listservs (web4lib, css4lib, LITA, ACL, code4lib), scholarly research, exploration of other academic and public libraries Web sites and policies, workshops, and online learning environments.These environments were analyzed and discussed extensively, specifically for technological trends and functionalities, user-friendly library terminology, and usability.
The internal environment (key stakeholders and library users) was represented by web statistics, library staff feedback, past patron feedback, and faculty requests.As Renz (2010) states, "care must be taken to assure a balanced view" (p.238), not merely the perspective of one personality or department.Collecting and analyzing the opinions and feedback of the key players in an objective way was critical to the process.A devil's advocate approach for each proposed trend, idea, and feedback (negative or positive) facilitated objective decisions.Each suggestion or negative vote was carefully considered in terms of the overall picture.

Executing the Plan
Clashes of emotions and opinions were inevitable in such an extensive project so the following proactive phases were followed in the hopes of minimizing conflict: Phase 1: Initial planning and mockup.
The Informatics Librarian discussed current reasoning for redesigning the previous Web site with an Informatics committee.Krug (2014) observed that "…if Web pages are going to be effective, they have to work most of their magic at a glance.And the best way to do this is to create pages that are self-evident or at least self-explanatory" (p.19) After establishing these and other basic parameters, she engaged the committee of library staff and undergraduate students, to discuss ideas for the new design, to study other library Web sites, and to research best practices.The following concepts were discussed: 1. Existing pages and functionality that should not be changed with the new design 2. Flaws that need to be corrected, including library jargon 3. New technologies that should be added such as mobile usability 4. Personal opinions, past experiences, frustrations, and successes related to the previous Web site.
Once each member of the committee had a thorough understanding of the Web site goals, each member was asked to submit a drawing of his vision of the home page for the new site, including important features and functionalities.Using these designs, a final electronic mockup was completed and submitted to the Librarians for review.The presentation reviewed the vision and goals for the new Web site and how these align with university and library mission statements.The librarians were given opportunity to ask questions and provide limited feedback regarding design and projected functionality.Their observations were recorded and discussed thoroughly by the team.
After the visual presentation of the site had been critiqued, the librarians were asked to change their focus to the content portion of the site.Some opinions and emotional responses were positive, others, negative."Designing links to look like links, and menus to look like menus, is relatively easy today on the Web.But organizing and naming them is one of the most difficult and time-consuming challenges for Web designers" (Nielsen & Pernice, 2010, p. 113).
Conflict can produce clarity and consensus and to that end the project coordinator facilitated these discussions playing devil's advocate, asking questions and taking comprehensive notes to bring back to the team.As mediator between the professional staff and the development team, she made most of the final decisions.She had to be careful not to sacrifice the good of the many for the good of a few to avoid allowing the loudest or strongest opinion to steer the project.
Since their area of contribution was mostly content oriented, the librarians focused first on the home page menu.Using previous labels and Web site links, an electronic card sort was designed for librarians so they could identify what links should appear with which labels, what links should have priority, which should be available on every page of the site, what links should appear on home page, and what links can be buried a little further down the site.(See Appendix A for results.)The librarians were guaranteed further meetings and input into the process.All issues and concerns were addressed with valid reasoning why they were or were not used on the new Web site.
Step 4: Formulating decisions and strategies The Informatics Librarian and Library Web Applications Manager spent hours working through all of the collected data from the card sort, compiling the information into a spreadsheet in Google Office (See Appendix B), and formulating a strategy for each issue.The student programmer was often involved in these meetings.If a decision could be made and was strongly supported, it was recorded and implemented.Some of the decisions required more discussion and research before a firm decision or strategy could be determined.
Every time something was changed or added to the new Web site, the decision was reviewed to make sure it still correlated with the current layout and vision.If a change were made, it was recorded along with justification of that change.Bryson (2011) states, "in order to secure passage of any strategy or plan, it will be necessary to continue to pay attention to goals, concerns, and interests of all key internal and external stakeholders" (p.63).When a decision was continually brought back to the drawing board, the leader had to stop to remind the key players, including herself, of the overall vision and goal in order to rethink the issue, maintain the integrity of vision, and keep all participants focused on the end goal.
Step 5: Building the Web site The development started with the process of determining a content management strategy and then developing a template based around the chosen strategy.The process of adding content had to remain fairly simple: code should not have to be repeated in multiple locations and the site had to easily integrate into existing systems used by the library.In most situations, content would be handled by using a prebuilt content management system (CMS) such as Wordpress or Joomla.Due to our unique needs, we chose to build a custom PHP system.Our system had to be very flexible in order to integrate with existing systems that manage some content and catalogs of e-resources.One of our two systems, Dynamic Content on Demand (DCOD) was available as an open source (OSS) product from our Web site.The other application was our own homegrown electronic resource management system (ERMS).
Designing and implementing a template was the next step.The site was intended to be useful and accessible across as many devices as possible, yet remain polished and aesthetically appealing.To accomplish this we implemented responsive design, progressive enhancement, polyfilling for browser support, and modular cascading style sheets (CSS).
With responsive design methods, the content of a site can adapt to fit to any screen size from a cell phone to desktop computer.The best approach is called mobile first: design for smaller screens initially, then adapt that design to fit larger screens.Google has a useful guide for getting started with responsive design called "Responsive Web Design Basics" (Google Developers, n.d.).When implementing responsive design, developers need to run different pieces of java script based on the size of the screen.This can be done using pure java script, but a java script library such as enquire.js(Williams, 2013) makes the process much simpler.
In the world of web development, different web browsers have different feature sets.
Most notable, older browsers don't support a lot of newer features.In order to use new features that are not supported by all browsers, we implemented a strategy called progressive enhancement.The basic idea is to first implement a functional version of a site that works on all of browsers (within reason), then start using the new features to make the implementation better, to enhance it.An example of this would be animations.It is more attractive to have menus animate open and elements move smoothly, but such animations are not required for functionality.In older browsers, the animations may not work, but the site must still be functional.A java script library called Modernizr (MIT, 2009(MIT, -2015) ) was used for progressive enhancement.Modernizr is extremely useful and lightweight, meaning it uses minimal code and processing.
Sometimes progressive enhancement is insufficient if a feature is not natively supported by a browser.In this case, a java script library, known as a polyfill, may exist that adds support to browsers.For example, to accommodate CSS media queriesthe cornerstone of responsive designwe used a java script polyfill, respond.js(http://responsejs.com/).However, since loading and using too many polyfills can negatively impact the performance of a Web site, a combination of libraries were used which load polyfills only when they are need.Modernizr (MIT, 2009(MIT, -2015) ) combined with yepnope.js(http://yepnopejs.com/)provided this flexibility.
Step 6: Presenting the first draft.
When all of these strategies and decisions had been implemented on the developing site, the in-progress homepage was presented to the Librarians as a first draft allowing the discussions to be based on a tangible product.After these players analyzed, complemented, and criticized the small details, they had a better vision of the big picture.They were asked to view the product with the following questions in mind: Did the new site appear to be in alignment with the initial vision, the ONU Mission statement, and the Benner Library Mission?Would it accomplish all that we set out for it to do? Would it be an improvement over the previous Web site?Was it ready for testing?
Once major content and navigational changes were made, the librarians were asked to present the same homepage to their library staff members to gather their responses.Each librarian submitted an email to the webmaster.(See Appendix C for some example responses.) The responses were mostly positive, but also overwhelming.The Informatics Librarian and Library Web Applications Manager spent more time working through each of the feedback emails, revising decisions, analyzing new issues, and documenting new developments.
Step 7: Completing the beta version.
The homepage took the most time because it was the shell for the entire site, but at this point we felt like it was ready and the secondary pages could be rolled out.Other Informatics student developers joined the process and helped transfer content from the previous site.The most time consuming part of this process was deciding what content to move and how to organize the directory.Communication with the other librarians was crucial.
Redesign for some of the secondary pages took more discussions with the web team along with a lot of trial and error.The Informatics Librarian, Informatics Web Application Manager, Student Developer, and Student Graphics Designer were key to choosing layout and designs for this page.The secondary pages also required extensive additional CSS code and new graphic designs.
Step 8: Testing by library personnel.
Informatics staff and student employees were the first to begin testing and utilizing the new Web site.When the Informatics Librarian felt that all the technology bugs had been smoothed out, the next rollout was to the entire library staff.Another meeting was held a week before they were given access and training to present and train on the new site.At this point, the Library Informatics student tutorial designers had to begin to update any tutorials that included screenshots or recordings of the previous library Web site.
Simultaneously, the key players ran accessibility tests to ensure that the site would accommodate students with disabilities.The parallel consideration of these elements would help the project coordinators achieve maximum functionality when the site was ready to launch.

Going Live
Initially, we intended to roll out a soft version to the public.Users would be able to try out the new site using a link from our previous site.However, thorough preparation and testing of the site proved to be quite successful, therefore we decided to skip this stage.We revised our plan to go live on a Sunday evening without a public beta version.We used the old Web site to announce the date for transition to the new.The library director sent out an email to the entire faculty, staff, and student body which advised them of the upcoming change and included a link to a tutorial demonstrating the new Web site (http://library.olivet.edu/help/Website/Web site.php).(See Appendix D to see the list of what going live involved.)