Library Extension — Conceptual Redesign for Clarity and Ease

Library Extension is a Chrome extension that appears while browsing Goodreads, showing whether a book is available at your selected libraries.

It’s an incredibly useful tool that makes it easy to borrow books or place holds without additional searches. However, the interface felt visually cluttered and overly dense, making it harder than necessary to quickly scan availability. The “Borrow” and “Place Hold” buttons also created a misleading interaction pattern that suggested direct action, but simply redirected users to the same page as the title link.

I redesigned the experience to prioritize clarity and speed. The updated layout introduces stronger visual hierarchy, removes non-essential information, and emphasizes availability at a glance. This also reduced its visual footprint, making it feel like a lightweight companion rather than an interruption to the browsing experience.
[image]

In the initial iterations, I removed repeated book titles and availability counts, as they didn’t meaningfully influence the decision to borrow or place a hold. I also explored restructuring each format (e.g., ebook, audiobook, physical) into its own clickable card, rather than relying solely on separate buttons or title links. 

[image] [prototype]

After some refining and creating a prototype, I realized that despite reducing information, the extension still occupied a significant portion of the screen. Though it could be collapsed down, I knew it needed to be small enough when kept open for easy viewing without being obtrusive.

This led me to question the role of the “Borrow” and “Place Hold” buttons. Unlike traditional call-to-action buttons designed to drive conversion, these weren’t needed to persuade users as they are already motivated when checking availability. The extra buttons added visual weight without adding value, so I removed them and made each card the primary interactive element. This simplified the interface, reduced visual noise, and clarified the interaction model.
[image]

To further minimize visual impact, I made cards visually defined only on hover, similar to modern contextual menus. This reduced baseline visual density while preserving affordance when needed.
[prototype]