Goodreads

An iOS app redesign

About the project

The current Goodreads app is confusing to navigate, lacks essential features, and frankly, looks kinda ugly. This redesign aims to improve the app's user experience, prioritizing the needs and wants of readers.

Context

Solo designer
Personal project
November 2023 - February 2024 (12 weeks)

INTRO

(My comments will go under here!)

Background

Goodreads is a website and mobile app that allows readers to explore, judge, and engage with books. Users can receive personalized recommendations, create shelves (a.k.a. reading lists), keep track of their reading progress, and tap into community ratings and reviews.

It's many people's go-to place for discovering new titles, organizing reading lists, and creating connections with fellow readers. But despite its massive user base of over 150 million members, Goodreads isn't exactly the most user-friendly.

I'm actually a Goodreads user myself!

I downloaded the app in 2022, and I don't think it's been updated at all since then...

RESEARCH

Uncovering pain points

In order to better understand what frustrates Goodreads users about the platform's interface and functionality, I conducted a thorough survey to uncover core challenges within the user experience. The responses provided valuable insights, guiding me in identifying primary pain points and potential areas for improvement.

Clunkiness

Outdated-looking UI
Poorly designed navigation
Process of organizing books into shelves is "clunky and stupid"

Lack of in-app features

Most people prefer using the mobile app, but it lacks certain features that the website has, inconveniencing the user

To recruit survey participants, I turned to the most reliable source out there... Reddit.

Limited personalization

Cannot assign half-star ratings
Inability to customize the order of books in a shelf
No dark mode option

Identifying user motivations

I also gained insight into key motivators and usage patterns for Goodreads, which helped frame my understanding of user preferences and behaviors.

Track reading progress

Save books into shelves (e.g. Want to Read, Read)
Update progress towards annual reading challenge goal

Discover new books

Find reading recommendations, especially from friends
See book ratings & reviews to gauge interest in reading it

Engage with friends

See what others (friends, authors, "OOMFs") are reading or interested in reading
Chat in reading groups

Looking into competitors

To really pinpoint areas for improvement for this redesign, I analyzed various book tracking platforms, comparing their strengths and weaknesses with those of Goodreads. The competitors-- StoryGraph, Fable, and Oku-- were suggested by survey participants who had attempted move to them, but ultimately could not fully commit.

But at the end of the day, there is no real competition. Goodreads is where all the reviewers are at, and its established user base alone effectively captures the audience.

So instead of reinventing the wheel, let's realign it. The insights gained from this competitive analysis will inform improvements to the usability and features of the Goodreads app.

A quote from one survey respondant: "Goodreads has me in a chokehold and I can't get out."

PROCESS

Establishing redesign priorities

Drawing from my research on user motivations, usage patterns, and pain points, I identified three key areas for improvement.

Visual hierarchy
The Goodreads UI is often described as "clunky," which tells me there is a lack of clear visual hierarchy. By ensuring sufficient color and type contrast, appropriate spacing between elements, and alignment of elements, the content will be more effectively displayed and organized, making it easier for users to digest information and navigate the app
Workflows for organizing books
The current process of adding books to shelves is confusing and needs to be streamlined. Also, users can only reorder books within a shelf through the website, creating an unnecessary inconvenience. Users should not have to switch between devices to access certain features, so bringing the full functionality of the website to the app will improve the user experience.
Book description page
A book's synopsis, ratings, and reviews are crucial factors that influence a reader's interest and decision-making when choosing a book to read. The information should be presented in a clear, easily scannable format, allowing users to quickly process the details and make well-informed choices about their reading selections.

Lo-fi wireframes

These are the initial wireframes that helped me map out the layout of each screen and define user flows.

Using the Figma app to mirror the frames on my phone was incredibly useful for establishing the visual hierarchy of text and image. My phone's screen time was definitely off the charts during this period...

SOLUTION

Enhance book exploration

Separated home feed into two tabs: "Friends" and "Recommended," allowing users to navigate between social updates and personalized recommendations
Introduced a "quick add" button to each book card, facilitating more efficient book additions to users' shelves and encouraging user interactions
Added a "currently reading" section on the home feed, providing users with a more prominent reminder of their ongoing reads and and encouraging progress towards their reading goals
Utilized a layout grid to align elements consistently

Increase scannability

Introduced tabs for easy access to book details (publishing information, reviews, etc.), eliminating the need for extensive scrolling or navigating to separate pages
Increased the prominence of the overall rating, as it plays a pivotal role in capturing a user's interest in a book
Replaced the “like” and “comment” text with universally recognized icons, conveying the actions more efficiently
Changed the "Want to Read" (default) dropdown button to a standalone "Add to shelf" button to provide a clear, direct call-to-action
Added filter and search functions within community reviews, guiding users towards relevant information

Encourage reading progress

Utilized filter chips to categorize content, allowing users to narrow down what they're looking for and increase navigability
Implemented a floating action button for adding a book or shelf, prompting user engagement with its constant visibility, regardless of scrolling position
Displayed an annual reading challenge summary to highlight overall progress, motivating users to make strides towards their reading goals

Streamline shelf organization

Introduced shelf editing options, allowing users to reorder or delete books within a shelf without having to switch over to the website
Displayed shelf privacy settings and total number of books to provide users with more a comprehensive view of each shelf's details
Added a search function, enabling users to quickly locate specific books or authors within the shelf

Facilitate user interactions

Utilized a modal bottom sheet instead of a full-height bottom sheet to enable visibility of the previous screen, giving users more context when interacting with the bottom sheet
Increased prominence of the "create a new shelf" button, enhancing clarity of the call-to-action
Displayed all shelves in the bottom sheet, accessible by scroll, eliminating one unnecessary click ("more shelves") and preventing users from having to navigate to another page within the modal

Presented page numbers in a timeline format, offering users a sense of progression over time and giving them reference point with the last updated page number
Changed button text to "Mark as read" to enhance clarity

Full prototype

Explore friends activity and recommended books on feed
Look into details and reviews of book descriptions
Add books to shelves
Edit shelf, reordering and deleting books
Update reading progress

REFLECTION

Takeaways

I really enjoyed working on this project! There were definitely bumps along the way, but through this experience, I learned a lot about mobile UI design and its complexities.

The main challenge was designing for a smaller screen, which required careful consideration in every area. With limited real estate, I had to keep things focused and clear, eliminating any unnecessary elements or information. To ensure accessibility (sufficient sizing, color contrast, etc.), I adhered to mobile UI accessibility guidelines from Google and Nielsen Norman Group.

Although I've reached a "final design," it isn't actually final, because it lacks iteration. Conducting usability tests with the surveyed users would validate the effectiveness of my redesign and highlight areas for improvement. However, reaching out to the survey respondents is basically impossible, since they were all anonymous internet people. So, in future projects, I intend to engage directly with users through interviews to gain deeper insights and conduct thorough usability tests.

Moving forward, I am committed to revisiting and iterating on the design. I'm also interested in exploring the implementation of a dark mode feature to further enhance user experience.