ISSN: 2474-3542 Journal homepage: http://journal.calaijol.org Redesigning Library’s Website with Springshare Products: A Case Study Rui (Jeff) Ge Abstract: This article chronicles the website redesign process of a medium-sized academic library using Springshare products, namely LibGuides CMS, LibAnswers, LibCal, and LibWizard, at Stockton University in New Jersey. The project was completed in such a short timeframe and with limited resources that the focus was placed on reconstructing the information architecture (IA) in order to establish the navigation system of the website. The topics of the rationale for the redesign, detailed procedures, lessons learned, and suggestions for future improvement are discussed. To cite this article: Ge, R. (2023). Redesigning library’s website with SpringShare products: A case study. International Journal of Librarianship, 8(1), 49-65. https://doi.org/10.23974/ijol.2023.vol8.1.287 To submit your article to this journal: Go to https://ojs.calaijol.org/index.php/ijol/about/submissions https://ojs.calaijol.org/index.php/ijol/about/submissions INTERNATIONAL JOURNAL OF LIBRARIANSHIP, 8(1), 49-65 ISSN: 2474-3542 Redesigning Library’s Website with Springshare Products: A Case Study Rui (Jeff) Ge, Stockton University, NJ, USA ABSTRACT This article chronicles the website redesign process of a medium-sized academic library using Springshare products, namely LibGuides CMS, LibAnswers, LibCal, and LibWizard, at Stockton University in New Jersey. The project was completed in such a short timeframe and with limited resources that the focus was placed on reconstructing the information architecture (IA) in order to establish the navigation system of the website. The topics of the rationale for the redesign, detailed procedures, lessons learned, and suggestions for future improvement are discussed. Keywords: Web Development, Website Redesign, Academic Library, Springshare, Web Content Management Platform (CMS) BACKGROUND The Richard E. Bjork Library at Stockton University has had a website since 2001. The website was hosted on a university server and developed and maintained by the university's IT service. During this period, several librarians had access to the backend of the system to maintain content updates. The first major redesign on Bjork Library's website was conducted in 2015, when LibGuides CMS was first introduced and became the library's web content management system. The LibGuides CMS is a “service as a service” (SaaS), cloud-based, web content management system (CMS) developed by Springshare, a library technology vendor. The redesign was led by a team of five librarians, who operated without a designated team leader to manage the process and keep the project on schedule. The homepage provided top-level navigation for the Resources, Services, Special Collections, Subject Research Guides, and About pages; clustered link lists and search boxes were grouped under three major columns; a group of four rectangle buttons was served as quick links to respective library services and resources; liaison librarian portraits were arranged in a grid with embedded links which, when clicked, would lead to their individual profile page (see Figure 1). Although subsequent revisions and a more recent version (see Figure 2) had achieved somewhat improvements compared to the 2015 version, the website had still been lacking effective global navigation. Many highly accessed resources and informative web pages were buried from sight. For instance, during the COVID-19 crisis, as remote services such as online study room Ge / International Journal of Librarianship 8(1) 50 reservations, Zoom-based research consultation booking, and virtual reference were activated, they needed to be easily findable by website users. Furthermore, even though Springshare had gradually adopted the responsive design concept for its products, if the library chose to customize the header and footer, they would still need additional coding in order to be fully mobile-friendly. In addition, since the campus was to be fully re-opened in the Fall Year semester, the library aimed to provide a better online user experience for its patrons and impress the campus community with a new look to its web presence. Considering the aforementioned and the limited timeframe involved (only 5 months from project inception until the beginning of the fall semester), the Library Technology Team, composed of five librarians (including the Web Services Librarian as project lead), believed a formal, full-scale redesign of the library's website was not an option. They decided that this redesign effort should have a focus on establishing the navigation system by re-evaluating the site’s information architecture (IA), reconstructing the home page and applying responsive design to the entire website (in particular the header and footer sections) during the summer months (May to August) of 2021. The results proved that the decision was quite practical. This article chronicles the redesign process, provides certain resources and tips, and concludes lessons learned, with an expectation that other libraries under similar circumstances may find them helpful in their website redesign process. Ge / International Journal of Librarianship 8(1) 51 Figure 1. Screenshot of the Library’s Homepage in LibGuides CMS in 2015 Ge / International Journal of Librarianship 8(1) 52 Figure 2. Screenshot of a Subsequent Redesign of the Homepage RESOURCE AVAILABILITY Any website redesign project for an academic library is a complicated process, even if all the necessary resources are available. At the time the redesign project was initiated, the website had been running on the LibGuides CMS platform for nearly 5 years. Apart from LibGuides, the library had also subscribed to Springshare's other applications such as LibAnswers, LibCal, and LibWizard to support the library's online reference service, research appointment reservation system, room booking module, hours calendar, webform submission, etc. The librarians and several library technicians had learned to use LibGuides CMS to create and maintain subject guides for liaison programs and LibAnswers for online chat reference. Although a few librarians and staff from the university's IT services had admin-level access to the system, the main Ge / International Journal of Librarianship 8(1) 53 responsibility of design and development had fallen to the library staff, only two of whom had web technical expertise and design skills, namely the Web Services Librarian and the Systems Coordinator. The Library Technology Team (Tech Team) was composed of the Distance Education Librarian, User Experience Librarian, Electronic Resources Librarian, Associate Director of the Library, Systems Coordinator, and Web Services Librarian, among whom the latter worked as the lead of the redesign project. The University’s Director of Information Systems and Business Intelligence was invited on as a consultant and participated in Tech Team's meetings on a regular basis, providing advice on the overall design and guidelines. In fact, the library was fortunate that their CMS is independent from that of the university (Omni CMS) and was encouraged to maintain that difference in the site structure and look and feel of the redesign, since many institutions require their library website to use the same content management system in order to achieve the same look and feel. This practice created a limitation, if not an obstacle, to the web design and development projects for the libraries. REDESIGN PROCESS Old Site Structure A library website serves as an essential gateway to all services, resources, electronic or physical, online reference platform (Silvis et al., 2019), and discovery layer of the library service platform (LSP) of a university's library. An effective information architecture (IA) of this "large, information-rich system," is critical to ensure the available resources and services are findable and easy to find (Silvis et al., 2019; Rosenfeld et al., 2015, p. 25). IA is defined as "the process of organizing information including defining site hierarchies, web content, labeling schemes, and navigation in a way that is easy for people to find, understand and manage the information" (U.S. Department of Health and Human Services, n.d.). The best practice for redesigning the information architecture (IA) of a website is to review the existing site structure before any redesign is done. In the case of Bjork Library’s redesign, the first step was to audit the web pages/guides. The Web Services Librarian exported all pages from the old website using a feature in LibGuides CMS called Export All Records and uploaded the exported CSV file in Google Sheets. The spreadsheet contained such fields as ID, title, URL, owner, group, status (published/unpublished/private), date of creation/update, friendly URL, and guide types, namely General-Purpose Guides, Subject Guides, Topic Guides, and Course Guides. Since the last three types of guides/web pages are generally created and maintained by subject librarians (guide owners) for liaison programs, the published General-Purpose Guides are those that most affected the site structure (in Stockton's case only). The spreadsheet also helped filter out, with ease and in a timely manner, the unwanted guides (webpages) that were not conducive to establishing the new site structure. According to the auditing results, the Web Services Librarian was able to create a site structure diagram for the Library's old website (see Figure 3). In this diagram, besides the homepage, all top-level guide pages were marked in yellow, while secondary- and tertiary-level pages were marked in green and blue respectively. Hyperlinks to and page ID of the web pages were also embedded for quick reference to each page. No subject guides or Special Collections Ge / International Journal of Librarianship 8(1) 54 guides were included in the diagram, since they contributed little to re-generating the overall site structure. Figure 3. Screenshot of a Diagram of the Old Website Structure New Site Structure 1. Card Sorting To help decide what pages should be included and what content should go into which categories in order to finally establish the new site/navigation structure, a card sorting exercise was conducted online based on the old site structure by the Tech Team members with Jamboard, a Google tool that enables the participants to label each card and drag/drop them into different categories or re- group/re-label them as needed. Each Tech Team member was assigned a copy of the card file showing the names (titles) of the web pages that reflected their category (primary/secondary/tertiary) and topics (labels) and was asked to re-group and/or re-label the categories/web pages. The exercise was expected to generate helpful results in creating a librarian- centered site structure for the website redesign. (see Figure 4) Ge / International Journal of Librarianship 8(1) 55 Figure 4. Screenshot of a Copy of Card Sorting Exercise in Jamboard 2. Best Practices The Tech Team also benefited from considering best practices in the website structure and homepage layout of other academic libraries with a similar scale. The special focus was on those websites that had a mega dropdown menu as their main navigation, since the Tech Team concluded that such a menu type would be ideal to present the library’s web content in a well-organized and effective way. Other best practices included, on the library's homepage, displaying a simple search box for finding the library's physical and electronic resources, opening hours of the major library services, quick links/icons that take users to the most popular resources or services, library news and events, and links to the library's social media. 3. Discussion and New Site Diagram Based on the results of the card sorting exercise, references to the websites of peer academic libraries, and discussions with members of the Tech Team, a spreadsheet was generated to reflect both the modifications to the old site structure and a draft of the new structure, including more detailed information, such as top-level and second-level menu items, link items under each second- level menu item, and the URLs of each link item (see Figure 5). The Web Services Librarian also added columns for collecting suggested actions from team members on whether to keep, remove, move the link item, or modify the label of the link item. A copy of the spreadsheet was distributed to each Tech Team member, who was asked to accomplish the suggested actions independently. Each member then presented their version of the spreadsheet for discussion until they finally reached an agreement on the new site structure. After Ge / International Journal of Librarianship 8(1) 56 some thorough discussions, the Library Tech Team finally agreed on a new site structure that best fit the library’s needs and created a new diagram (see Figure 6). Figure 5. A Copy of the Spreadsheet Used for Collecting Input on the New Site Structure. Figure 6. Screenshot of the new site structure diagram Ge / International Journal of Librarianship 8(1) 57 Design and Development 1. Wireframing Before any actual coding or development took place, the Web Services Librarian created two online wireframes (see Figures 7 and 8) to sketch and illustrate the allocation of space, the content layout of the future homepage, and the details of the navigation menu with a tool called Figma (https://figma.com). The wireframes, a mixture of low-fidelity and high-fidelity images, were shared among the members of the Tech Team for deciding what elements should be allocated on which sections of the homepage and how the mega menu looked and behaved upon mouse hover- over action. These wireframes served both as visual guides to what the key website components looked like and a depiction of a page's interface that showed the spacing of elements on the page, how content was prioritized, what functionalities were available, and how users would interact with the site. The wireframes also provided intuitive graphics for the discussion at the Tech Team meeting and made the decision-making much easier. Ge / International Journal of Librarianship 8(1) 58 Figure 7. Screenshot of Initial Design of Homepage in Figma, with Page Header and Footer in High-fidelity and Main Content Low-Fidelity Wireframes Ge / International Journal of Librarianship 8(1) 59 Figure 8. Screenshots of Wireframes in Figma Depicting the Opening Mega Dropdown Menu and the 2nd-Level Page Titles/Links, upon Mouse Hover-Overing on the Top-Level Categories Ge / International Journal of Librarianship 8(1) 60 2. Coding Once the website structure was established and wireframes finalized, the Web Services Librarian created a testing environment in LibGuides CMS. A testing group was created to contain each type of guide for testing, including a general-purpose guide resembling the redesigned homepage. The website header (including the navigation mega dropdown menu) and the homepage were among the first coding tasks. LibGuides CMS allows developers to customize the header and footer for the website. The customized header and footer apply to the whole website and all guide pages. The platform also supports Cascading Style Sheet (CSS) and JavaScript (JS) code inclusion, either embedded or uploaded. The Web Services Librarian hard-coded the HTML of the mega dropdown menu in the header and footer sections and embedded the CSS and JS code in the platform. Additional CSS and JS files also needed to be uploaded to the system to style the look and feel and to control the behavior of special plugins like jQuery DataTable which was utilized to construct the contact list of library staff. Besides LibGuides CMS, the library also subscribed to Springshare’s LibAnswers, LibCal, and LibWizard to support the library's virtual reference, study room booking, research appointment booking, opening hours, and online form submission services. However, it seemed that these products were developed independently and in different timelines. Each product has its own style sheets and JavaScript library (with different Bootstrap versions) for customizing the look and feel of the web page. The CSS and JS code that worked in LibGuides did not apply in LibAnswers or LibCal. To achieve a uniform look and feel for the website, multiple versions of style sheets and JS code were created to accommodate each independent product. Even the same HTML code used in the customized header (including the mega dropdown menu) and footer for all three products needed to be added to and updated separately for each product. Another shortcoming of LibGuides CMS, as a web content management system, is that it lacks a sandbox to contain web pages under testing. Any changes in the style of web elements (font, color, link, etc.) would happen in the live website once a new style sheet (CSS file) was applied. Although this could be mitigated by changing the status of a guide page to "unpublished" or "private," the practice only worked with guide content and did not resolve the issue completely. The issue was even worse with LibAnwsers and LibCal, where no testing environment could be established, and every committed edit to web content became live immediately. As a result, the Web Services Librarian had to dedicate large periods exclusively to drafting code changes, implementing those changes on the live site, and then immediately testing the changes to ensure functionality. Fortunately, these web pages only covered a small percentage (appx. 10%) of the total and the testing took place during summer when web traffic was low. The LibGuides CMS provides a page layout template editing option for all its major page types (Guide, Homepage, Search, Subject, Profile, and A-Z). This feature enables developers to change the in-page navigation from tabbed navigation to side navigation and vice versa with ease. The feature also allows the change of content layout within all the page types. The redesigned homepage, for example, was developed by rearranging the existing boxes of and adding new boxes to a guide page template. 3. Responsive Design “Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)” (W3C Ge / International Journal of Librarianship 8(1) 61 Schools, 2023). Although Springshare has stated LibGuides CMS is mobile-friendly out of the box, it is not always accurate (Rosenthal, 2016). To make the navigation menu and homepage content adjust smoothly to various screen sizes, the Web Services Librarian had to add separate CSS code by including media queries to define the CSS code for different viewport widths. The design of the header and footer of the website also followed this workflow. The result was that all pages and content on the library's website looked equally good and were accessible on different screen sizes, be it a desktop, pad, or smartphone. Testing, Revision, and Deployment Upon coding the navigation menu and homepage, the Web Services Librarian shared the testing site with the Tech Team for feedback and suggestions. The responses were quite positive. However, due to the limited timeframe, it was not feasible to create a complete website in the testing environment. The focus was on testing the header and footer, the mega dropdown navigation menu, the homepage, and each distinct guide type. After making revisions and corrections from the Tech Team's feedback, we decided to apply the header, navigation menu, and footer to the live website and open the testing up to all librarians and staff. Issues caused by the conflict between multiple style sheets and different versions of Font Awesome1 and Bootstrap libraries2 began to come up. The Web Services Librarian had to tackle and fix all the issues upon deployment of the new website. Troubleshooting conflicts of style issues and different JavaScript libraries was very labor-intensive and time-consuming, and always with the risk of no workable solution being found. Fortunately, no major issues were found, except for the site’s A-Z Databases page, on which a good deal of time was spent finding a resolution to the conflicts in JavaScript code. Since no usability testing on the old website was conducted before the redesign, the Tech Team had very little users' feedback data and had to rely on their professional knowledge and refer to the best practices of other academic libraries' websites. Though a usability test conducted a few months later showed very positive results, it would have been a good practice to do this testing earlier rather than later. The New Design The library’s Tech Team believes the redesign project has achieved its primary goal of providing a global navigation menu that enhances the findability of key resources and services. Services such as study room booking and appointment reservation with librarians are presented both in the mega dropdown menu as intuitive slideshows with thumbnail photos depicting respective study rooms and librarian portraits (see Figure 9) and as in the outstanding quick-link iconic buttons. Simple dropdown menus are also utilized to include top-level navigation that contains fewer sub-level pages in About Us and My Accounts (see Figure 10). 1 Font Awesome is a widely-used icon set that gives you scalable vector images that can be customized with CSS. (https://sites.uci.edu/blog/tips-tricks/how-to-use-font-awesome-on-your-site/) 2 The most popular front-end framework for developing responsive, mobile first projects on the web. (https://cdnjs.com/libraries/bootstrap) Ge / International Journal of Librarianship 8(1) 62 Figure 9. Partial Screenshot Depicting a 2-column Mega Dropdown Menu and a Slideshow of Librarian’s Portraits upon Mouse Hover-Overing the Research Tab Figure 10. Partial Screenshot Depicting the Mega Dropdown and Simple Dropdown Menus On the homepage, outstanding iconic buttons with text captions that prioritize the popular services and popular resources help users get what they need immediately. The operation hours of the library building and Special Collections are also presented on the homepage beside the FlashFind search box. Quick links to other key resources and services labeled as “I Want To...,” an event poster, and a Twitter widget for news & events constitute the bottom section of the homepage (See Figure 11). The new design also now provides a uniform header and footer for every page of the website. Ge / International Journal of Librarianship 8(1) 63 Figure 11. Screenshot of Redesigned Homepage Ge / International Journal of Librarianship 8(1) 64 LESSONS LEARNED The redesign project of Bjork Library's website was conducted within a span of five months in 2021. The library Tech Team learned a few lessons from this project. Planning Phase ● The timeframe affordable for the redesign affects the scale of the project. ● The redesign project should have a focus, especially when the time frame and resources are limited. ● The timing of the redesign should be well chosen. It is always a good practice to leave the testing and deployment phase to a period (e.g., summer) during which fewer activities and traffic happen on the website. In case any issues arise during the testing phase, developers will have the leeway to make any adjustments. ● A project lead is essential for any redesign project in that they take responsibility and control of the progress, assigning tasks to related stakeholders, and reporting feedback. The project lead should also have the authority to make the final decisions on the design when different ideas come up. Development Phase ● The creation of a testing environment is a must. Although LibGuides CMS does not provide a ready sandbox for testing purposes, it is always a good practice to build a testing environment before the redesign goes live. A Group in LibGuides CMS was created to meet this need at the start of the redesign project at Bjork Library. Any modifications in the testing group would not affect the live site. ● Understanding the limitations of a proprietary CMS such as LibGuides and its difference from other Springshare products may help developers become prepared for the coding incompatibility between the applications and plan a proper solution. ● A good command of HTML, CSS, and JavaScript, in particular the Bootstrap library, is essential to customization of mega dropdown menu, sections such as header and footer, and making these sections mobile-friendly, especially when the out of box mobile responsive features do not avail. FUTURE IMPROVEMENT Any web redesign project cannot be perfect. If a redesign project of Bjork library's website needs to be done in the future, the following tasks are expected to be included: ● Usability testing should be conducted to collect data on how the users interact with the website. Periodical usability testing on certain features of the website may be conducted to decide if that feature is user-friendly. ● Card sorting tasks should be done by a greater audience including experienced users and novice users of the website so that results can be compared to generate a user-centered navigation structure. Ge / International Journal of Librarianship 8(1) 65 ● Integration of Google Analytics tag manager in the data collection process is helpful to learn the statistics of the end user's behavior of link clicks within a web page. ● A search option (e.g., a search box) for information restricted to the library's website is to be added for a better user experience. ● If possible, migration of the top-level and secondary-level web pages to an open-source platform, such as Drupal or WordPress, is to be considered to overcome the shortcomings of Springshare platforms. This practice would enable developers to access the site's source code and thus have greater control over all the phases of web development. CONCLUSION The experience of redesigning and developing the website at Bjork Library with LibGuides CMS and related products provided by Springshare was both challenging and complex. Other academic libraries that adopted the same platform may learn from this experience in their website redesign projects – but they should always take their specific case scenarios into account. References Affairs, A. S. for P. (2013, October 18). Glossary. Usability.gov. Retrieved February 13, 2023, from https://www.usability.gov/what-and-why/glossary/i/index.html Rosenfeld, L., Morville, P., & Arango, J. (2015). Information architecture: For the web and beyond. O'Reilly Media. Rosenthal, D. (2016, April 28). Are your libguides 2.0 (images, tables, & videos) mobile friendly? maybe not, and here’s what you can do about it. ACRL TechConnect. Retrieved February 18, 2023, from https://acrl.ala.org/techconnect/post/are-your-libguides-2-0-images-tables- videos-mobile-friendly-maybe-not-and-heres-what-you-can-do-about-it/ Silvis, I. M., Bothma, T. J. D., & de Beer, K. J. W. (2019). Evaluating the usability of the information architecture of Academic Library websites. Library Hi Tech, 37(3), 566–590. https://doi.org/10.1108/lht-07-2017-0151 W3C Schools, W. C. S. (n.d.). What is Responsive Web Design. HTML responsive web design. Retrieved February 13, 2023, from https://www.w3schools.com/html/html_responsive.asp ___________________________________________________________________________ About the author Rui (Jeff) Ge is the Discovery/Web Services Librarian at Richard E. Bjork Library at Stockton University, New Jersey, a position that began in July of 2019. Previous work experiences include Library Systems Technician at the Patterson Library, Lakehead University, Ontario, Canada. He has a MA in Library and Information Science from McGill University, Quebec, Canada, and a BA in English from the Capital Normal University, Beijing, China. https://www.usability.gov/what-and-why/glossary/i/index.html https://doi.org/10.1108/lht-07-2017-0151 https://www.w3schools.com/html/html_responsive.asp 287-title-page 287-Ge-Layout References