Bookshelf Native App (iOS, Android)

(top) iOS screens for log in, library, shelf, add book, book detail, reading list; (bottom) Android screens for log in, library, shelf, add book, book detail, reading list

The Challenge  

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.

Context

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.

 

Role/Services

Concept
Product Strategy
Iconography
Photography

UX/UI Design
Interaction Design
Native Mobile App Design
Information Architecture
Competitive Analysis
Wireframing
Prototyping
Mockups
User Testing  

Content Strategy
Copywriting

Time Frame

June–July, 2018


 
 

Product Features

Shelves Organization

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-scrolls-compressed.gif
 
 
 

Add Books

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.”

 
 
Book details@3x.jpg
 
 

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

 
 
UI Kits@3x.jpg
 
 

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.

 
 
iOS and Android Versions@3x.jpg
 

 
 

Process

Competitive Analysis

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.

 
 
Competitive analysis@3x.jpg
 
 

Wireframes

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.

 
 
User flow@3x.jpg
 
Low Fidelity@3x.jpg
 
Medium Fidelity@3x.jpg
 
 

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.

 
 
Sound and Haptic Feedback@3x.jpg
 
 

Annotating Gestures

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.

 
 
Touch gestures@3x.jpg
 
 

Color

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.

 
 
Color@3x.jpg
 
 

Typography

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.

 
 
Typography@3x.jpg
 
 

Iconography

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.

 
 
 
 

Photography

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

InVision prototypes:

Android: https://invis.io/ATMTUVMER7V 
iOS: https://invis.io/TWMUD75XQRF

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.

 
 
Final product@3x.jpg
 
 

Outcomes

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.