Kindle App Community Redesign.
iOS UX/UI Concept Design
Redesigning Kindle app’s community feature to help readers share their reading experience easily.
Have you ever wanted to share something you just read that interested, empathized, or inspired you?
It could be
What if you need to go through all these steps to do it...?
As a long time Kindle user, I love reading books with its powerful learning tools. However the last year I noticed that although the Kindle app incorporates the Goodreads community (a book review platform that like Kindle, is an Amazon subsidiary), it was hard to find where it is, and it took many steps to share a thought to the platform.
After reading hundreds of app reviews, I found that I wasn’t alone. Readers enjoy reading a good book, but currently don’t have a convenient way to share their experiences with the others in the community.
Is there a way to help the Kindle app users share their reading experiences with the other readers easily?
To understand specifically why the current process isn't friendly enough, I first tested the app with 3 Kindle users.
Building a user journey map to understand the sharing process in smaller chunks.
The share entrance is hidden, users can’t see what they shared immediately, and are confused by a different visual theme of the community.
What I did?
I tested the Kindle app with 3 users by having them walk through the sharing process.
"Find the Goodreads community."
"Share anything about the book to your Goodreads account."
"View what you just shared."
A closer look at the pain points.
We started from creating sketches for the main navigations (left figure) and the common features of a microblogging app (right figure).
Hidden share entrance.
Hard to find shared content.
The Goodreads community is in another visual style.
Simplifying two interaction-heavy activities: share thoughts, view and interact with shared content.
How do the other reading apps deal with these two processes?
Finding out common practices and getting inspiration from the market.
A comments section in the reader helps close the gap between read and share, while public reading marks provides a convenient way to view shared content. I was also inspired by Medium to enable users to share while taking notes or making a highlight.
What I did?
I selected 4 reading platforms that include their reader community in the app to look at the community share flow and features.
Common practices and inspiration.
A comments section in the reader's menu provides a shortcut to the community.
Popular highlights create a sense of co-reading.
Medium: responding to a highlight creates a comment.
View shared content.
Interact with shared content.
With early ideas of how the sharing process could be simplified, I started to brainstorm the key features and build the app architecture.
Feedback for sketches and wireframes.
Users like the idea of the reader and the community side by side. However the microinteractions weren't clear and some visual elements didn't fit their expectations. Users also expected to see their shared content immediately after posting it.
What I did?
I tested the early mockups with 3 users to see if the drafted flow helped achieve easier content sharing.
“View current page notes.”
“Share your thoughts to the other readers.”
00 - Tutorial
Quickly learn the interactions to participate in co-reading.
01 - Home
View reading progress at a glance.
02 - Goodreads community
Have a coffee chat in the book club.
03 - Reader
Interact with others' reading marks.
04 - Reader - community tab
View community notes and share what you're thinking.
When prototyping higher fidelity mockups, I focused on system feedback and visual hierarchy.
How to design visual cues that are simple and can clearly communicate their functions?
The reader and the community side by side.
Can community be even closer than as a section in the menu? I use a swipe gesture to bridge these two sections in the reader and enable users to share to the community without closing the book or being redirected to an external link.
Iterated layout and visual elements for better accessibility.
To emotionalize the reading experience, I designed the app UI based on an adaptive color palette. What color selection mechanism can best help focus on the actionable areas? I tried out different color harmony rules.
Refined the swipe gesture for screen transition.
I used one gesture to connect two pages, however the lack of visual cues on the reader made users wonder when to do the swipe. Therefore I experimented ways to introduce the gesture.
I also refined the gesture with interactive prototyping tool to ensure that the transition is feasible and smooth.
View and interact with community reading marks directly in the reader.
Users can view the top highlights while reading and have an overview of the popular notes in a pop-out tab.
Minimized tab content to focus on lightweight interactions.
From user tests I got feedback that since the community tab was already very close to the reader, a tab in the reader with similar content felt redundant. Therefore I iterated the tab as a window to preview the top shared content in a minimum style.
Adjusted the visibility of the controls to keep the interface neat and oriented.
From comparative research and user tests, I found that being able to display/ hide the community reading marks easily is very important. I did a few rounds of iterations to make sure the visual cues are at proper visibility.
Note-taking does the share.
By easily selecting whom to share with, users can share their reading experience to the other readers through note-taking or highlights. The shared content can be seen and edited immediately in the reader after being sent.
Added system feedback for note-sharing.
"What have I shared and where to find them?" Users hope to have some feedback for notes shared. Therefore I added visual feedback at multiple places to make sure that new content can be easily accessed.
Think more of the branding.
As I started to redesign the Kindle app, I walked through its interfaces and looked for a visual guide to follow. However I found that the product currently incorporated multiple platforms (Amazon bookstore, Kindle and Goodreads) and it seemed that a main visual theme has not been decided yet. Out of this reason I redesigned the community feature without much focus on visuals for the branding purpose.
Each product has its visual system and it is important to design based on the guidelines provided. Therefore following up this project I would iterate the app based on a built Kindle language.
Individual project is not individual.
I got a lot of space to design what I was interested in at my pace in this individual project. However every step to the next stage was actually prompted by the inputs from either the users or my instructor. I learned how to make the best of resources around me to get constant feedback. App store reviews, informal interviews, user tests...they can all back up design decisions in a limited time frame.