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.
Library Leadership Team
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.
Outdated or inaccurate information was hiding in the deep corners of our website.
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.
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.
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:
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
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.
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.
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?