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
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.

Key Takeaway
Outdated or inaccurate information was hiding in the deep corners of our website
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.
Result
The project was shipped in November 2017! It's live on Junior Scholastic and the New York Times Upfront. The same design has also been used for Junior Scholastic's United States Atlas and Almanac.
Want to talk more about how I create educational tools?