Bookmark App UXUI Design

Research Goals

At the outset, I wanted to identify what aspects of the Goodreads user experience users like and dislike overall. To this end, I set these research goals:

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

‍

I also resolved to answer the following questions:

• Which features do Goodreads users like and dislike?
• What aspects of 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 UI aesthetics lends themselves best to a book recommendation app?

‍

Landscape Analysis

To gain a better understanding of the competing apps on the market, I made a feature comparison survey of Goodreads, along with three book apps with similar features to what I would like to accomplish with mine. 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. This community of reviewers 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 interesting to me because 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 ask some Goodreads users to perform various tasks on the Goodreads app and discuss the user experience. I reached out on social media to friends and acquaintances for this usability test.

‍

Test Objectives

• Identify the features Goodreads users largely prefer.
• Identify the features Goodreads users do not like or find unnecessary.
• Identify best practices for organizing information in the Goodreads app.
• Identify the strategies 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, leading themthrough 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 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 or Search page could be used as a space for book recommendations.

Most of my users use 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 wanted the app to be more visual pleasing.

‍

Research Conclusions

• My app should 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 one of the main pages.

Site Map

I made a list of product requirements (not shown) based on my research, and used this list to map out all the features and categories that the Bookmark app should offer, considering common app organizational patterns and hierarchy.

I initially conceived of  four main pages (Search, Library, Discover, and Profile) that include all the various subcategories. However, 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 lack of a profile page. I removed this page because of user feedback that this would not be particularly useful, and also considering that the Library page could double as a profile page in this case. I removed direct messages because of the overwhelming negative response to that social component in my usability tests.

I was interested in developing a dating app style "User Match" feature that would allow users to search for users based on the amount of similiar books read on the app. Likewise, a "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, but cut these features due to lack of time.

Wireframes

Following 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 in my interviews mentioned enjoying. The "Reading Challenge" allows users to set a track progress on a reading goal for each year, and to also 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.

As with the Library page, I designed both the "Reading Challenge" and "Your Year in Books" minimally to put more visual emphasis on the book covers.

The second row of screens represent different states of one of the three Bookmap default shelves; "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 attempts at action sheets for accessing book details and sorting functionality to organize what can be become very long lists of books.

The third row of 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 central to the user experience of the app.

The Discover page (fourth row of screens) 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 second row of screens below). The user can also discover books via shelves organized by genre or by app and user generated lists.

The first two screens of the fourth row show the different screen states accessible via 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 screens of the fifth row is accessible via the camera icon in the search field. This feature was popularized by Goodreads, my usability tests showed me that users find it very useful. Users can take a photo of a physical book's cover or ISBN number with their smartphone camera to instantly call up the app profile of the book in question. The user can access previously-scanned books on the second scan screen.

The fourth screen of the fifth row shows a book detail page. I decided to feature the cover more prominently than it is on Goodreads, and tried to arrange the necessary book information in a minimal and aesthetically pleasing way.

The sixth row of screens show examples of states accessible via the above book detail page. The first screen shows an action sheet that launches if the user clicks the button (shown as "Read" in the above screen) to add the book to a specific shelf. Many users love 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 that pops up the moment a user marks a book as read, providing options for the user to rate the book, write a review, or to browse other similar titles.

‍

‍

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

The style tile below shows the basis for my UI. Following my wireframe inspiration from the Medium and VSCO apps, I went for a minimal color palette of charcoals and grays, with the idea that book cover images will provide the color and visual interest.

I chose Caslon Graphique as my header font after exploring variants on the classic Caslon typeface. For body font, I was drawn by Akzidenz Grotesk's minimal, slightly playful style that seemed to pair better with the header font than the other flashier grotesks I had experimented with earlier.

UI Design

Following are just some of the screens I designed for my Bookmark book recommendation app. I streamlined many of the pages and features from Goodreads down to the most necessary ones. Above all, I emphasized minimalism and usability in the design, allowing book cover imagery to provide the app's visual interest.

These three screens below the sign-in and account creation screens I created for the app. They take much inspiration from the Medium app.

These screens below 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 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 checkmark 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.

View High-Fidelity Prototype

‍