CommonRead

A new mobile app for readers to indulge in their favorite books and connect with friends.

Details

Project Type - UI/UX Design

Role - End-to-end Designer

Client - Student Project

Tools - Figma, Miro, Whimsical

Project Overview

CommonRead is a mobile app that combines social media features with the digital reading experience. Though reading itself is an independent activity, it can prompt conversation and strengthen friendships–much like the purpose of book clubs. CommonRead has a similar purpose, though, taking place within the digital sphere. Where apps like GoodReads focus on tracking ratings and books read, CommonRead allows you to do that and more. CommonRead allows you to read books, send your favorite quotes to your friends, and stay in touch with book clubs—all within the app. CommonRead opens the door to many more ways to connect from page to page and beyond.

My contribution

As the only designer on this project, I had complete control over every aspect from start to finish. Being the third of three capstones completed within UX Academy, this project was produced on a similar timeline to previous projects but was done within the constraints of 80 hours. Differing from the simplicity of my other projects, my goal was to create a complex app centered around the single idea of combining connection with the solitary activity of reading.

Process Overview

  • Competitive Analysis

  • Survey

  • User Interview

  • Persona

Research

  • Site map

Information Architecture

  • Task Flow and User Flow

  • Sketches

  • Low-Fi wireframes

Interaction Design

  • Branding

  • UI Design

  • UI Kit

UI Design

  • Hi-Fi prototype

  • Usability findings

  • Affinity map

Iteration and Implementation

Research

Within this phase, my goals were to understand…

  • Why ebooks are preferable to physical books or vice versa.

  • How valuable community and connection is to readers who engage in the solitary activity of reading.

  • How CommonRead’s current competitors serve readers’ needs.

  • What features users would like to see in CommonRead.

User Interview

In order to better understand what users would desire out of a mobile reading and social media app, I conducted 3 user interviews in order to learn about what current readers valued about reading and the apps that they use to capture their thoughts and connect with others. By doing this, I hoped to identify their overall needs and apply what I learned to the design of CommonRead.

Competitive Analysis

Goodreads: 

  • not wide enough catalog of books–users have to input book information.

  • “Readers also enjoyed” section difficult to find.

  • Lack of international books available to rate.

Letterboxd:

  • No “sort by region or country of release”

  • Social aspect is lacking–can’t tag friends in comments or like comments, don’t get notifs when a friend posts a review or comments.

  • Can’t share profile or reviews on Instagram story

  • Rating to accuracy of .1 would be more precise than .5.

Wattpad:

  • Difficult to find a book if you don’t know title or author

  • Limited to only 2 books in offline mode

AppleBooks:

  • No skeuomorphic page turn

  • Lots of bugs

Findings:

Needs

  • Skeumorphic page flip when reading ebooks

  • See all books in library

  • sort/keep track of what they are reading

    • Sorting into lists or folders is valuable.

  • Some need to have a way to share their thoughts.

Frustrations

  • Some don’t like the idea of sharing ideas with strangers

  • When “recommended for you” recommendations aren’t accurate

  • When homepage has irrelevant advertisements/promo/recommendarions

Motivations

  • Expand horizons with reading

  • To share thoughts with others and listen to other’s opinions about what they’re reading

    • Either in the comfort of a group of friends 

    • Or on the internet in a public manner

Persona

A user persona was created to gain a cohesive understanding of CommonRead’s audience based on the most common insights that were made from the 3 previous 1-on-1 interviews.

Information Architecture

During this phase of research, a site map was created based on the collected from the competitive analysis and user interviews. This site map was created based off the main pages that would be accessible from the navigation bar. Those being the homepage, library, search/discover page, notifications page, and profile page. Though the site map below displays these as the main pages, the main navigation bar functions changed over the course of CommonRead’s lifespan. After reconsidering the main functions of the site, I landed on a social feed-style homepage, a personal library, an “add-a-review” button, a notifications page, and a search function.

Interaction Design

Task Flow & User Flow

A task flow was created to understand how a user may use the app to accomplish a task and to ensure that the website’s flow is simple. This task flow illustrates the actions a customer would potentially take to add a review. A more individualized user flow was also created so that I could access the steps a user would take with their background and needs taken into consideration.

Sketches

In these sketches, I drew out the pages that were needed for the app’s main flows. I drew inspiration from the structure of Letterboxd, Spotify, and Instagram’s navigation bar and information architecture to create CommonRead.

Low Fidelity Wireframes

Located below are the wireframes that I created to bring the main pages and flows to life.

Home

Discover

Add a Review

Notifications

Sending a message

UI Design

Logo and Branding

This UI kit was created to maintain cohesion with CommonRead’s muted and modern visual branding as I started creating the high-fidelity mockups.

CommonRead’s forms and components intentionally used neutral colors and simplistic elements to draw more attention to create a sense of calm and draw more attention to the books and reviews themselves.

CommonRead’s warm and muted color palette and modern sans-serif typography were chosen to emphasize the app’s friendly and cozy branding.

Inspiration for the UI was drawn from simple and modern reading apps in addition to Letterboxd’s interfaces.

Iteration and Implementation

Usability Findings

Usability tests were completed in person with participants navigating through the prototype on the Figma mobile app. I recorded our session through voice memos and took handwritten notes.

  • 3 Participants within the 18-24 y/o age range.

  • Each test took about 30 mins.

All participants were able to navigate their way through the mobile app with relative ease.

  • It was agreed that the notifications icon should be a bell instead of a speech bubble.

  • There were some suggestions about increasing font sizes in several areas throughout the app.

  • There were suggestions that some functions could be added to the “reading” mode.

  • Two participants were confused by the “+” icon, thinking that it served the function of adding a book to the library instead of adding a review. 

Affinity Map

An affinity map was made based off of the results collected from the usability tests.

Hi-Fi Mockups

During this phase of research, 3 participants tested the usability of the interactive high-fidelity prototype and gave feedback. Findings were recorded and iterations were made based on that data. Below are some individual screen examples of the final high-fidelity mock-ups.

Homepage

The profile page link was placed in the upper right corner after receiving feedback through user research.

CommonRead’s feed-style homepage was created to encourage the viewer to be up to date with the thoughts of their friends and the community as well as discover new reads.

Book Detail Page

Inspiration for this page came from Letterboxd’s movie detail page in which users can add a review, view other users’ reviews, and view information about the book.

Font size was increased in areas suggested by users during user testing.

Profile Page

Inspiration was drawn from Letterboxd’s “top 5 favorite movie"s” feature on the profile page.

The “home,” “review,” and “list” tabs were serve the purpose of creating an easily navigable profile page.

Final Prototype

click here to view fully prototyped project.

Conclusion

Next Steps

  1. Make adjustments

    • I would make further adjustments based on user testing results and feedback. This would include adding more features to the “reading” mode, including the ability to highlight text and share from there as well as being able to see friends’ comments on individual paragraph comments.

  2. Continue user testing

    • I would conduct more user testing to gain more insight into how to best implement the adjustments mentioned above. I would also consider changing certain navigation menu items and flows.

  3. Expand design

    • I would create a new prototype based on results from user tests and create more complex flows.