Header
Goodreads:
Kindle Notes & Highlights
Tools
Adobe XD, Figma
Timeline
2 Weeks
My Role
This is an individual project. I led the research, design analysis and prototyping processes.
Brief
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?
Context Research
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.
90M
Registered Member (2019)
83.6%
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
User Research
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.
Participant Recruitment
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.
Procedures
Design Analysis
The interviews revealed what users liked and disliked about the current design of Kindle Notes & Highlights.
Landing Page
😍 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
-
Old-school interface
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.
Pain Points
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.
Design Principles
To address the problems faced by users, the prototype was designed based on the following design principles:
Flexible
Group highlights and notes the way users prefer
Logical
Display information in an easily understandable order
Minimalistic
Reduce distraction to show key information users need
Prototying
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.
%402x.png)
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.
%402x.png)
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.
%402x.png)
Thoughts
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:
-
Design
-
Business
-
Technical
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.