An Ongoing Redesign

PrintEmail

An Ongoing Redesign

By Jason Eiseman

In January 2011, the Yale Law School Lillian Goldman Library began redesigning its website. Hopefully, it will never be finished.

Information Gathering
Before changing our website design, we made “data gathering” an integral part of our planning process. We used a three-pronged approach to data gathering. In our annual student survey, we asked questions about the website; used Google Analytics, our website analytics tool, to gather website use statistics; and used formal usability testing. None of these tools alone provided a complete picture of website use, but taken together we better understood the strengths, weaknesses, and practical usability of our website.

As an example of how this worked, in the student survey completed in March 2011 students complained of confusing orientation, too many clicks required to access what they need, and pages not being user-friendly. Some students mentioned an inability to renew checked-out items despite a drop-down list on our home page clearly marked “Renewal/Request Forms.” Google Analytics confirmed not many users were clicking “Renewal/Request Forms.” During usability testing, several students were unable to locate this item on the front page even as they moved their mouse over the drop-down list and the text “Renewal/Request Forms.”

Why was this the case? We researched usability literature to add context to our own results. Steve Krug’s books on web usability and usability testing, Rocket surgery made easy: the do-it-yourself guide to finding and fixing usability problems and Don’t Make Me Think: A Common Sense Approach to Web Usability, provide essential step-by-step information for both running your own usability tests and interpreting the results. (See Recommended Reading for additional resources). Some usability experts said users may not consider using a drop-down list when they aren’t sure what to expect from the list. We suspect this was true in our case—that the list was being used for navigation instead of as part of a form element (such as when selecting a state in an address web form).

To fix this problem, we created a “My Library” section of the library home page. This section contains links to personalized sections of our ILS where users can renew items rather than using a drop-down list.

Early results from Google Analytics suggest we have been successful. The link to access the patron account and renew items has been the second-most-clicked link on our website since the start of the 2011 fall semester. Hopefully, the 2012 student survey and additional usability testing will confirm the improvement.

 

Design
We created a crude mock-up or wireframe of changes we wanted to make based on our testing and analysis. We ran usability tests on the wireframes when we tested our existing site. We also shared wireframes with all library staff for comments. The wireframes were turned into a live development site so the staff could interact with the site and see how it works.

Finally, a graphic designer created a design based on the wireframes and development site. The graphic designer modified styles to closely align with the Yale Law School styles. She also helped us use color and style to create a clearer visual hierarchy for better usability.

Major Changes
We implemented several major changes that we hoped would improve the website’s usability.

First, we turned existing website graphics into navigational content. We have always featured pictures on our website, but for the new home page we took those images and turned them into a rotating image slideshow with a related description and link to more information. This slideshow could be used to highlight content, such as our videos and rare book exhibits.

Next, we tried to bring important links which had been hidden in drop-down lists and deeper navigation to the home page. We chunked these important links into four major categories: Find, My Library, Research, and Visit. We discussed additional categories for highlighting these links (Explore, Borrow, etc.) and may experiment with those categories in the future.

Finally, and perhaps most importantly, we ensured that every aspect of the home page could be easily changed and updated by all librarians and staff.

We Are All Webmasters
As part of our website redesign, we moved our entire website to the open-source Drupal platform. This content-management system allowed us to reuse staff content at various parts of the site, including the home page.

Staff blog posts and events automatically get sent to the home page. Staff can update their own entries in the staff directory, library policy pages, and even site-wide contact forms. Staff also can change any home page text based on changes in their own departments and services. Anyone in the library can change the home page slideshow.

“Don’t worry about breaking anything,” we announced. It was important that everyone in the library have a sense of ownership of the website and feel comfortable updating content.

 

Future Development
Over the next year we will be working on an improved mobile version of the site. Rather than a separate mobile website, we hope to use CSS Media Queries to automatically adjust the site based on the size of the screen viewing the site. This way, all versions of the site will run off the same underlying database and content.

Additional features may include personalized displays based on visitor roles (student, faculty, staff), improved searching, and integration with other sites, such as our library catalog.

Throughout all feature implementations, work on the site will be iterative. Improvements will be made, tested, and improved again. Changes must be significant enough that users see the improvement in our website but not so significant that there is no continuity from one visit to the next. It will be a delicate balance.

Even today, a close examination of the site will find some errors and poor usability. However, we now have a process to find problems and make improvements. Then we can test and improve again. Thus, our redesign continues.

Jason Eiseman (jason.eiseman@yale.edu) is librarian for emerging technologies at Yale Law School Lillian Goldman Library in New Haven, Connecticut.

Recommended Reading:

  • A Book Apart series. www.abookapart.com.
  • Garrett, Jesse James. 2010. The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders.
  • Halvorson, Kristina. 2010. Content Strategy for the Web. New Riders.
  • Krug, Steve. 2009. Rocket surgery made easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems. New Riders.
  • Krug, Steve. 2009. Don’t Make Me Think: A Common Sense Approach to Web Usability. Pearson Education.
  • Tidwell, Jenifer. 2010. Designing Interfaces. O’Reilly Media, Inc.