UX & Front End Design

University of Chicago Library Website

A complete redesign and content audit of the Library's website.
Homepage shown on a large monitor
Each Library branch can customize their banner, news feed, and sidebar navigation.
Homepage shown on tablet
Homepage: Before
Before Redesign
Homepage: After
After Redesign

Problem

The University of Chicago's website had not been changed in twelve years, leading to stale and repetitive content that was not mobile friendly or ADA compliant. The CMS was being retired, so we needed to find a new platform that we could be supported in-house and allow for all librarians to edit and add to as needed.

The website was text-heavy with patrons only using small and specific parts of the siloed content. Additionally, each of the five library branches had their own look as well as duplicative information that sometimes contradicted itself.

Solution

  • The homepage was segmented into visually-appealing modules that quickly show the services and events of the Library.
  • Highly-used services, such as booking a study room, were prominently placed and easy to access.
  • Due to the size of the website, Bootstrap framework was utilized, but was customized with em-based media queries using Sass calculations.
  • Multiple user experience tests found which types of layouts and information patrons preferred and enhanced their research experience. This data along with student and faculty interviews allowed us to assess all the needs for the campus' various uses of the site.
  • Creation of a pattern library assured a cohesive interface look that allowed for reusable building blocks and clean code. This allowed for each library branch to have their own homepage with content that appealed to their patrons while also maintaining a cohesive brand.
  • Reusable data blocks were implemented in, with content automatically placed on a page based on template type or body class assignment. This allows for consistent and accurate information that only needs to be edited in one spot.
  • ADA compliance is baked into the templates, using WCAG 2.0 Level AA accessibility conformance, and continues to be updated as new guidelines are introduced.

Impact

  • This new layout expanded the use of the website from patrons only interacting with the search box to fully interacting with all elements on the page.
  • Reference service use increased both online and in person.
  • Click-throughs increased to news stories.
  • A complete site audit of all 8,000 web pages were triaged in order of migration importance. Deletion of redundant pages and reusable data modules allowed us to reduce the website to 2,000 pages.

Roles

  • Front End Developer
  • Lead Designer
  • UX / UI Designer

Languages Used

  • CSS / Sass
  • Django
  • HTML
  • JavaScript

Code Examples