Book Detail Page - Original

Below is a screenshot example of what the Goodreads Book Detail Page looked like prior to 2021.

Due to its importance, the page had collected a dizzying number of components over the years. In our audit, we identified 65 different components comprised within a book page.

In user research, customers repeatedly described the page as busy, dense, and overwhelming. They struggled to find and identify key book information when prompted.

Example book detail page on Desktop.

 

Example book detail page on mobile web.

Most notably, testers struggled to identify a means of 'getting' a book. Each book page displays one or more buttons that link to the user's preferred book seller, and the associated affiliate revenue is crucial to the Goodreads business model. New customers consistently took several seconds to identify these buttons on the page.

Customer experience was somewhat improved on mobile experiences, but the two versions of the page lacked feature or style parity.

Furthermore, the two versions of the page had been built on a different frontend code base, adding complexity and effort to maintenance and improvement.

Updating the design of the Goodreads book page an opportunity to modernize the website's most important page, and streamline future iteration and experimentation across platforms.