01
The covers are the colour
Off-white paper, near-black type and one quiet green. Everything else on screen is a real book cover, so no two libraries look alike.
Case study 01
Bindr
A personal library for your phone: every book you own, want or are reading, on shelves you name yourself.
Context
A reader's books live in too many places.
Some are on a shelf at home, some are EPUBs on a laptop, some are titles someone recommended and nobody wrote down. The quotes worth keeping end up as photos of pages in a camera roll. Bindr is a full prototype of one calm place for all of it: a library sorted onto shelves the reader names, a wishlist, notes and quotes tied to the page they came from, and a reader for the books themselves.
Problems
The hurdles, named plainly.
Four things make most book trackers feel like homework.
- They look like spreadsheets. Rows of titles and star columns, when the thing people love about their books is how they look together on a shelf.
- Adding a book is data entry. Title, author, year, page count and genre, typed by hand, before the book is even on the list.
- Tags multiply until they mean nothing. A book tagged Fantasy, Favourites, 2024 and Signed is on four lists, and the counts never add up to the library.
- Reading happens somewhere else. The tracker knows a book exists but not what was underlined in it, so notes drift away from the pages they are about.
Challenge
Make a library that feels like a shelf, fills itself in when a book is added, and keeps every note beside the page it came from.
Approach
Design principles
02
One book, one shelf
A book sits on exactly one shelf, so moving it is a move, not another tag, and the shelf counts always add up to the whole library.
03
Never a dead end
No search match, no cover, no network: each one falls through to something that works, a manual form, a generated cover, the copy already saved.
Shelves
Books that stand in the glass.
Each shelf is drawn as a frosted acrylic pocket with a screw in each corner, its latest covers fanned out of the top and leaning slightly, so it looks filled by hand rather than printed. Tapping a card grows the shelf out of it to fill the screen and shrinks it back on close, and opening a book lifts its cover out of the glass and flies it to the book's page. Ten starter shelves cover most libraries; any of them can be renamed, reordered or deleted, and a deleted shelf's books move to Unshelved, which says so before it happens.
Adding
Type a title, and the rest fills itself in.
One search box looks up the title, author or ISBN on Open Library and, at the same time, in free public-domain and open-access libraries, so a classic can be added and downloaded in the same step. Choosing a result brings in the cover, author, year and page count, and the book's subjects are matched to a shelf that arrives pre-selected and marked Suggested: Frankenstein lands on Horror. A book already in the library is flagged before it downloads, not after, and anything search can't find goes to a manual form with a clean generated cover.
Introducing
A reader, not just a record.
Imported EPUBs and downloaded books open in Bindr's own reader: printed pages that turn with a swipe, a tap at the edge or the arrow keys, with the page count and how many are left always in the bottom bar. One menu holds everything else, from the contents to going to a page. The Page & type panel offers four page colours, four typefaces chosen for long reading and five text sizes, and search lists every match grouped under its chapter, with enough of the sentence around it to know which one is wanted.
Notes & quotes
Every line kept beside its page.
Every note belongs to a book. A quote keeps its page number and a way back to it, set in italic serif so it reads as the author's words rather than the reader's. The Notes tab lists them all, newest first, filtered into notes, quotes and highlights. Any quote becomes a picture card to send to a friend, who doesn't need Bindr to see it; on a desktop the same card downloads as an image or copies as text.
Live prototype
This one actually runs.
The frame holds the real app, built from the same code as the iOS and Android versions. Explore the sample library to see 26 books on their shelves, get a free copy of a classic like Pride and Prejudice and read it, or search for another and download the whole book.
It's a demo, so there's no sign-in: books, shelves and notes are saved in this browser, and leaving and coming back picks up where you left off.
Open it full size to use it in a tab of its own.
Where it got to
17 screens on one codebase for iOS, Android and the web: shelve, search, download, read, quote and share, with everything saved between visits.
Alternatives
The routes not taken.
Tags came first, and went: a book on several lists made every count meaningless, so a book now has one shelf and moving it is a single choice. The wishlist began as its own list and became a status instead, so a wanted book keeps its details and joins a shelf with one tap when it's bought. Barcode scanning was dropped entirely; typing a few letters of the title found the book faster than lining up a camera.
Reflection
Project takeaways.
- Let the content carry the colour. With a near-monochrome interface, the covers do the work, and every reader's library ends up looking like their own.
- A constraint can be a feature. One shelf per book felt limiting on paper and made the whole library legible in practice: the numbers add up, so people trust them.
- Suggest, don't decide. The shelf is pre-picked from the book's subjects and labelled Suggested, so the guess saves a tap when it's right and costs nothing when it isn't.
Final notes
Bindr runs as a live web app with accounts, so a library follows its reader between devices. The prototype above is the same app in a demo mode, with a sample library instead of an account, so it works without signing in. The free libraries only offer books that are out of copyright or openly licensed; any other book can still be added, read from an imported EPUB or PDF, and annotated.