Home page face lift for NELLCO

Most of our website design projects involve a first design for a new site or web application, or a complete redesign from the ground up. A home page and design “refresh”, however, can be a smart, often overlooked investment in a site’s vibrancy, particularly in times when budgets are tight and that vision of a redesign might be out of reach.

Of course, not all sites are suited to an evolutionary (as opposed to revolutionary) face lift. Putting lipstick on that 10 year old site with the scrolling marquee, blocky graphics, and green background is probably not a smart investment. But there are many websites with reasonable aesthetics – maybe a few years old – that don’t need to be torn down and rebuilt. Some creative thinking about how existing structural elements can be refined, coupled with a face lift of the home page’s content and, perhaps, key landing pages, can offer real bang for the buck.

Recently, we did just that for the New England Law Library Consortium (NELLCO).

NELLCO Home Page Face Lift

The evolutionary design and home page refresh were based on valuable end user feedback and brainstorming about what did and did not work in the existing design. Three principals guided the process, all built on increasing member value:

  • Feature more members on the home page without more clutter
  • Improve site navigation
  • Keep key home page links and information “above the fold”

By integrating an interactive, rotating slideshow of member libraries, we were able to give the site a much more modern, high-end feel while simultaneously featuring more members and reducing the vertical real estate required by the old “featured libraries” block on the home page. President Obama’s quote, previously disjointed from the rest of the design and adding to a “text heavy” home page feel, is now more prominent, more visually appealing, and given less priority than member libraries.

Navigation was improved in several ways. The “sub-page bar” above the tabs is taller, providing it needed additional prominence and slightly improved readability. Each top level pages’ sub pages now appear as the user rolls over each tab, providing faster access to content with less guesswork. The tabs and “sub-page bar” now include a “hover” (mouse over) color scheme that differs from the “on” (in that section) color, making navigation more immediately intuitive.  At the same time, a dramatic reduction in the the height of the top blue line and a subtle reduction in the height of the top banner actually results in a top design that consumes less vertical screen real estate.

NELLCO Navigation - Pre Refresh

NELLCO Navigation Refresh

Finally, on the home page, the contents of the right sidebar were swapped with the lower contents of the body. Visitors are provided immediate access to dynamic and key information “above the fold’; that is, without having to scroll down. New visitors who might be more curious about who NELLCO is, are more likely to scroll down to gather more information.

We think NELLCO’s customers will find the refresh to be a big improvement, without all the cost and time of a complete redesign.

4 Responses to “Home page face lift for NELLCO”

  1. Roger says:

    Hi Jake,

    very Cool update!

    Did you make it in WP ?

    Is the Header Image Rotator User controlled in terms of Image Uploading and Text Headings? Would you mind telling that which plugin did you use to control it?

    It would be so cool, if I also know it :-$

  2. Jake Goldman says:

    Hey Roger – thanks for the feedback. This was not a WordPress project; the CMS in use here is CitySoft.

    The slideshow is maintained using a dedicated folder where thumbnails and full size images are stored, accompanied by a simple XML file that takes a heading, subheading, and image file name for each “slide” tag.

  3. Roger says:

    Thanks Jake. So the XML is filled by User when he enters the data? or it has to be maintained manually by updating XML file?

  4. Jake Goldman says:

    Right now, the XML file has to be manually maintained, but it’s pretty simple. You have a series of tags that looks similar to this:

    uconn.jpg