Bookmark App Design

UX DESIGN

Bookmark Book Recommendation App

I love the main functions of the Goodreads app, which allows me to catalog the books I’ve read and want to read each year, but I have problems with the UX. The app is at times glitchy, and features outdated UI that is not easily accessible on a small screen. There is also an opportunity to streamline the app's features in order to make the UI feel less cluttered. For this project I developed an end-to-end prototype of a new book recommendation app.

Design Goals

  1. Design an end-to-end app for a new book recommendation service.
  2. The app should be aesthetically pleasing and easy and intuitive to use.
  3. The app should be competitive with the book recommendation, discovery, and reviewing features offered by Goodreads and Audible.
Year
2020
DURATION
4 weeks, 20 hours per week
Tools Used
Figma

Process Overview

      Research Goals
      Landscape Analysis
      Usability Test
      Site Map
      Wireframes
      Style Tile
      UI Design
      High-Fidelity Prototype

1. Research

Research Goals

At the outset of this project, I felt it was important to identify as best as I could what aspects of the app user experience and user interface that users largely like and dislike. To this end I set these research goals:

  1. Identify best practices for organizing information in the app.
  2. Identify strategies for promoting more natural social interactions between users.
  3. Understand pain points that could make app usability difficult.

I also resolved to answer the following questions:

  • Which features do Goodreads user like and dislike?
  • What aspects of the Goodreads app UI would users like to see improved?
  • What aspects of the Goodreads UI helps promote a sense of community among users?
  • What color scheme and design aesthetics lends itself best to a book recommendation app?

Landscape Analysis

In order to gain a general idea of the competing apps on the market (aside from Goodreads), I made a feature comparison survey of Goodreads, plus three book apps with similar features to what I would like to accomplish with mine. While none of the apps offered all the features I felt were important, the apps Goodreads and Audible were clearly the best of the four.

My landscape analysis of Goodreads, Litsy, Bookly, and Audible led me to identify some key insights and opportunities for how to approach my app:

Insights & Opportunities

The most successful of these apps (Goodreads and Audible) have a strong community of users who review books and respond to reviews is necessary for the success of a book recommendation platform. Likewise, the ability to make and organized book lists is crucial. Book reviews should be easy to sort on a five-star rating basis so that users can easy parse out differing opinions.

I found very little appealing about Litsy as a product, and Bookly was appealing mainly in that its visual design was better than most of the others (except perhaps Audible's). Bookly did have an interesting reading tracker functionality that I was curious to try in my own app.

Goodreads and Audible perhaps do the best job at providing multiple ways for users to find book recommendations within the app, but there are distinct opportunities to offer more of these options in a more accessible user interface.

Goodreads Usability Test

Since my app is largely inspired by Goodreads, I decided to have some Goodreads users perform various tasks on the Goodreads app and discuss what they like and don't like about the Goodreads experience. I reached out on social media to friends and acquaintances, asking for Goodreads users who might be interested in taking part in a usability test.

Test Objectives
  • Identify the features Goodreads users largely prefer.
  • Identify the features Goodreads users do they not like or find unnecessary.
  • Identify best practices for organizing information in the Goodreads app.
  • Identify the aspects that Goodreads employs to promote social interactions and community and between users.
  • Understand user pain points that could make the Goodreads app usability difficult.

My test consisted of 4 participants (3 women and 1 man), all above the age of 21, who are currently users of Goodreads. I video chatted with each, having them go through a series of tasks on the app, and then asking them questions about their experiences.

Overall Patterns Between Participants

None of my users like the Home screen as it currently is, though most of them couldn't say how they would change it. Generally, my users did not care for the social component stressed on this page. Most of my users would also like recommendations and the “discover” page featured more prominently in the interface. These opinions led me to wonder if the Home screen could be used as a space for book recommendations.

Most of my users prefer Goodreads as a place to log books, and don't see the need for messages and other social interactions aside from reviewing books and seeing what people are reading. This insight led me to later remove these extraneous social components from my app.

All of my users want the app to be more visual pleasing.

Research Conclusions

  • My app should simplify and remove many of the social components currently utilized by Goodreads.
  • My app should be much more visually beautiful than Goodreads.
  • Means of discovering books via recommendations and friend reviews should be featured prominently on the home page.

2. Information Architecture

Site Map

I made a list of product requirements, and used this list to map out all the features and categories that the Bookmark app should offer (based on my research) in a basic attempt at site hierarchy and organization.

Notable in this early design are the four main pages (Search, Library, Discover, and Profile) that include all the various subcategories. In an attempt to further simplify the interface, I combined the Profile and Library pages, and folded the Discover page features into the search page, as this seemed an obvious home for that functionality. I then made Notifications its own category, because of a common user complaint that notifications are somewhat buried in the Goodreads app.

Also notable is the Profile page, which initially included some features that I either decided to remove for reasons based on my research, or because of a lack of time in the project duration. I removed direct messages because of the overwhelming negative response to that social component in my Goodreads usability testing.

I removed the Analytics section due to a lack of time to develop it. The Bookly app I research in my landscape analysis included a reading timer and tracker that I thought would be interesting to implement, but ultimately it did seem as necessary to pursue as the other key features identified in my research.

Finally, I was interested in developing a "User Match" feature that would allow users to search for users based on the amount of similiar books read on the app. The "User Search" function would simply allow users to search for users like on social media sites like Instagram. I would still be interested in adding these features at a later date.

3. Interaction Design

Wireframes

This is a selection of the wireframes for the Bookmark app that I created as an early attempt to develop content and establish placement of the content hierarchy throughout the homepage. I attempted a clean, minimal style inspired by the Medium and VSCO apps.

I thought of my Library page as something of a cross between Instagram's profile page and Goodreads's home page. I tried to improve on the Goodreads's swipeable icons for each list or "shelf", as I decided to call them, making the icons larger so that each book cover would be more visible.

Goodreads includes "Reading Challenge" and "Your Year in Books" features that many users seem to enjoy, and therefore which would be unwise to remove from my app. The "Reading Challenge" allows users to set a track progress on a reading goal for each year, and to likewise see friends' goals and progress.

"Your Year in Books" is a visual representation of all the books users mark as completed within a calendar year, accompanied by computer-generated statistics about the books read by a particular user.

Like the Library page, I designed both the "Reading Challenge" and "Your Year in Books" minimally to put more focus on the book covers.

The following screens represent different states of one of the three default shelves that are included in the app; "Reading", "Read", and "Want to Read". The first screen of the row can be accessed by clicking "See All" on the Library page over that particular shelf, providing app-generating statistics on the books within that category.

The second screen is a grid view of the first screen, which can be accessed by clicking the grid icon at the top of the screen. I included this screen simply as a way for users to enjoy the book covers on their lists in a more visually engaging way.

The third and fourth screens show my first attempts at action sheets for accessing book details and sorting functionality for what can be become very long lists of books.

The following screens are part of the Settings section, which can be accessed via the bolt icon at the top left of the Library page. These are all pretty straightforward, though its notable that the Friends list exists here. I decided to place this page in Settings because I wanted to declutter the main Library page, and because the friend functionality isn't center to the user experience of the app.

The Discover page is accessible by clicking the Search icon at the bottom of the screen. Here the user can search by title, author, or ISBN, or click the camera icon to access the Scan feature (see next row of screens). The user can also discover books via shelves organized by genre or by app and user generated lists.

The first two screens show the different screen states accessible by clicking between the "Genre" and "List" buttons. The third screen is accessible by clicking a "Popular Lists" button. The fourth screen allows the user to filter lists by genre, and is accessible via the slider icon at the top right of the third screen.

The first two of these screens is accessible via the camera icon in the search field. This is a feature made popular by Goodreads, and the general consensus in my Goodreads usability testing was that users find it useful. Users can take a photo of a physical book's cover or ISBN number with their smartphone camera to call up the app profile of the book in question. The user can then access previously-scanned books on the second screen.

The fourth screen is a book detail page, which is in some ways like this style of page on the Goodreads app. I decided to feature the cover more prominently than on Goodreads, and endeavored to arrange the necessary information about a book in a minimal and aesthetically pleasing way.

The following pages are examples of states accessible via the above book detail page. The first screen shows an action sheet for what would happen if the user clicked the button (shown as "Read" in the above screen) to add the book to a specific shelf.

Many users like Goodreads for its book tracking functions, and it was for this reason that I included a "Book History" action sheet, which would show the user at a glance their history in the app with a particular book.

The final screen is a drawer screen that pops up the moment a user marks a book as read, providing options for the user to rate the book, write a view, or to browse other similar books.

4. UI Design

Style Tile

I made six different style explorations for my user interface, trying out a number of varying typeface combinations and color schemes. I went on a deep dive through Pinterest for my color palette inspiration, choosing a palette from such sources as concert show flyers, book covers, and oil paintings that I found inspiring.

I searched through my current typeface library, and also made an in-depth search of prominent type foundries online for ideas. I included a sampling of classic book typefaces in these explorations, such as Baskerville, Plantin, and Caslon. I also gravitated naturally toward typefaces such as Tenez, Tiempos, and Grilli Type's America, because I felt they had some "literary" quality to them that I liked. Most of I all I was taken by the playful and vaguely European Nouvelle Grotesk and Founder Grotesk as header fonts, but I ended up gravitating away from these because I found them too difficult to pair fonts with for this project.

I ended up creating the following style tile as the basis for my UI, with the third screen from the above UI explorations as my jumping-off point. Following my wireframe inspiration from the Medium and VSCO apps, I went for a minimal color palette of blacks and gray, with the idea that book covers will provide the color and visual interest.

I chose Caslon Graphique as my header font after exploring variants on the classic Caslon typeface. Having been very much interested in grotesk fonts in my UI explorations, I was drawn by Akzidenz Grotesk's minimal, slightly playful style that to my mind seemed to pair better with the header font than the other flashier grotesks I had been working with earlier.

UI Design

These are most recent iterations of the just some of the screens I designed for my Bookmark book recommendation app. I focused on making the book covers a major visual element in the app's interface, and tried to streamline many of the pages and features from Goodreads down to the most necessary ones. Above all, I tried to emphasize minimalism and usability in the design. There are also some distinct departures from my wireframes to the UI, which I will note as I go.

These three screens below are an example of the sign-in and account creation screen I created for the app. They take much inspiration from the design of these screens on the Medium app.

These screens ended up not straying too far from the wireframe layouts once the font and color styles were added, but I'm particularly happy with how the book covers create a great deal of visual interest, while the color palette and minimal UI sort make room for the book covers.

The design of the action sheets in these three screens below changed notably from the earlier wireframe versions with an eye to accessibility and readability. Font sizes were increased, lines were added under text to delineate between the clickable options and create a guide for the eye to follow to the check mark on the chosen option. The close button was moved from a button at the bottom to an icon at the top right.

Like above, the action sheets in the second and third screens below changed notably from the earlier wireframe versions in an attempt toward better user accessibility and readability.

5. Iteration

High-Fidelity Prototype

View Prototype

Next Steps

1. Usability Testing

I ran out of time to do a usability test of the final prototype, and I'd like to do that in order to identify possible further possible adjustments and improvements.

2. Extra Features

Because of the limited scope of the project, I was unable to implement all the features I was interested in, particularly the "User Match", "User Search", and "Reading Timer" features I had suggested in my sitemap.

3. Improved Prototype

I will add some of the aforementioned extra features to my current high-fidelity prototype.

4. Testing

I will pursue more usability testing on the updated and enhanced features of the prototype.

...

Latest Work

Back to Top