top of page

Goodreads

An iOS app redesign

goodreads_thumbnail.png

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.

goodreads_competitiveanalysis.png

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.

​

  1. 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
     

  2. 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.
     

  3. 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.

goodreads_wireframes.png

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

goodreads_home.png
  • 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

goodreads_bookdescription.png
  • 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

goodreads_mybooks.png
  • 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

  1. Explore friends activity and recommended books on feed

  2. Look into details and reviews of book descriptions

  3. Add books to shelves

  4. Edit shelf, reordering and deleting books

  5. 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.

bottom of page