Bookshelf Native App (iOS, Android)
Design a native mobile app with a consistent brand experience across iOS and Android platforms.
I created Bookshelf to help booklovers organize their personal libraries. Bookshelf’s focus is helping users enjoy the books they already have with features to add, arrange, and tag books.
I conceived of and designed Bookshelf as part of CareerFoundry’s UI design bootcamp. I was inspired to create Bookshelf by a friend with a very large library who frequents bookstores and sometimes wonders if she already owns a book she’s considering and by my own desire to read the books I already have. Bookshelf helps users keep inventory of what books they own and keep track of what they’ve read, are reading, and want to read.
Native Mobile App Design
Bookshelf’s library design is inspired by physical shelves and offers users a visual way to explore their books. The shelf system offers users flexibility in how they organize their books, whether by genre, author, title or by personally meaningful categories like “the bookcase by the window.” Within each shelf, users can sort their books by title, author, genre, date added, rating or tag.
Bookshelf uses the phone’s camera to identify each book by its cover or ISBN, similar to wine tracking apps like Delectable. There is also a search function.
Rate Books and Add Notes
The book detail screen displays basic identification information and similar books. Users can add a rating or notes as well as tag each book as “read,” “reading now,” or “wishlist.”
Create Lists: Read, Reading Now, Wishlist
Books tagged as “read,” “reading now,” and “wishlist” can be viewed in their respective lists in the “Lists” section of the app.
iOS and Android Versions
Bookshelf has specific user interface designs that are tailored to iOS’s Human Interface Guidelines and Android’s Material Design principles to retain the same feel and function across platforms while respecting platform-specific design patterns. A few of the UI differences include:
Footer tab bar menu for iOS navigation vs. hamburger menu for Android to not interfere with the home, back, and recent apps buttons on the footer
Back button in iOS, but not for Android because it is built into the device
Elevation and shadow styling, floating action button, card-based design consistent with Material Design for Android
Toggle UI element for iOS versus a tab bar for Android
Secondary action button and dropdown for iOS; text buttons for Material Design
The biggest difference between Bookshelf’s iOS and Android experiences is the navigation; iOS’s footer menu displays each section on every screen whereas Android’s hamburger menu requires a tap to see other sections. As an iOS user, I was concerned that Android users would not immediately know that there is a Lists section of the app. However from reviewing Material Design guidelines, it seemed that Android users would be accustomed to exploring app features through the hamburger menu. I conducted user testing with Android users, and discovering the Lists section was not raised as an issue.
I reviewed Goodreads, iBooks, and Delectable to understand their features, patterns, layouts, and styling. Goodreads is a tool for book discovery and sharing, iBooks for reading on mobile devices, and Delectable for finding and tracking wines. Through analyzing the strengths and weaknesses of similar apps, I identified details that would create a great user experience for Bookshelf.
I created low- and medium-fidelity wireframes to refine Bookshelf’s design, starting with iOS and translating features to Android. The wireframes I made illustrate the four main sections of the app (Library, Add Book, Lists, and Account) and the key features of tracking, organizing, and managing book collections.
Mapping Sound & Haptic Feedback
Annotated medium-fidelity wireframes show how sound and haptic feedback would enhance user experience. With Human Interface Guidelines and Material Design principles in mind, I used sound and vibration to signal user error and signal the successful completion of important actions, such as creating a shelf, scanning a book, and adding a book. A minimal use of sound and haptic feedback makes the app more engaging and usable.
I also annotated the medium-fidelity wireframes with gestures for touch (tapping, swiping, dragging) to provide a more complete portrayal of Bookshelf’s interaction design. I tested these gestures using Sketch Mirror to verify that touch targets were large enough and gestures made sense.
Green is Bookshelf’s primary color to convey a relaxing, library feel without being boring or dusty. Green can symbolize affluence, which I thought fitting for a product that pertains to reading and knowledge acquisition. Green also distinguishes Bookshelf from other book-related apps (light beige and brown for Goodreads, white and light blue for iBooks). I chose yellow and teal as highlight colors to provide visual interest and a friendly feel.
Bookshelf employs Asul for headings and Chivo for body copy. I chose these typefaces to give Bookshelf a distinguished, yet friendly feel. Asul was developed for editorial use, and as one of my users said, Asul “feels like a contemporary take on a traditional ‘book’ font.” Chivo’s similar x-height but contrasting features make it a an effective complement for Asul, and Chivo is designed to be readable at small sizes on a screen.
Icons unique to Bookshelf’s features employ a pictorial style to complement the skeuomorphic use of shelves. Common functions such as search, add, and back use conventional symbols.
I took the photographs of the books illustrated in these mockups, choosing books that would allow me to illustrate Bookshelf’s organizational features.
Prototypes & User Testing
I conducted user testing with prototypes to get feedback from five iOS and five Android users. One piece of feedback I received from several users was that it was not clear what the eyeglasses, checkmark, and heart icons meant, so I updated the design to include labels where a user would first encounter the icons. Overall, the feedback confirmed for me that the screen flows I designed made sense.
I created Bookshelf within the estimated time frame for the CareerFoundry project (44 hours). This project gave me the opportunity to learn about and execute Material Design principles. I also applied interaction design thinking to map sound and haptic feedback as well as touch gestures.
If Bookshelf were to be developed and launched, I would be curious to see whether Android users access the Lists section as much as iOS users because of the differences in navigation. When sharing the final product with others, I was happy to hear people say they really wanted this app to be made so they could use it.