Responsive Web Design
Goodreads Book Detail Page
Overview
From 2020-2021, Goodreads underwent a large-scale upgrade of its front-end framework, moving to isomorphic Javascript apps powered by AWS AppSync.
Our Design team had a broad directive to transform the CX of our site, starting with our most high-value page: the Book Detail Page.
The Book Detail page, at that time, accounted for the plurality of both signed-in and signed-out views.
The page’s design has not been significantly altered in over 10 years.
Team
Full time:
Product Manager
Design Lead (Myself)
Engineering Manager
9 Engineers
Dedicated experts:
Data Scientist
Visual Designer
Art Director
Project Goals
Redesign the highest-trafficked page on Goodreads with responsive web conventions and an improved user experience.
Simplify the feature set of the page to the most important user needs — learning about the book and reading reviews from Goodreads members.
Drive engagement actions, user acquisition and other high value actions.
Maintain advertising revenue streams.
My Role & Responsibilities
Define the key features of the launch product, collaborating side by side with stakeholders on the leadership, data science, revenue & design teams.
Compile, plan and conduct user research exploring existing and proposed design solutions.
Collaborate directly with engineering team members to drive an aggressive launch timeline.
Process
This was a large-scale, multi-year project. Development was organized using the ‘double diamond’ method of planning and execution.
Below I’ve presented details related to each stage in the project development cycle:
Results
The book detail page was released as an opt-out beta program in Q3 2021.
During that time, we conducted comparative usability testing and found that key engagement actions were much more visible. This finding was corroborated by usage analytics that demonstrated engagement actions like ‘shelving’ a book as Want to Read grew, as did click-throughs on the ‘Buy’ button, increasing affiliate revenue for Goodreads. Overall page conversions (which included shelving actions, buy buttons, and sign-in/sign-up) increased by approximately 20% across all platforms.
The new design was permanently rolled out in 2022. Since then, the frontend components built for the book detail page template have been used to update other pages across the website at a significantly reduced engineering cost, thanks to our investment in a flexible component library and design system.
Clarity at a Glance
The most complex aspect of the book detail page was the Ratings & Reviews segment. Based on user research, we identified that the most important reader (customer) requirement was to quickly assess overall sentiment for a particular book.
To facilitate that, I introduced the interactive review distribution graph. This presents an immediate visual cue that can provide insights not apparent from the rating average, and also allows visitors to quickly interact with the many filters available for drilling down for specific insights.
