Challenge

Library websites are impactful in many ways. For example, they offer online access to information and materials. These resources play an important role in the success of community members. Library websites can make it easier for patrons to find materials that would be difficult to find in the library. Patrons can also learn about programs and services offered by the library. In a 2013 Pew Research Center study, focus group members said for finding basic information (hours, location) that their libraries’ websites are useful. But, for more complicated purposes they are a bit of a hassle to navigate. Therefore, library website design is key to good patron service.

The Jefferson County Public Library (JCPL) wanted to update their website to improve their online service. I identified several ways that a redesign could help JCPL:

• Improving the website usability would put JCPL ahead of the curve and provide a better experience for patrons.
• Technology support is a major aspect of library service that patrons seek from staff. Therefore, improving the website design would make it easier to help patrons.
• Improving site accessibility would ensure full and equal use of the website for those with disabilities. As a result, this would offer a better experience for everyone.

Squarespace hosts the JCPL website and Squarespace provided the original theme. However, these base themes are somewhat generic and limited in the customization options they provide. JCPL wanted a design that catered specifically to their needs as a library. I recognized this would require a custom Squarespace template.

Approach

Usability Testing

I conducted usability research on the original website. Firstly, I constructed a usability test questionnaire. Secondly, with this questionnaire, I interviewed 2 participants in person on their home computers. I engaged them in common library scenarios. Test participants found the website easy to read and look for books. However, they had issues accessing journals, registering for programs, and navigating the website. They also found some wording unclear.

Usability Survey

Additionally, I administered a usability survey to staff and patrons via a link on the library website, social media, and newsletter. I received a total of 77 responses. Survey participants reported issues with finding things on the site, the site navigation, the loading time, and registering for events. Suggestions by participants included improving:

• Aspects of the design, such as colors, icons, and font sizes
• The navigation and location of important info
• Events registration
• The use of catalog and eBooks

Card Sorting Analysis

Navigation was a common and major concern for users during my research. Therefore, I conducted a card sorting analysis to determine a better structure for the site navigation. I completed this analysis one-on-one with 8 staff members. Firstly, I gave each staff member a random assortment of cards with page titles. Secondly, I asked them to sort the cards into 5-6 categories. To maintain a user friendly number of main navigation items, I told them 5 or 6 was the limit on the number of categories. To sum up, my analysis of the card sorting revealed 6 commonly grouped categories. Further, the participants considered 5 pages as separate items. As a result, I combined 4 of the pages into a Quick Links section and placed the newsletter as a call to action. In addition, I renamed the categories based on staff input and best practices for labeling for library websites.

Solution

Mood Board

To begin work on my design, I created a mood board to generate ideas for the color scheme. I chose images from the library itself, the current library logo, the surrounding local area, and pictures relating to library services. Consequently, potential colors were selected from images used on the mood board. Then, I used Adobe Color and accessible-colors.com to adjust the colors into an aesthetically pleasing as well as accessible combination. For headers and titles, I chose a serif font, Cardo, due to its similarity with the current logo’s typography. Further, it was designed for legibility and publication. After that, I chose a sans serif font, Roboto, for its modern appearance, legibility in the digital format, and ability to complement the Cardo font. 

Wireframe

Using Moqups, I created a wireframe of the website homepage. The header features the addition of the Quick Links menu at the top of the page, text size accessibility features, hours and contact information, and the new navigation menu items. Moreover, I featured the search function prominently on the top of the page. I then replaced the carousel of event items with two image links to events and a set of three cards with pictures that will show upcoming events. Below the three cards are button links to view all events, view only Madison branch events, and view Hanover branch events. 

The wireframe includes calls to action for both the monthly library newsletter sign up as well as the weekly Wowbrary newsletter sign up. Library resources and library programs and services each have their own section with image links. The footer includes the full navigation, social media links, and hours and contact information.

Result

Still using Moqups, I made the final mockup of the website homepage. The mockup includes the styling and color palette chosen for the site. In order to better accommodate mobile users, I increased the size of the navigation bar, search, and buttons. I used pictures provided by the library as well as my own pictures of the library for the search background, Local History image link, Computers & Wi-Fi image link, Meeting Spaces image link, and Teen’s Program Link. Additionally, remaining images were royalty free images from Pexels and Canva.

In conclusion, this project offered the experience to implement a design solution that would meet the unique needs of a client serving the public. Through this project, user research led to an effort to improve site navigation informed by a card sorting analysis. Consequently, the navigation is now more intuitive for users. Similarly, the design showcases many services in a way that makes it easier for users to find what they are looking for and keeps accessibility in mind. Further, the design enhances existing features of the site such as the search box. Additionally, the use of high quality images and an attractive color palette help complete the brand experience.

Share: