The Making of Coverlist: Part 1

I’m building an app called Coverlist.

When I was in high school, my best friend and I would go to the bookstore, not to buy anything – just to hang out. We would slowly round the tables in the front, picking up any book that appealed to us, maybe reading the back or flipping to the first page. If it seemed particularly good, we would hand it off to the other and say, “LOOK.”

Now I read books on a Kindle and don’t get to wander around bookstores. My favorite books aren’t carefully arranged on a shelf in my room because I don’t buy physical copies anymore.

That is why I’m making Coverlist. It is a collection of only the best books and a place to judge books by their covers (and, well, maybe the first page).

In the long term I want it to become a place to discover new authors (and for new authors to be discovered) and a re-imagining of the book publishing process, which in my opinion is too drawn out and peppered with gatekeepers for the digital age. We can do better, for the benefit of both readers and writers.

So I’ve been learning Ruby on Rails for about a year and getting closer to making my vision a reality. I want potential collaborators to know where I’m going with this and where they might be able to contribute. I’m going to begin logging my work each week, to keep myself on track, and as an example for others who might have a big idea in addition to a full time job.

My Goals Last Week:

I went to a networking event for people in tech and showed Coverlist to the guy sitting next to me. He pulled it up on his phone. He didn’t like most of the books (there are only about 10 right now) and didn’t click on a book or give any “kudos.” I had already wanted to switch the “kudos” to three options: Meh, Yes., and Ooh!. This confirmed that plan. I also wanted to switch the default view to show only one book at a time – so instead of scrolling through all the books, you would just see one, and have to click one of three options to see the next book.

At first I thought I needed to add a model for Meh and Yes. as I already have one for Ooh! (my previous Kudos). I couldn’t remember how to do that but then I realized I could design the buttons and leave them not really doing anything, just to confirm that it was the best design from a user standpoint.

The last thing I wanted to do was put all the book info in the same place. It is really important to me that the default view shows only the cover plus the buttons, since you are judging the book by its cover. But instead of clicking the book to see more info (author, summary, share buttons, etc.) I wanted this info to show up on hover and the book would rotate, or flip.

What I Accomplished:

Changing the default view was surprisingly easy. @books was set to pull in Book.featured, or all the books where “featured” is checked Yes. This is important so I can eventually add thousands of books but turn on/off which ones are shown to users. It turned out all I had to do was change it to Book.featured.sample(1) and it pulls only one random book each time the page is loaded. The downside is that the url the user is on will always be coverlist.com, so they cannot potentially share a specific book to social media.

I also added Meh and Yes. and turned the happy face into Ooh!, all in line underneath the book cover. All of them refresh the page, to show a new book, and Ooh! still keeps track of how many votes it gets.

Then I tried to add the flip view using CSS. I found a number of tutorials that do the same thing, with a <div class=“side-a”> and <div class=“side-b”> but the closest I got was with the code in a Treehouse tutorial. The only problem is that the book would rotate and the book info would appear very far out in the side of the browser. I’m not sure why. Perhaps there is something in my existing CSS somewhere causing this. I could not fix it so I pulled the code.

Goals For This Week:

I met the founder of Poshmark this week and was really impressed by his approach to the app and how he came up with the idea before mobile technology was pervasive enough to make it work. I also really like the site’s homepage when you’re not signed in. Right now Coverlist looks like this:

image

I’d like it to look more like this:

image

A fellow developer I met on Angellist recommended I find a splash image on this site.

Another problem that I believe is key to fix before Coverlist is truly an MVP is the Add to Library action. Right now you can add the same book to your library many times. That doesn’t make much sense but I haven’t figured out to disallow it yet. Another fix would be to enable users to remove a book from their library, which should be added anyway.

There’s also some debate on whether the action should be Add To Library or I’ve Read This. From a book recommendation algorithm standpoint, it seems more meaningful to track what books someone already read. But from a social standpoint, it’s more meaningful to track what books people actually like. So, adding to your library should evoke the same feeling as Add To Favorites does on a site such as Birchbox. I actually don’t care if you’ve read the book at all; perhaps its something you were recommended and just want to read – that’s fine. I think a user’s library should be aspirational as that’s a better expression of identity anyway.

That said, the heading on the user page may need to change. How about: “My name is Dani and these are the books I like to read.” What do you think?

One Thing I’ve Learned:

I met someone last week who just finished YC over the summer. He said he arrived thinking it would be an intense three months of building the product, but instead, they were told to spend their time building *and* talking to users. Many times I don’t feel like Coverlist is strong enough to show to anyone – there are some obvious design flaws. But I’m beginning to see how early user input is better. I’m lucky in that I am the target user for my own app, but I have a lot of friends that are, too – and if they can confirm one of my doubts about a feature, it allows me to be much more confident in what I am making.