top of page

​

​

​

Overview

A (hypothetical) new chapter for the Goodreads mobile app

One of my most loved apps gets a well deserved refresh in this personal project. Check out how I did it.

Role

Lead designer

Timeline

5 months

Core Responsibilities

Conduct user research and a heuristic analysis, identify users’ most important workflows, and create a design that improves the overall information architecture of the app.

Challenge

Room for improvement

About a year ago, a friend in my book club introduced me to Goodreads. I began using the app and it has quickly become a central part of my routine when reading, allowing me to discover new books, track my reading progress, and connect with fellow book-loving friends.
 

The UX designer in me loved the concept of the Goodreads app, but felt that it was also a prime candidate for a redesign. My friends shared the same feeling – while the idea is great, several functions of the app are difficult to locate and the overall organizational structure could be improved.
 

As post-pandemic book clubs become more popular and Gen Z inspires a “reading renaissance” with the popularity of BookTok (a niche TikTok community influencing the “next book you should read” for many of us, myself included), this felt like the perfect time to dive into what could be improved within the Goodreads app.  

Challenge

User research

Understanding users' priorities

I began my user research by conducting a hypothetical red-route analysis of the app (check out this wonderful article on the topic by Justin Baker, Lead Designer at Netflix). This analysis was selected as a method to prioritize which user workflows should be most easily accessible. My initial assumption was that “explore recommendations for new books,” “search for new books,” and “track my reading progress” would hold the highest priority.

​

Once my hypothesized matrix was complete, I validated this by distributing a short survey to friends and family who use the app to collect data on their most frequently performed tasks. The resulting, data-driven matrix showed the following user tasks as holding highest priority: 

  • Leave a book review (stars)

  • Search for new books

  • Explore recommendations for new books

  • Track my reading progress​

  • Check out what my friends are reading

  • Read reviews of a book

  • View my profile

Validated red route.jpeg

Hypothesized Red Route Analysis

Current state red route.jpeg

Validated with User Data

In addition to validating priority user tasks, the user survey also provided important experience data which would inform my planned redesign. 
 

  • When asked to rate “how easy it is to navigate the Goodreads mobile app” on a five point scale, 64% of users gave a rating of three or below.

  • When asked how the Goodreads app could better meet their needs, users often mentioned a desire for streamlined functions and more intuitive browsing

  • Users also expressed interest in the app’s “groups” feature. This feature is currently difficult to locate and use, with many users being surprised that the functionality even existed.

Heuristic analysis

Before beginning any visual design activities, I also conducted a heuristic analysis of the current app using my favorite heuristic framework, “UI Tenets and Traps.” This is a simple yet powerful tool that I love using in design prep work to uncover the underlying traps that I should be solving for.
 

I began by identifying overarching traps in the current mobile app, followed by a closer analysis of traps found in four of the prioritized user workflows. Traps identified in the app included:
 

  • Information overload 

  • Poor grouping

  • Uncomprehended elements
     

My full Tenets and Traps heuristic analysis can be viewed here.

IMG_2955-768x1024.jpeg
Goodreads Redesign.001.jpeg

Example of one identified "trap" in the current Goodreads mobile app

Site map analysis

In addition to a detailed heuristic analysis, I took a closer look at the site map to dig into exactly why users reported difficulty navigating the app. The current site map illustrates the somewhat confusing and, at times, duplicative actions that users can take throughout the app.

Goodreads Redesign.017.jpeg

By consolidating the original five options in the navigation bar down to three, we eliminate redundancy and reduce the number of steps it takes users to complete certain key workflows (such as searching for friends or finding a group to join).

Goodreads Redesign.0011.jpeg

Quick recap of design goals based on user research: 

  1. Streamlined navigation

  2. Easy paths for most frequently performed user tasks

  3. De-cluttered browsing experience

  4. Intuitive and obvious “groups” feature

User research

Wireframing

Low fidelity

Beginning with some rough outlines and 50+ screens, I made some initial design decisions. 

 

  • The content currently included in the “Home” and “Discover” tabs could be consolidated into the new “Home” tab for quicker browsing

  • The content currently included in the “More” tab could be consolidated into the “My Books” tab for easier navigation to user profiles and groups

  • Book cover images could be expanded to better match the mental model of browsing at your local bookstore

  • The groups feature should be obvious and available to users in the same place their own profile exists, mirroring similar functionality of other social apps like Facebook and LinkedIn. 

Lofi.png
High fidelity

I then took my rough wireframes and translated them into 35+ polished screens. Big shoutout to the new variables feature in Figma which made the process of designing a prototype for 25+ books WAY easier (instead of creating a a separate “Book Screen” for each book, the use of some clever variable assignments and prototyping interactions allowed for the same interactions with just one screen).

​

I added a minimal color palette of blues and oranges and took inspiration from similar social apps like Spotify, LinkedIn, Facebook, and Instagram for the look and feel of posts and profile screens.

Hifi.png
Hifi 2.png

The resulting redesigned app accomplishes the goals I set out to meet:

  1. Streamlined navigation with the introduction of a new three-topic navigation bar

  2. Easy paths for users to add books to their shelves, provide updates on their progress, and view summaries of their reading activity

  3. De-cluttered browsing experience for users to feel like they’re at their favorite bookstore while seeing what their friends are reading

  4. Intuitive and obvious “groups” feature included in the “My Books” tab so that book clubs can be seamlessly integrated into users’ habits with the app

Wireframing

Solution

And here it is!

Design is an iterative process, so in the future I hope to revisit this project and continue to make improvements, such as:
 

  1. A “message board” inside of groups where book clubs can share thoughts and connect on details for their next meeting

  2. Enhanced analytics to break down users’ genre preferences, favorite authors, etc. (maybe a “Spotify-wrapped” style yearly recap?)

  3. Privacy settings to allow users to set what types of reading updates are shared with their friends

 

​As always, thanks for reading!

Solution
bottom of page