Role: UX Design Fellow
Project Duration: July 2022-November 2022
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
Redesign the main site navigation, specifically the hamburger menu and "my books," to make it more concise and easier for users to find what they're looking for
At the beginning of my project, the current navigation bar looked like this:
I met with members of the Open Library team to identify three key areas of concern:
The label "more" was not descriptive, and it was unclear to users what this meant
The hamburger menu was not consistent with the navigation bar items
The hamburger menu was confusing for users, especially new users, to navigate
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.
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.
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.
After creating the prototype, my next goal was to get feedback from users, so I scheduled user interviews with volunteers.
I conducted user interviews via Zoom with four users to answer the following questions:
How do users feel about the My Books dropdown?
Are users using My Books and Browse from the navigation menu or hamburger menu?
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
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.
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.
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 and a more concise hamburger menu, the Open Library team began discussing the exact implementation. We wanted to keep the navigation and hamburger menus consistent; however, we also wanted to provide many options in the My Books dropdown, which made the hamburger menu less concise.
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.
Furthermore, having a My Books landing page opens the door for more ways for users to interact with their reading through Open Library. For instance, I’ve created a mockup that includes a summary of a user's reading stats and yearly reading goal at the top of the page:
Next, I'm looking forward to getting more feedback from users and brainstorming even more ways 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 eventually come to the best possible design solution.