Monocle

A social e-reader that connects readers through notes within any book

After posting a picture of a single page inside a book I was reading, I realized the opportunity for any readers' thoughts to be embedded within any book, creating a sense of real-time community while reading. I designed Monocle to transform reading into a social experience.

What I did
App Design
Web Design
Web Development
Logo Design
Brand Design
Product Strategy
What I did
project details

The Problem

Human connection is critical to a positive reading experience, yet the social tools available to readers are far from seamless, as they rely on technology meant to distract, not connect. I experienced this first hand when reading History of the Black Dollar and posted a picture of the book to share with my community.

The Opportunity

Throughout written human history, physical objects have been our primary tool for sharing stories, ideas, and experiences. And despite rapid technological advancement over the past 50 years, the adoption of digital reading has still yet to challenge the physical standard. This is because unlike other media types, books have yet to adopt the one thing we’ve grown to seek the most in 21st century: instant human connection.

Research and Discovery

Competition

By identifying unique offerings and missed opportunities by each competitor in the space, I was able to set guideposts for Monocle's unique value proposition.

Interview Insights

I interviewed dozens of book clubs, students, and avid readers in order to learn more about the shared pains of being a social reader. From having to compete with the endless array of content on social media to facilitating meaningful connections between large groups, each reader offered a unique experience, providing me with a variety of problems to design for.

Behavioral Trends

Despite social media ultimately creating distraction and requiring the reader to put the book down, ⅔ of avid readers are still using it just to connect with someone else about what they’re reading.

Design Process

Although I almost always begin my design process with pencil and paper (or iPad and Apple Pencil), I had a strong vision for the core experience of Monocle since the idea came from a personal experience. Therefore, I began by spending a few hours to create a "quick and dirty" prototype to get the idea in front of readers. Not only did this allow me to get feedback on the concept, but it triggered new ideas for readers when they realized the potential for a social experience integrated into any book. These insights were then utilized to refine and further develop Monocle into a robust product.

Rapid Prototype

I view prototypes as questions, not answers. Monocle's first prototype was created and shared among avid readers to ask the question of "what if reading was a social experience?" Feedback from this prototype enabled me to understand what readers what and imagined in a tool that connected them with like-minded invididuals.

Wireframes

Many of Monocle's initial wireframes were drawn on physical paper, which unfortunately I have misplaced :'( As I began to iterate on the app, I started using my iPad (and Apple Pencil) to outline, organize, and wireframe features. After structuring information that a feature contains, I move the drawings into Figma to serve as the foundation for a wireframe or initial prototype depending on whether or not relevant components exist in the design system. Starting my process with (digital) pencil and paper allows me to holistically plan a feature, ensuring that interactions and data points are appropriately segments and prioritized.

Branding

For Monocle's brand, I drew inspiration from how writing and highlighting exists in our physical world. The color palette relies heavily on yellow, which represents physical highlighters and is used in the app to call attention to annotations and books. Green is used as our secondary color and represents connection and growth. It is used throughout the app to signify user actions that enable connection between other readers. The supporting colors reflect the playfulness and joy that reading, connection, and self-expression can bring, which are used for illustrations that convey these emotions.

The typography relies on a combination of a formal serif font (represents traditional print books), a playful san serif font (highlights calls to action), and a refined san serif font. I also created abstracted characters that resemble hieroglyphs, one of the earlier forms of writing. These characters are used to give texture and life to large displays and buttons.

High-Fidelity Prototype

Monocle has undergone multiple iterations and will continue to evolve as readers provide new insight and drive our creative process for advancing the tool's feature set and interface. Below is a prototype that is the third major evolution of the core experience. Click around and explore the e-reader!

E-Reader Iteration

As the core experience of Monocle, the e-reader underwent multiple iterations based on feedback from avid readers and book club members. The main challenge was how to display annotations given a variety of constraints such as the amount of notes for the selected quote, a user's motivation and desires, and hierarchy of available actions. The third version of the e-reader included improvements to the annotation "card" which contains clear UI elements for user actions. It also communicates the ability for users to see an expanded list of notes or to simply return to the default reading experience.

Feature Exploration

When we receive or generate new ideas that align with Monocle's mission, vision, and broad product roadmap, I define the requirements and create an initial mock-up and prototype to test the feature's desirability among our users. Although these designs typically change from their initial state, they serve as valuable conversation starters and thought experiments for our community.

Landing Page

Similar to the application, the landing page has evolved between three main states: teaser, pre-beta, and beta release. For each release, I have increased the level of detail for how Monocle is conveyed and the amount of information that I am requesting from interested readers. This allowed me to measure interest and progressively involve more readers as we came closer to the app's release. The hero section of the current landing page can be seen below, and the full site can be see here: readonmonocle.com

Results and Impact

By deeply understanding the problems with today's social reading experience, I was able to transforming reading into a community-focused experience. After forming a team with a few friends from engineering school, Monocle was built and released privately to 300 avid readers to gather feedback and iterate before a public launch.

While this experience has introduced more ideas and insight from readers than ever expected, the vision of Monocle to establish a connected and informed global community of learners has enabled product and design decisions to be made thoughtfully.

project details

Coming Soon

I'm working on adding comprehensive case studies for all of my projects. In the meantime, check out the website for this project or explore something else!