CLC LIbrary Website Redesign Project

Description:

After doing some benchmarking of other library websites, the CLC library decided it was time to redesign their site to include the push towards a prominent search interface. I developed a usability study for students, formed a committee with a group of librarians, provided initial design mock-ups based on librarian and student input, and began to code the site based on new HTML5 standards and responsive web design. This project was expected to wrap up in September 2013, however I left the college in July and the site was never launched. The college was in the middle of a redesign of their public site with an outside vendor at the time and I have since heard that the library website will be refaced to match the new brand identity of the college in a later development phase.

Objectives:

The current design of the CLC Library website was developed and implemented in 2009 (I also led that project). The icon design was a bit ahead of its time then, and actually worked out really well for mobile devices with touch capabilities.

CLC Library Website circa 2009

However, search was a secondary focus on the page and staff really wanted more room for department advertisements and events. The hours and schedules at each branch also needed to be presented in their entirety on the front page. The overall color scheme and navigation needed to take into account the college's colors and navigation while still allowing the library to have its own identity and organizational flow.

Project Details:

I took a user-centered approach to the redesign project which started with a series of usability studies. The first portion of the study focused on the student population beginning with library student workers and branching out into library users, then all students. Results concluded that students needed assistance with steps in the research process and quick access to librarian expertise.

Usability results report sample

After the student usability tests were complete I shared the findings with all library staff then met with a small team of staff members to further discuss the findings and gather their input about wants and needs for the site. I then developed storyboards, a navigational sitemap, and visual site mock-ups based on input gathered from students and staff.

I brought the mock-ups to the web team and led them through a series of discussions regarding layout and design with regard to usability, findability, feature request integration. As a group we narrowed down elements of all four mock-ups into a final version that was then brought back to all library staff and a small student user test group.

Final website redesign mock-up

The updated version put the primary focus of the site on search, with a tabbed interface in a prominent position on the main page. Secondarily, links to all of the important offerings are displayed on the main page for frequent visitors. The ad space was also expanded to allow for more copy along with promotional imagery as necessary. White space, colors, borders, and images were used to cut down on the text-heavy format.

After agreement was reached between the librarians and the dean on the new design, I began coding the new site in HTML5 & CSS3 with Javascript and ColdFusion elements to provide menu functionality and include various portions of the page dynamically. I develop primarily in Notepad++ and Photoshop, however I am also familiar with Dreamweaver.

Library webpage redesign code example