The Vassar Library homepage gets a facelift

Earlier this spring, I was asked to take a critical eye to the Library’s homepage. The Vassar library is not only one of the most beautiful and historically-rich buildings on campus, it’s also an important resource (and second home, perhaps!) to Vassar students.

The library’s website is one of the largest and most complex on campus, bringing together numerous search tools, catalogs, and a wellspring of resources and information. It’s absolutely essential that the homepage helps visitors not only recognize the abundance of content at their fingertips, but also quickly and effectively find what they’re looking for.

Vassar Library Website - Previous Design
Vassar Library Website - Previous Design

Typically, a project like this could easily span a year. But, with many other projects in our queue and the Library’s site just a few years old, we opted to give the homepage a facelift while maintaining the overall style and structure of the design. My job was to reconfigure what was already there so it worked better for users.

Site statistics and the librarians’ experiences with students revealed that the yellow search box in the center of the page was getting plenty of traffic, but the main menus and “help links” (in the brown box) were being ignored. I tackled this in several ways:

First, I looked closely at the list of help links. The list had no label, no sub-labels, and no apparent organization. It was simply a list of links that were given equal weight but not necessarily related. The librarians had mentioned that students often asked for help finding these resources, so apparently the brown box was not being noticed.

Statistics and feedback revealed that the yellow search box was working well, but links in the brown box to the left were barely noticed.
BEFORE: Statistics and feedback revealed that the yellow search box was working well, but the brown box link panel to the left was barely noticed.

I began with reorganizing the links into related sections, giving each one a contextual title and the entire area the label “Quick Links.” Next, I decided to capitalize on the effectiveness of the yellow box by extending it behind the Quick Links. Using some subtle shading, borders, and gradients, I was able to make the entire list appear connected to the main search box, but still secondary content.

We also decided to move the entire area up, decrease the height of the main photo, and add arrows to the main navigation links.

Stats also revealed that the only link students were clicking in the main navigation was “Hours.” As a group, we chose to remove the page from the navigation and add a link with today’s hours to the header. This meant relocating the “Ask a Librarian” button—a very important link—to the yellow box. Placing it in the corner, at the intersection of lines, with an eye-catching button style will hopefully maintain its visual dominance.

AFTER: Reorganizing content, adding labels, and modifying the containing box help to give more clear direction to the search box.
AFTER: Reorganizing content, adding labels, and modifying the containing box help to give more clear direction to the search options and their related links.

When I started analyzing the organization of the page, I found that the word “search” was used inconsistently. For example, the yellow box contained three major search tools: Discover (a single-interface catalog search), the main Catalog, and Databases. However, buried in the navigation, you could find other search tools for journals and numerous off-site sources. Furthering some of the confusion, the “Search” link in the main navigation took you to a Google search page for the library website only. Everyone agreed that the search items needed to be labeled and grouped together more clearly, so we reorganized the Search navigation menu, and restricted the yellow box to all available search tools, with additional resources for searching located just beneath the search forms.

Because “Discover” was another way of searching the Catalog, we combined the two into one tab, letting users toggle between the two modes.

Lastly, I suggested moving the “My Accounts” menu—which was previously in the yellow box—up into the main navigation bar. Giving it a unique style and separation from the main nav reflects that it’s a related, but specific and contained list of links.

The Makeover Revealed: Check out the new Vassar Library Homepage
The Makeover Revealed: Check out the new Vassar Library Homepage

There were other small adjustments we made here and there, including adding a photo slideshow, reorganizing pages and menus, and restyling elements of the page for consistency with the new look. In the end, everyone is really pleased with the makeover, and we’re eager to hear how students and members of the Vassar community respond to the changes. Hopefully, visitors will be better able to find what they need online so that the librarians and staff can focus more on what they do best: serving  patrons with personal attention, advice, and insight that a website can’t yet offer.

Check out the library’s homepage makeover here.

5 comments

  1. Reanne, nice work on updating the site without straying to far from the original feel. The yellow is such a strong color and makes it easier on the eye with so many darker tones. A lot of redesign’s make the mistake of scrapping some of strong points of the original design, but i think you’ve succeeded in keeping them, here.

Leave a Reply

Your email address will not be published. Required fields are marked *