top of page

Open Library

The Internet Archive's Open Library is a non-profit website that helps users across the globe access millions of digital library books for free 

Role: UX Design Fellow

Screen Shot 2023-01-04 at 5.16.50 PM.png

At a Glance

Team

5 engineers

2-3 design fellows

Tools

Figma

Timeline

July-Nov 2022

Responsibilities

User Interviews

Wireframing

Prototyping

The Goal

Help users navigate the site more easily, with a specific focus on:

  • Reorganizing the hamburger menu

  • Redesigning the navigation of "my books," which allows users to loan books and track reading

The Problem

At the beginning of my project, the current navigation bar looked like this: 

Screen Shot 2022-11-09 at 12.32.41 PM.png

After reviewing user feedback and meeting with the Open Library team, I identified three main areas of concern:

​

  1. The label "more" was not descriptive, and it was unclear to users what this meant

  2. The hamburger menu was not consistent with the navigation bar items

  3. The hamburger menu was confusing for users, especially new users, to navigate

Approach

Before I began my project, the Open Library team decided to implement an interim solution to the first point above. To address the concern with the "more" label, the navigation menu was changed to instead include "My Books" and "Browse." The website analytics showed that users frequent their Loans page most, so for now, the "My Books" page brings users to the Loans page. 

Screen Shot 2022-10-10 at 12.57.26 PM.png

To begin redesigning the main site navigation, I first created a prototype in Figma with some potential solutions that built off of this updated navigation menu:

I created a dropdown menu for My Books that would allow users to select the specific page they would like to go to, rather than automatically going to the Loans page.

Screen Shot 2022-11-14 at 2.20.12 PM.png

I reorganized the hamburger menu to be consistent with the navigation menu and to use the subheading of "Contribute" and "Resources" instead of "More." I felt that these changes would make the hamburger menu easier to navigate for both new and long-time users.

Screen Shot 2022-10-27 at 1.18.11 PM.png
Screen Shot 2022-10-27 at 1.30.31 PM.png

After creating the prototype, my next goal was to get feedback from users, so I scheduled user interviews with volunteers. 

Research

User Interviews

I conducted four user interviews via Zoom to answer the following questions:​

  1. How do users feel about the My Books dropdown?

  2. Are users using My Books and Browse from the navigation menu or hamburger menu?

  3. Are users able to effectively use the hamburger? Do they find it easier or harder to find what they're looking for using the reorganized hamburger?

Results & Findings

  1. 3/4 of the interviewed users preferred the dropdown, and the fourth user didn't have a preference between the versions. The users enjoyed having the control to navigate to a specific section of My Books.                                     

  2. All users used the navigation menu at the top of the page to navigate, rather than the hamburger menu, which supported the switch to "My Books" instead of "More." This finding also highlighted the need to make sure users could access the pages they wanted to access from the top navigation menu.                                             

  3. Finally, all four users found the existing hamburger menu confusing and preferred the reorganized hamburger. Some users specifically mentioned that the reorganized hamburger was more compact and that they felt that the headings "contribute" and "resources" were clearer than "more."

Refining the Design

An Unexpected Problem

After learning from the user interviews that users preferred increased granularity for accessing My Books, I wanted to include more links in the dropdown. For instance, instead of using the term "reading log," I could link directly to the user's "currently reading", "already read," and "want to read" pages.

Screen Shot 2023-01-05 at 9.18.32 AM.png

However, because I wanted to keep the navigation and hamburger menus consistent, providing more options in the My Books dropdown would make the hamburger menu less concise. I needed to balance having increased granularity in the dropdown with having a concise hamburger, and it was difficult to find a solution that addressed user needs while satisfying all stakeholder constraints.

A New Direction

At the same time that we were debating the pros and cons of various solutions, another Open Library UX Design fellow was working on designing a My Books landing page for the mobile site. Inspired by his designs, I created mockups for a desktop version of the My Books page. Having a My Books page that summarizes users’ loans, holds, and reading log at a glance allows users to still have increased control over My Books navigation while keeping the hamburger menu concise, since all of the individual My Books items can now be condensed into one link.

Screen Shot 2023-01-05 at 9.41.18 AM.png
Screen Shot 2022-11-04 at 11.08.45 AM.png

Next, I'm looking forward to getting feedback from users and brainstorming how to maximize the use of this page.

Reflection & Takeaways

Working with the Open Library team has been an amazing experience. I’m so grateful that I had the opportunity to lead a UX project from start to end, beginning with user research and ending with final designs that are ready to be implemented.

​

Working with such a supportive team has allowed me to:

  • Learn more about the iterative design process

  • Get comfortable with sharing and critiquing my designs

  • Gain more experience with design tools, such as Figma

 

It was also a great learning experience that sometimes your projects will take an unexpected turn, but those turns help you come to the best possible design solution.

If you'd like to learn more about my work with Open Library, you can read my post on their blog or watch my presentation to the Internet Archive community. 

bottom of page