Barnard Library

My Task: A Redesigned Website for a Redesigned Library

In Fall 2018, Barnard Library and Academic Information Services (BLAIS) moved to a new building and expanded to included six new teaching and learning center. At the same time, Barnard College was moving their entire web presence to a new content management system. My task was to redesign the BLAIS website to accurately reflect it's new location and services - making use of design components in the new content management system. 

My Role

• Project Lead

• UX Designer

• Content Management

My Collaborators

• Library Leadership Team

• Content Editors

• Barnard Communications

• Graduate Assistants

• Student Associates

Step 1: Reviewing the Current Site & Previous Research

Conducting a Content Audit

Our website had many editors and lacked a centralized process for approving new content or removing old content. Before deciding what content to keep and what to remove for our new site, we needed to know what content we had. So, I managed a content audit, setting up a spreadsheet and a system for student workers to log and describe our existing content. Afterwards, I reviewed the audit results with our library staff to determine the accuracy of the content.

Research Review 

Because of the project timeline and limited resources, I wasn't able to conduct new user research at this stage of the process. However, I reviewed the results of user interviews and testing that I had conducted a few months prior for Barnard's Media Center and Design Center websites. These websites served similar purposes as the Barnard Library site - helping students understand how to access resources and services - so I was willing to assume that some of the discoveries I uncovered then would be relevant to this project as well.  

Step 2: Determining how to organize the data

Digging into the details

Before creating a UI, I developed a deep understanding of the content and data I was working with. The Almanac provides 14 data points about each of country. I split the data into quantitative and qualitative variables, and continued my explorations from there.

Discovery Tools

The Almanac contains close to 3,000 data points, and I had three tools I could use to help students find the exact information they were looking for: search, filter and sort. I thought through which tools were applicable to each type of data. For example, it would make sense to filter by continent but would not make sense to filter by Head of Government.

Creating Categories

I also realized the data could be organized thematically, which I knew might be another useful way for students to browse the Almanac. I create four theme-based categories:

• Government

• People

• Geography

• Well-Being

Tying it Together

Lastly, I looked back at the scenarios given by the editors and determined which methods of data organization would be most useful to middle and high school students. I wanted to include as many helpful tools as possible without adding any unnecessary features that might overwhelm the interface or the students interacting with it.

Step 3: Designing a Clean & Clear User Interface

Wireframe Options

I created two layout variations, each with a different interaction pattern. 

​

Version A - Country Cards

This version prioritized users who wanted to learn a lot about a single country, so each country was given it's own container

​

Users could expand the containers to see all the data about a particular country at once

​

Thematic Tabs - Version B

This version prioritized users who wanted to compare countries, listing all the countries in a single table

​

Users could view information by topic, using the tabs at the top of the table to navigate through the information

Step 4: Combining ideas to create a final design

Choosing the Solution

I showed my wireframes to the editors for feedback. Overall, they liked both concepts, but felt that Version B - the comparison charts - would be more useful to students and teachers. However, we didn't scrap Version A: instead, we incorporated it into the Atlas part of the project.

Atlas Wireframe

Refining the Details

The editors also provided some guidance on language, and refined the information architecture. With these changes in place, I passed the annotated wireframes off to our visual designers and developers.

Want to talk more about how I create educational tools?

Send me a note.