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
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:
After reviewing user feedback and meeting with the Open Library team, I identified three main 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
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.
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.
Research
User Interviews
I conducted four user interviews via Zoom 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, 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.
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.
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.