Role: User Research / Web UX Design / Content Strategy / Branding


As a visitor to the Calais Free Library (when living in and visiting family in Maine), I wanted to redesign the website to better reflect the library’s commitment to community life and learning. I analyzed in detail what could be revised in order to propose a redesign concept.

Overview

The library, a yellow brick building, was first opened to the public on July 4, 1893.

The library’s website had several blank or very outdated pages, and certain parts of the interface design were clashing with each other.

Home page, Calais Free Library.
Activities page, Calais Free Library.
Kids Corner page, Calais Free Library.

Defining Goals

The goal was to improve the online experience for visitors seeking more information about the library’s catalog and activities. Users included older adults (interested in activities like knitting meet-ups) as well as children and parents.

The improvements were to be achieved through:

  • Content strategy. Presentation and selection of text would be more organized and clearly communicated.
  • UI design. High-quality photographs and graphic design would freshen the look of the website.
  • Information architecture. Outdated or blank pages would be removed and some pages would be combined for a “digital library” section.

Wireframes

Low-fidelity wireframes were created to explore what would resonate with users.

Sketches focused on bringing the information together through placing important library account and search features on the home page, and including the library’s long history on the hero image to emphasize its long-standing presence in the community.

calais_wf_home
Homepage wireframe.
calais_wf_about
Calais Library Wireframe: About Page.

Visual Design

Mood Board: A moodboard inspired the UI style guide. A cozy and warm look was selected to differentiate from the highly academic look that’s seen on many university library websites.

calais_moodboard

Style Guide: The font Lora was selected for headers, and Lato was selected for the body text.

Lora was selected as it is a well-balanced contemporary font with roots in calligraphy. The typographic voice conveys the modernity of the site redesign while retaining its long-time purpose as a public library.

calais_styleguide

Detailed Mockups

I focused on selecting dynamic and quality photographs for the header images and staff photos.

Below are a few examples of the high-fidelity mockups I designed.

The about page features the former longtime serving head librarian to emphasize the commitment to serving the community.

mac_website

mockup_re

Results

I was not able to able to reach the library director as she resigned before I finished the proposal.

As for end users, the designs improved brand perception and led to a higher level of customer delight when the mockups were presented to several Calais residents.

Users found the website:

  • More modern looking.
  • Easier to navigate and better organized.
  • Created a sense of community.
  • Enabled them to find information they needed more quickly.

Leave a Reply

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