large-icon.png

Stacks

IMG_0039.JPG

Stacks

Making a modern reading list for the avid reader

 
 

The Problem

I am a voracious reader, and have always maintained a list of books that I want to read. In recent years, however, I found that my list had scattered throughout my phone: a note with a list of recommendations, photos of covers taken at the bookstore or library, screenshots of listings on Amazon, overstuffed shelves in iBooks. I grew tired of trying to keep track of all of this, but I knew my smartphone was the best place for my list to live. It just needed a dedicated space, one that was easy to manage and easy to use.

 

The Idea

At the time I was grappling with this, I was a big fan of the email app Mailbox, a different take on the traditional email client. Rather than laboriously dealing with message after message, Mailbox allowed the user to quickly swipe emails wherever they needed to go, be it the archive or the trash. While using it one day, it occurred to me that this approach could work for books as well. Your books could be separated into three lists – those you want to read, those you are reading, and those you have finished – and swiped from one to the next as you read. Swiping a book into your Finished list seemed like it could be just as satisfying as swiping an email into your archive.

 

Research

I loved the idea I had, but I decided to see if there was already an app out there that would handle what I wanted well enough. While looking around, I discovered Goodreads, a great service for readers that combines digital bookshelves with a social networking component, offering users the ability to rate and review books, share recommendations with friends, and meet like-minded bibliophiles. I thought this was pretty cool, so I signed up for the service and tried using its app as my reading list. However, because Goodreads offers much more than lists of books, I found it too complex to use as a reading list in the way I intended. Not really seeing any other interesting alternatives, I concluded that there was a place in the market for a lightweight, focused reading list app.

 

Design

Inspired by Mailbox, I had the foundation for the app's layout: three sections the user could navigate between at the top (On My List, Reading, and Finished), and moving books between them by swiping.

Bitmap.png

Lists

In the first version of the app, I laid books out in a grid, rather than a standard table view, for two reasons. First, I liked the look of a collection of large covers – it felt more like a bunch of real books. Second, I was trying to differentiate from Mailbox somewhat, and presenting books like this seemed like a good way to do it. This also meant that rather than swiping across a table view cell, users would instead tap and drag a book to the edge of the screen to move it to a new section.

Groupbk.png

However, I quickly abandoned this for the traditional table view layout in the next version of the app, with information on each book's title and author.

Group 2bk.png

Dragging books to the screen's edge proved less intuitive for users than I had hoped. The biggest problem, however, was that sometimes a book's cover didn't tell you what the book was. When that was all the user had to go on, that was a problem. The app was designed to handle books that didn't have cover image data (sourced from Goodreads), but occasionally there were books that had blank, incorrect, or nontraditional cover images. For some users, they had enough of these in their lists that it was hard to tell what most of their books were, which made the app less useful and enjoyable.

Books

For the screen for an individual book, I laid out the information in a straightforward manner.

Tr%fcYbbQdq1Qdaj2OtKJA.jpg
Group 3.png

The question was how the user would navigate to this screen. My first thought was to manage this with a navigation controller (as seen above), as is standard in many iOS apps. I was dissatisfied with this, though, because it contributed to my growing sense that the app felt too utilitarian. At the same time, I had been thinking about how to make more use of book covers, since these were the most visually appealing part of the app. These two trains of thought converged to form my solution for the book screen transition. When the user selected a book, the cover would expand and blur, and the book's information would be displayed on this background.

IMG_AE28921CABCA-1.png
ezgif.com-video-to-gif.gif

It felt like you were immersed in the book, which I liked, and made the app feel more engaging and interesting.

Adding Books

There were two ways in which I wanted users to be able to add books. One was by searching for books by title, author, or ISBN. This would likely be the method most often used, and one that people would expect.

The other was to add a book by scanning its barcode. I like reading physical books more than digital ones; as part of my research, I found that I'm not alone in this. As I was testing Stacks, I often found myself holding a book, wanting to add it to my list. I would have to go into the search screen and type in its title to do so, and this felt silly – the book was right there! Scanning its barcode seemed like the quickest way to translate the physical book into a digital record. iOS has native support for scanning book barcodes, so this was easy to include and has been very useful.

Screen Shot 2017-12-01 at 4.43.31 PM.png
Screen Shot 2017-12-01 at 6.13.24 PM.png

Adding a book to a list was a perfect example of something that a user might want to have quick access to, so I made 3D Touch Quick Actions for both of these methods.

IMG_77058FBD2F21-1.png

Iterating

As more and more people have downloaded and used Stacks, I have gotten great feedback on problems to solve, as well as requests for new features. There have been a lot of different ideas, but two have stood out, and I have added these features to the app.

The first was the ability to sort the books within each list in different ways. Some people like to sort their books by author, as you might find in a library. Others prefer to sort by date, so that their lists are like timelines of their reading. 

IMG_B17207DE6CA4-1.png
IMG_2DEA5D4098C6-1.png

The most popular request, however, was the ability to add or change the cover images of books. Even after ditching the earlier grid layout, in which bad cover images meant that users couldn't easily identify books, people still wanted to be able to add their own images when the data source (Goodreads) couldn't provide them.

This made a lot of sense – I had designed Stacks to be a pleasant visual experience by incorporating the use of cover images as much as possible, and this made entries for books without them feel incomplete and bland. I was able to find another data source from which to get cover images, and users can now select their favorite for a book.

 

Summary

The development of Stacks has been very rewarding. It was featured on Mashable (under its original, a-little-too-trendy name, BKSHLF), and has been downloaded over 16,000 times by people around the world. As my first app to find a relatively large audience, it has taught me a lot about what you can and cannot assume about your target audience, and the importance of user feedback in the continued development and improvement of a product.