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.