Tools
Figma, Balsamiq, Illustrator
UX Design Personal Project
Redesigning 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.
Platform
Website
Organize ideas the way you like.
Drive insights across books and authors.
Suppose you are looking for some quotes on personal growth from Bob Iger's memoir on Goodreads today,
👈
Landing Page
Book Page
Not so hard, right?
Let's find another quote from Michelle Obama's memoir.
Landing Page
Book Page
Oh wait, I have to go back to the landing page to find the book. And I have to scroll through 117 highlights to decide which ones are related to personal growth?
It works, but it can be better.
Let's take a step back and find out how.
Context Research
Due to tight project timeline, I decided to adopt a research-driven design process. I started by investigating the origin and the business purpose of "Kindle Notes & Highlights" through literary review.
Business Story
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)
The Feature
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
Research Goals
-
To understand users' motives in highlighting and adding notes on Kindle
-
To identify how users make use of "Kindle Notes & Highlights"
-
To recognize the improvement areas of "Kindle Notes & Highlights"
Guiding Questions
-
Why do users highlight or add their notes on Kindle when they are reading?
-
How do users retrieve their highlights or notes?
-
Are users satisfied with "Kindle Notes & Highlights" feature on Goodreads?
-
What are the things that users like or dislike the most about "Kindle Notes & Highlights"?
After understanding the project context, I designed the research plan to capture users' pain points and expectations on their Goodreads experiences.
Methods
-
Semi-structured interviews
-
Think-aloud task completion
Participants
3 Goodread users who use a Kindle, and are aware of the "Kindle Notes & Highlights" feature
Analysis: Users' Pain Points
I created a codebook for thematic analysis and identified the major pain points faced by users in today's Goodreads platform.
1
Inflexible 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.
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.
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
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
The book page aimed to showcase the user's collection of highlights and notes. The user interface was redesigned to minimize distraction:
-
Removed secondary details such as shelving and community highlights
-
Integrated sharing and spoiler alert feature into the highlight body
Users could group similar ideas across books by creating personal "Idea" tags.
%402x.png)
%402x.png)
Idea View
The newly designed Idea View provided a flexible organization system for users to group their highlights and notes the way they liked.
Users could quickly retrieve highlights and notes on specific topics that were linked with an "Idea" tag.
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.