Common
A digital commonplace book app

Timeline

4 weeks (Fall 2021)

Role

UX/UI Design

Tools

Adobe XD

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.

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.

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

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

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.

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.

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

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.