Common
A digital commonplace book app
Common
A digital commonplace book app
A digital commonplace book app

Description
Commonplace book app with an emphasis on the physical relationship to the reading material
Timeline
4 weeks (Fall 2021)
Role
UX/UI Design
Tools
Adobe XD
Academic Project
Background
What is a commonplace book? It’s a centuries old way of compiling knowledge. It’s a book that a person can fill with thoughts, notes, letters, recipes, poems, etc. It’s most frequently associated with academia, as an aid for remembering and collecting. Charles Darwin famously used his grandfather’s commonplace book to compose his biography.
This idea of using a committed book to compile your thoughts in reference to other books or media is the inspiration for this app. One of the primary goals was to sustain the personal relationship we have with our belongings-- in this case, our paperbacks and hardcovers.
︎
Problem
The most popular note-taking apps are too general to stay organized while those apps that do hone in on commonplace book methods have a high learning curve. There is an opportunity to develop an app that is both specific and intuitive.
︎
Insight
Part of the joy of reading is building a library of handpicked books and sometimes a striking cover is enough of a reason to pick up a book.
︎
Solution
Solution
Common: A digital commonplace book app. Common features a customizable library view for readers to admire their collection as they keep their books notes in one place.
Competitive Analysis
A cataloging service, called LibraryThing, allows users to pick their particular edition of a book to recreate their personal library. There is an inherent and intimate aesthetic of one’s home library that is appealing to users.
As a user of Apple Notes, I learned that jumping into a blank note is the easiest way to both demonstrate the use of the app as well as the most inviting.
Pelago is directly inspired by the commonplace book and what’s called the Zettelkasten method. I found it overwhelming despite the minimalistic style-- it was difficult to distinguish between “stacks”, “bundles”, and “tags”.
Research Method: Survey
I gathered my data by writing and uploading a Google Form to a couple of different subreddits, which collected 14 respondents.
Ultimately, I developed two personas based on the data gathered.


Persona Analysis
In conclusion, I decided to make these the functions of the app:
-
Create a personal library of books that the user is reading
- Input and save notes from books currently being read
Screenflow


Wireframes
From the beginning, I wanted the visual focus to be on the book covers while maintaining a sense of order. It was also important to give the user the chance to admire their collection at a glance.
High-Fidelity Mockups

First Look
As soon as the user logs in, they can see their full library of personally selected editions at a glance. They have the option of choosing between small and large thumbnails.

Adding a New Book
From the footer menu, the user can quickly add a book through a short series of prompts. Once they’ve selected their edition, it is automatically added to their library.

Making a Note
In order to make this as simple as opening a notebook, the user can begin writing right away when they choose their book.

Viewing Existing Notes
If the user would like to find or add to an existing note, they can quickly do so from their main menu. They can choose to view the note blocks in black and white or color.