Kindle Notes & Highlights
Adobe XD, Figma
This is an individual project. I led the research, design analysis and prototyping processes.
Enhance a knowledge organization feature on Goodreads's website to drive better insights from Kindle.
Pick a book, read the notes, put it back.
And repeat 20 times.
When people read on Kindle, they can highlight interesting ideas and add notes. These insights will be shown on their Goodreads' account.
However, the highlights and notes can only be viewed on a book-basis. If the users read several books on the same topic, they cannot group their notes from different books together.
Is there a more flexible way to manage the insights from books?
I adopted a research-driven design process due to tight project timeline. I started by investigating the origin and the business purpose of "Kindle Notes & Highlights" through literary review.
Goodreads & Amazon: Business Story Behind
In March 2013, Amazon acquired Goodreads to leverage its social components to create synergies for its book selling business.
Registered Member (2019)
Digital Reader USA Market Share (2019)
What is "Kindle Notes & Highlights"?
To foster the integration between Goodreads and Kindle, the Goodreads team officially launched the "Kindle Notes & Highlights" feature in 2017.
"It's a quick way to review all the books in your Kindle library with notes and highlights, edit or add to your notes, and decide which ones to share with your friends to start a conversation."
── Goodreads Blog, 2017
I developed a research plan to gather users' feedback and understand the context of using the feature.
My research goals focused on the 3 aspects of user needs, behaviors, and expectations. It was guided by questions on the users' pain points and their desired journey for their Goodreads experience.
The insights gathered would serve as a blueprint that outlines the design principles of the prototype.
I identified 16 potential representative users from the review section of several books. All of them showcased extensive reading history on their Goodreads profile. I sent personal messages to them over Goodreads. In the next week, 3 of them replied and they were interested in scheduling a deep-dive to talk about their experience over Zoom.
The interviews revealed what users liked and disliked about the current design of Kindle Notes & Highlights.
😍 The participants love:
Book cover image is shown for each book
The books are ranked by the latest updates
😢 The participants dislike:
List view leads to unnecessary long scrolling
Excessive white space
“View your notes and highlights” is hard to click
Look at all those wasted space on the right...Should have moved the books up there so it won’t end up with frustrating long scrolls
Specific Book Page
😍 The participants love:
Intuitive to add notes right below the highlight
Flexibility to set the sharing preference of each highlight
Mark as spoiler” feature is very relevant
😢 The participants dislike:
Too much information is displayed
The percentage is not helpful
The column for sharing preference, “delete” and “mark as spoiler” is oddly displayed
Need to be certain about the book to find a specific highlight
I have to check the book one by one... It won't be as difficult if we can assign each quote into a shelf like we usually do for each book.
Based on the research result, I conducted a thematic analysis by coding recurring themes as summarized below:
1. Inflexible book-only grouping system
Highlights and notes could only be grouped by books. Users would face difficulties in finding a quote if there was a large collection of books.
2. Cluttered content
Information was not presented in a user-friendly way, especially the unused white space on the landing page and the crowded information on a book page.
3. Outdated aesthetics
The user interface had an old-fashion design with tight spacing.
To address the problems faced by users, the prototype was designed based on the following design principles:
Group highlights and notes the way users prefer
Display information in an easily understandable order
Reduce distraction to show key information users need
Through research and qualitative data, I identified the users' needs for a flexible knowledge organization system on Goodreads. The reimagined "Kindle Notes & Highlights" consisted of the Book View and the Idea View to provide a dynamic experience that fulfilled multiple use cases.
Book View - Landing Page
Before - Books were shown in list format along with excessive white space at the right column and between books. Users could access the detailed book page by clicking "View your notes and highlights".
After - Books were displayed in grid format which minimized scrolling by a more focused and balanced visual design. Users could easily access the detailed book page by clicking each block.
Book View - Specific Book Page
Before - The interface was cluttered with a 3-column design. User found the screen too busy as they could view secondary information like community highlights and notes.
After - The user interface was redesigned to minimize distraction by removing secondary details such as shelving and community highlights. The sharing and spoiler alert features were also integrated into the highlight body.
Tags that help you group notes the way you like
Users can now group relevant ideas across books by creating tags for each highlight and note. After clicking the "Idea" icon, users can search the tags they created or add new tags.
The original functions of Notes, Mark as Spoiler, Delete and privacy setting have also been incorporated into the new design.
Idea View - Grouping Notes & Highlights across books
The newly designed Idea View provided a flexible organization system for users to group their highlights and notes the way they liked.
Users could select the tag on the navigation menu on the left (e.g. "Growth"). They could quickly retrieve all highlights and notes on a specific topics.
As a huge reader myself, I have found the Goodreads website interface problematic for a while. When I conducted the interviews on "Kindle Notes & Highlights", I realized there are other people who share similar thoughts and they are glad that someone is trying to do something.
Happy Reading Time
All the books and highlights shown in the prototypes are some of my personal favorites, and I had a great time incorporating these personalized touches into the prototype.
The Biggest Challenge
It was difficult to decide which UX improvement should I prioritize within the tight timeline. It was not feasible to address every pain point mentioned by the users in 2 weeks.
What Did I Do?
I revisited all pain points from both secondary and primary research, and assigned them into one of the following categories:
I decided to focus on the design aspect, which revolved around a rigid organization system along with multiple minor UI adjustments.
What If I Had More Time?
I would have conducted 2 to 3 rounds of usability testings to iterate on my prototype.