Bookish: Book Collection App

  • UX
  • UI
  • HTML
  • CSS
  • jQuery
  • Responsive
Bookish

View Live GitHub Repo

I have been a voracious reader since childhood. As such, books are the foundation and gateway for most of my hobbies. With a substantial part of my library now existing in a digital format, organizing my books has become a unique challenge that many existing apps fails to meet.

Defining the Problem

The closest I’ve come to a book repository app are Goodreads (browser, iOS, Android) and Calibre (PC). Unfortunately, these apps are bogged down with extraneous functionality and confusing, dated interfaces. Bookish is designed to enable the user to organize their book collection elegantly and efficiently.

Design Process

I was allotted 2 weeks to design the project. Using the weaknesses in existing apps as guidelines, I began to craft the minimum viable product for a book collection app.

Sketches

I began thinking in writing, sketching out a user flow and thumbnail wiresframes.

Bookish Sketches

Wireframes

I designed wireframes in Sketch 3.

Book detail screen wireframe.

Visual Designs

After receiving feedback from my peers, I applied the revisions to my wireframes in high fidelity mockups.

Delivering the Solution

Using my mockups as a guide, I began coding the website in HTML5 and CSS3, using Sass and the Bourbon mixing library as a framework for my code. At the time I was a bit rusty with responsive design, and would later return to the code for refactoring, adjusting breakpoints and simplifying my code.

You can view this product live, or check out the GitHub repository.