Goodreads
As a design mentor, I currently host a group of 50+ junior designers where I help them refine their UX/UI skills for the job force. One common issue is that most junior designers have never worked on a team before. I decided to lead a redesign of the Goodreads website, to give them experience working on a team with one another.
Project Overview
Challenge
Audit the existing platform
Modernize visual design while staying within brand identity
Identify and address accessibility concerns
Solution
Provide easier access to the core features of Goodreads by simplifying the sign up process
Introduce progress indicators throughout the platform for clear communication to users
Added segmented controllers/accordions to prevent user overload and give them more control over the content
Role
Lead UX/UI Designer
Time
4 Weeks
Team
Lead Designer - Myself
Junior Designer(s) - Jeremiah Shanholtzer, Sean Conover, Lynette Murguia, and Joseph Martin
Tools
Figma, Dribbble, Mobbin
Audit
As a lead designer on this project, I started this redesign by auditing the entire existing Goodreads platform. From there I had the team go through each page individually and comment on each of the things they did, or didn’t like.
This allowed us to align on the parts of the platform needed significant changes, or could be shelved for our MVP.
Team Comments
This screenshot shows the amount of collaboration within the team.
Sign-Up Flow
One of the biggest issues with the current Goodreads sign-up process was that users were forced to review/rate a minimum of 10 books before accessing the platform. I suspect this is for their algorithm to provide accurate recommendations. The problem with this, is that it gate keeps their platform from casual users. This means all of their proprietary content is behind the sign-up flow.
Our redesign targeted this primary issue, as well as adhering to AAA accessibility guidelines.
Original Design
This page shows when/where the tournament is happening, adds room for custom lines of copy, and shows upcoming/past tournaments.
Redesign
Some of the major changes here include active/inactive states for each input field (not pictured), a clear progress indicator w/helper text, and the ability to sign up with other social accounts.
Home Page
The home page is your hub on any platform. One of the challenges I found on Goodreads, was that it was treated more like a social media platform by making your friends’ updates the primary content you see. I felt that it was more important for users to clearly see their Bookshelf (the books you are reading, completed, and waitlisted.) and the exclusive content available on Goodreads.
Original Design
Here’s the current landing page
Redesign
Updates include, a progress indicator for your reading goal, the dropdown status buttons for your books, and segmented controllers for content!
Book Page
The book page is arguably one of the most important pages on a reading platform. As I reviewed their current design, one of my biggest concerns was the incredibly long scrolling. All of the important information was there, however it required long bouts of scrolling to see everything. By using accordions, users are able to control how much they’re seeing without overload.
Original Design
The current book page with other features like reviews, recommended, and about the author. (Not pictured)
Redesign
Updates include accordions, different platforms to buy the book from, and bread crumbs for accessiblity.
Final Thoughts
What I enjoyed about leading this project was watching everyone grow alongside each other, and seeing their collaboration skills increase tenfold. What was once 4 siloed designers, became 4 communicative team members.
Expansion
I think we have a great foundation here. There are plenty of great elements introduced here that I’d love to see expanded to the entire platform with more time.
User Testing
With limited time and resources, I’d love to A/B test with a small control group, comparing the original design to our proposed concepts.