Role.
Individual Project
Time.
5 weeks
Tools.
Figma, Protopie
Methods.
Comparative research, user testing, high-fidelity prototyping
Background.

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.

Problem.

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.

User research.

Building a user journey map to understand the sharing process in smaller chunks.

Insights.

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."

User journey.

When building the user journey map, I treated the emotionally "up" moments as design opportunities, and the "down" moments as questions for me to find out why users felt frustrated. I then found that the low visibility of the share feature, and the community being entirely separated from the reader mainly increased the time for a user to reach the goal.

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.

Redesign scope.

Simplifying two interaction-heavy activities: share thoughts, view and interact with shared content.

How do the other reading apps deal with these two processes?

Comparative research.

Finding out common practices and getting inspiration from the market.

Takeaways.

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.

Early ideas from comparative research takeaways.

Share thoughts.

View shared content.

Interact with shared content.

Early stage design.

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.”

Sketches.

How to enable quick access to the community? Inspired by the comments section from comparative research, I took a step further and experimented ways to include the community section in the reader. I also drafted the app flow and brainstormed ways to interact with the community while reading a book.

Wireframes.

I then drafted wireframes to help building the app architecture. Besides being able to enter the Goodreads community from the main navigation, users can view and interact with community inputs directly in the reader.

App architecture.

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.

Design and iterations.

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?

Design 01.

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.

Iterations.

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.

Iterations.

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.

Design 02.

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.

Iterations.

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.

Iterations.

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.

Design 03.

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.

Iterations.

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.

Final comp.

TOP