Have you noticed our new My Books page experience?
Please let us know what you think!
Read on to learn more about what’s changed.
Forward by Mek
This year we’ve had the great fortune of collaborating with Samuel Grunebaum, 2022 Open Library Design & Engineering Fellow. Samuel is wonderfully positioned at the cross-section of software engineering, design, and education, making him capable of rapidly prototyping new designs, ensuring these designs are clear and instructional, and bringing these designs to life through engineering. It’s rare I find someone, like Sam, who can so easily and effectively switch contexts between design and engineering while also keeping bigger product pictures in mind. This set of skills has not only made Sam essential to early prototyping stages, we have also benefited greatly from Sam’s ability to uniquely recognize and raise challenges about component accessibility and mobile/desktop compatibility we likely would have otherwise missed. In addition to being a 2022 Open Library Fellow, Sam co-directs a software & design consultancy that is accepting new freelance projects, tutors college, high school, and intro-level computer science and is accepting new students, and is open to the right mission-aligned, full-time role.
Personal Intro
Hello, I’m Samuel Grunebaum and I’ve been working with Open Library as a Design & Engineering Fellow, contributing designs and code to the My Books redesign process. I’m currently transitioning into a career in software design and front end engineering after working as a Computer Science educator at the Horace Mann School in The Bronx, New York and as a freelance designer, developer, and teacher in all things software.
Problem
Open Library patrons and stakeholders alike identified the My Books page as a major pain point in the site’s navigation and information hierarchy. At the beginning of the project the desktop interface loaded by clicking the ‘My Books’ button in the header looked like this:
Perhaps the most confusing issue with this flow, is that the ‘My Books’ button brought patrons to their account’s Loans page. Another problem that was continually observed with the existing design is the mobile navigation on this page:
The mobile design took the desktop sidebar menu and added it directly below the site header, creating three layers of navigation and a very confusing split in the My Books page interface.
The central problem of the existing design for My Books was that there was no true My Books page, but rather a My Books button driving to the Loans page. This meant that there was no single place for patrons to find their books, whether books they had on loan or books they had added to one of their reading logs.
The previous menu design also had the unfortunate side effect of burying the Reading Log options, as well as Reading Stats, Notes, Reviews, and Import/Export options deep below the fold in an already confusing mobile menu.
Digging deeper into this problem and hearing from Open Library stakeholders, patrons, librarians, and the community at large clarified the direction we would take: working towards a mobile-first consolidated My Books interface that gives patrons an understandable and discoverable way to access the books associated with their account, as well as the other account specific sections including Stats, Notes/Reviews, and Lists.
Interim Fix
Before beginning the design process in earnest, we decided an interim fix would be helpful to mitigate the confusing nature of the mobile My Books navigation. The solution we decided on was an extremely quick fix, able to be implemented in just a few minutes.
The adjustments made used a darker color to differentiate the menu from the rest of the header and the page content, as well as making the menu section smaller with an adjustable height click-and-drag feature:
Approach
After meeting with members of the Open Library team to discuss the main issues, we agreed that the central areas to focus on were:
- Creating an interface unique to My Books that would consolidate a patron’s loans and logs into one page accessed by the My Books button
- Improving the usability of the My Books page on mobile by moving towards a responsive, mobile-first design for the My Books page and redesigning the menu on mobile
The next step was to iterate multiple potential interfaces for the new My Books page on both mobile and desktop. With the help of the Open Library team and other design fellows, we came up with the following options for mobile and desktop My Books interfaces:
In conjunction with Dana, another 2022 Design Fellow, we continued to iterate on the designs based on feedback received from Open Library stakeholders, librarians, and patrons.
We settled on the following approach for desktop, which includes new carousel sections for displaying books and creates space for a Reading Stats data visualization widget:
Alongside the new desktop design, the mobile-first redesign that we settled on makes use of the existing sidebar menu to guide the structure of the new mobile interface while making use of an information hierarchy already familiar to patrons.
This mobile design not only improves usability and accessibility to the key components of My Books, but also decreases engineering overhead by allowing for a responsive design using the original sidebar menu:
You can try the new mobile design prototype here.
First Phase Release: Desktop My Books Interface
The first and most immediate step to improving the overall My Books experience was to create a distinct page on the site for an account’s books. The new My Books page now exists at /account/books for any patron of Open Library. The new page is almost a carbon copy of the original My Books page, but with its own content that is separate from the Loans page, which was originally what came up when clicking My Books in the header. Below is an image of the current desktop release of My Books:
After adding the new page at /account/books, I created a new file for the My Books content and added custom carousels to the page for displaying a patron’s loans and reading logs. Beyond improving the flow of clicking the My Books button, this initial redesign aims to increase user engagement with reading logs and will also populate the My Books page with images of book covers from a patron’s own selections, creating a more welcoming and dynamic account page driving from the My Books header button.
Another change in this release is the addition of Reading Stats and Import/Export Options buttons at the top of the page, as these are currently buried at the bottom of the My Books sidebar. In the next phase of the design, there will be a prominent link to Stats at the top of the My Books page with the addition of the data visualization widget.
The creation of this page not only provides an elegant interim solution to the issue of confusing My Books navigation by adding a novel page to the Open Library but also lays the groundwork for a more comprehensive redesign including mobile-first improvements, multiple new custom components, and more prominently featured a patron’s Reading Stats.
Next Steps: Mobile Release and Stats
The next steps of the My Books redesign process will begin with improving the mobile usability by overhauling the My Books interface. The engineering approach I will take is to hide the My Books index content on mobile, instead only displaying the sidebar menu as the whole My Books interface. The sidebar will be responsively designed to display custom carousels on mobile, as rendered in this interactive Figma prototype.
The next and final step after completing the implementation of the mobile redesign will be to finish the redesigned desktop My Books interface by building the Reading Stats data visualization widget. Here’s an interactive Figma prototype of this new design.
I am so excited to continue working on this redesign process, which has already been a wonderful introduction to the Open Library design system and code base. Moreover, I’m excited to contribute to what is hopefully a welcome improvement to the Open Library ecosystem, increasing both access and usability to some really wonderful account features. My hope is that patrons will be able to more easily save and read books on Open Library once they have one clearly defined place to look at all of their books, whether checked out or saved in reading logs, as well as their reading stats and account information.
Reflections
Working on this project with the Open Library community has been an amazing experience in UX design, full stack web development, and community collaboration across state and national lines. I am grateful to be able to contribute to a project that is so meaningful to so many people through its unique ability to disseminate knowledge freely to anyone with Internet access. It was also a fun way to expand my web design and development experience.
I am immensely grateful to the Open Library community as a whole for being so welcoming to me when I joined a few months ago and for continuously supporting my design process through helpful critiques and design input, as well as the general kindness shown in the weekly community meetings. I am especially grateful to Mek, my counter-point on Open Library staff, who has taught me so much about the Internet Archive stack and the Open Library design language, and my main collaborator Dana, who has expertly taken the reins on the Desktop interface designs and navigation for the overall site. I also want to extend my thanks to Drini, Lisa, Jim, Abby, and Hayoon who have all had invaluable contributions to the My Books design and implementation process, as well as the ongoing development of a comprehensive Open Library design system. I’m so excited to continue working with this community and for the completion of the My Books redesign.