InBrief
📖

InBrief

Try out the prototype (supports swipe / click gestures)

Project

InBrief is a passion project inspired by a class reading (Informatics 161 Social Analysis of Computing ) where a professor talked about through the essay assignments how her students would spend more time on social media rather than reading. I draw inspirations from the passage and designed a social media application with the theme of reading and sharing.

Goal

  • Conduct extensive research on the market alternatives and competitors.
  • Use wireframe, persona, use cases and flow to create an outline of the application concept.
  • Test the prototype through usability testing sessions with metrics such as average session length, customer satisfaction rating, task completion rate,

Research

Audience

It is alarming to learn how teenagers are affected and consumed by social media. According to The Washington Post,

In fact, 1 in 3 U.S. high school seniors did not read a book for pleasure in 2016. In the same time period, 82% of 12th-graders visited sites such as Facebook, Twitter and Instagram every day.
image

In my interviews with 5 classmates asking how they think about reading, they said the following:

"Hard for me to focus when reading. It is just not fun to read by myself."
"There are too many distractions when reading ebook and it is not convenient to carry a paper book around."
"It is difficult to find a book that interests me."

It was clear that the current generation is experiencing a drought of reading books and essays. The following are my takeaways from the interviews and soon become my entry point to designing a solution addressing these challenges.

  • Users are seeking engagement when reading an ebook
  • The solution must reduce the distraction from connecting with the content for the users
  • In addition to a recommendation algorithm, the content needs to be concise for users to glance through when swiping.

Competitive Analysis

image

Among 5 popular book reading applications from App Store, I created a comparison to understand the attractive features each application has and the challenges each application faces.

Instaread, Lucid and Blinkist focus on creating short summary of a book to help users speed read a book to understand most of it. There weren't any social networking features built-in to the app. Since the content is mostly generated by the application itself, all apps are good at managing and monitoring the reading progress.

The idea of speed reading is modern and efficient for millennials who do not enjoy reading. However, it also has major drawbacks. Because of the format, the readers will not be able to access the original context directly from the author. Even if the story remains the same without micro details, the reader is still listening or reading to a paraphrased story. In addition, this format also weakens the bond between the author and the readers and discourages social interactions among users.

Goodreads, on the other hand, shares a very similar structure with the social concept of InBrief. Rather than having the application generating content for the user, Goodreads encourages users to generate content for other users. In this case, users are able to share their book reviews or comments in public. Because of the comment feature, Goodreads successfully built a community about reading books. Users can share their thoughts on why they love or hate a book with thousands of others.

However, Goodreads still lacks of author-reader engagements, and the readers can only learn about a certain book from a few comments in other reader's words.

Ideation

What is different about InBrief is that InBrief is trying to get people who don't read interested in the book rather than with high rating numbers and glowing book critics. In InBrief, there are sneak peeks, direct quotes from the book with the user's own comments, comments from other readers to create an atmosphere of a reading party. As well as original content from the author to engage with readers with behind the scene stories, inspirations for the book, impactful events, etc.

In other words, InBrief is trying to build a community for people who read and people who don't read. It is a welcoming place for anyone who is interested in learning about other's stories no matter if the user is a visitor, a reader, or an author.

image

Design

Flow

image

Wireframe

Based on the flow and to follow an Agile design process, I decided to wireframe the page that matters the most, the home page. The idea was simple - to get people who don't enjoy reading interested in a book; to help people who enjoy reading find the next book to read.

image

There are two sections on the home page. The first section a user will notice is an array of books. It serves as a recommendation on what books are popular among the user base.

The section below is the feed containing posts from people a user follows. The posts could be direct quotes from the book as well as a short review of a book. In the wireframe, I used circles and rounded rectangles as symbols for different types of user categories, which are regular users and authors. Authors can post quotes or the context behind a quote from the book. Having a special user category for authors is to bring them to the spotlight and give them the stage to engage with the readers so the users could be kept motivated and encouraged to use the app.

The wireframe design on the right shows a rough sketch of the book detail page. Because the book is the center of attention, the cover image will take up most of the space. Below the cover image, there will be 3 buttons with quick access to purchase on online book stores, save to a list, or bookmark this book.

image

Profile page is a central portal to manage and present all information related to the app's user. The competitor analysis shows that it is a common practice to show the metrics of how long a user has engaged in the app for similar applications. In InBrief, I believe by showing the metrics, it also motivates the user to read more and stay in the app long. It serves as a motivation to interact with others in the app.

In addition to the metrics, the profile page will also feature a book shelf that stores and managers all the bookmarks a user has collected.

image

The comment page is another essential page to InBrief. Because the app's nature is a social media app, it is important to have a place for users to share their ideas and interact socially. Instead of having heart likes similar to Instagram, Facebook, etc. I choose to use Applaud instead of Like similar to Medium. Comparing to Like and Thumbs Up, Applaud seems less direct and more encouraging.

Another aspect of InBrief is the exposure of the author's inputs. The comment page is an important frontier for authors to input their thoughts and experiences. There are no reading applications from the competitor analysis that give a large spotlight to the author, let alone social media reading applications. There is an opportunity for InBrief to develop and grow as an application that challenges the norm and bring something different to the table.

Iterations

image
image

After fully skinned the wireframe, I notice the separated sections of book recommendations and post feeds seems continuous and very much connected. In contrast, the two sections are mostly unrelated. I was concerned these segregated sections convey a message that forces users to prioritize one over the other because the post feed (Following) can only be seen after scrolling over the recommendation section (Today's Reads).

That's when I thought about having the Following section floated above Today's Reads / Reads for you. In this design, Reads for You remains as a background for the home page. The user doesn't have to scroll past the book recommendation section to see the lasted posts from others. This design elevates the social media nature of the app.

💡

To validate my theory, I conducted A/B testing, with the only variable being the segregated home page. The testing is conducted in the format of an app usage session, with each session ends when the participant finishes reviewing the page from the start to the end. The testing was conducted with 5 classmates and the results are the average time for each recording.

On the segregated home page, the Following works like a card and floats above the recommendation sections. The users can move and scroll freely. In the design without segregation, the two sections are one after the other. The user follows a linear scrolling pattern.

A/B Testing - App Usage Sessions
A/B Testing - App Usage Sessions

A/B Testing - Engagement Metrics (Average)

NameToday's ReadsFollowingHome Page
Without segregation
8 seconds
22 seconds
44 seconds
Segregated home page
16 seconds
31 seconds
58 seconds

From the results, I learned that with segregation, the engagement time for the recommendation improved by 50%, 29.1% for the following feed and 24.1% for the entire page. This proves the design with segregation is the better solution and validates my theory.

Alternative profile page designs 1
Alternative profile page designs 1
Alternative profile page designs 2
Alternative profile page designs 2
Alternative profile page designs 3
Alternative profile page designs 3
Profile page flow
Profile page flow

Deliverable

image

image
image
image
image
image
image
image
image
image
image
image
image
image
image

Reflection

InBrief holds a special and different place in my heart. All of the ideas are originated from simply a class reading about how people are reading less and less to spend more time on social media. I felt motivated by the idea to create a concept of a social media reading app.

If I get the chance to work on the project again, I would like to complete the project by completing the application's entire flows, starting with signing up. I would also love to create a design system and conduct several UX research, such as thinking-aloud, surveys, and cognitive walkthroughs, to improve usability.

In this journey, I learned to take it easy by wireframing to UX researching before create any high-fidelity designs. It was interesting for me to speak to the professor and get their perspectives and suggestions on my design. It was also my first time to conduct A/B testings and I enjoyed the process of coming up with a hypothesis and use data to validate the theory. I am proud of this project and I am glad with what I have learned from it.