StoryGraph

UX / UI Design

Role

1 day, Spring 2026

Duration

Tools

Figma, Claude

StoryGraph is a mobile app for tracking reading, often contrasted with the foundational GoodReads or the newer Fable. StoryGraph’s users enjoy its detailed approach to data visualization, but struggle with the UI’s overlapping pop-ups and maximalist informational approach.

I have performed a few small, high-impact revisions to StoryGraph’s interface and basic functions. An update to its main menu, refresh of its edit feature for current books, and facelift of its challenges page allow for users to continue to receive the wealth of insights on their reading they so love while being less hindered by the in-app interactions.

Context

Problem

I begin by asserting that, overall, StoryGraph is a wonderful app. It has many excellent features and benefits those who wish to diligently track their paperback and audiobook consumption in order to reflect on their literary diet.

That said, there are several glaring flaws in the interactions the app invites for the user. Namely, updating a current read opens a dialogue that overlays on top of the existing interface in such a way that prevents easy interaction. Additional dialogues may be opened and the previous ones do not automatically close. The layout of current reads in a horizontal fashion limits the details associated with each one such that they are effectively unusable to the customer.

The latest update to StoryGraph brought some welcome revisions to the visualization of the key questions asked in the book review process, showing them as percentages of a bar graph. While this provides some improvement, there is still much to be done about the wordy description section and the AI description (notably in beta) to make these useful to the customer. Instead of a long scroll function, I recommend breaking the information into distinct cards and including a personal reading journey to visualize the notes and timeline of reading a particular book.

Process

d

ddd

Product

Editing Current Reads

My version creates a dropdown box that appears when the pencil icon to edit is selected. Users may toggle easily between completion percentage and hours/minutes listened. Status can be updated (and now includes icons) in the same place that start date may be revised.

Showing Current Reads

Removing the horizontal shelf allows for greater detail to be displayed. If the purpose of the home page is to show a quick view of the most recently interacted-with current reads, a horizontal visual shelf provides too little information to be meaningful for the user. A detailed view with editing capabilities is more useful. The view all button remains as I suggest limiting the current reads view to 3 initial books or audiobooks.

Main Menu

I have updated the main menu to show the StoryGraph logo in place of the home icon, suggesting that this is where users may click to return to the home page of the app which is their digital shelf. Additionally, I have revised the order of the remaining icons, swapping the challenges (now a trophy instead of a medal as the circle was too similar to the pie chart) and the statistics (a pie chart still) since the main use case for most users visiting StoryGraph is to review the data visualizations of their reading.

Results

Figma Prototype

A jaunt through my Figma prototype shows the new expanded dropdown for editing the current reads.

Then, I briefly take you through the detail view of a book, which shows new detail cards:

  1. Description, including an updated version of the personalized AI description

  2. Community Reviews, which displays Mood in a similar visualization to the statistics section for year-to-date books.

  3. My Reading Journey, demonstrating the trajectory of someone’s reading journey on a timeline in addition to any notes taken on the book over the course of reading.

  4. Similar, allowing readers to quickly navigate to similar titles like in Fable.

I end with a quick view of the new layout of the Challenges page, showing a reading streak and a calendar of successful reading days.