AnnoNote
A Digital Companion for the Modern Reader.
Bridging the gap between physical reading habits and digital organisation. AnnoNote allows users to capture insights from books and articles without the friction of traditional note-taking.
Timeline
4 months
Worked as
Researcher
UI/UX Designer
Graphic Designer
Tools
Figma
Illustrator
Freeform
Google Docs
Why? 🤔
The Reality:
Most readers find digital note-taking clunky compared to a physical highlighter, while physical notes are impossible to organise, search, or have a quick overview.
The Solution:
AnnoNote digitises the messy experience. By allowing users to organise notes by book, chapter, and custom filters, the app turns a passive reading habit into a structured personal library.
pic. Double diamond model, the chosen guiding framework for the project.
Research Phase
I analysed the "Big Four" of note-taking—OneNote, Apple Notes, Evernote, and Bear—to deconstruct their UX patterns. While these tools excel at general utility, the benchmarking revealed a common failure: they lack a specialised workflow for high-retention reading and deep-work annotation.
pic. analysis of the UI of the competition apps.
pic. research of forums to know the user needs and pain points.
pic. Competitive analysis notes of the competition.
Insights
👓
Cognitive Clarity (Minimalism)
Instead of "cleaning up" the UI, the focus is on reducing cognitive load. By stripping away non-essential UI elements, the interface ensures the user’s focus remains entirely on the text and their own synthesis.
🔍
Frictionless Retrieval (Search)
Research showed that "lost notes" are a major pain point. Search shouldn’t just be a feature; it’s a retention tool. It must allow for deep-querying across books, chapters, and specific tags to make fragmented data instantly actionable.
🔗
Relational Architecture (Linking)
Static folders are where notes go to die. The insight led to a nested, relational structure that allows users to connect disparate ideas across different sources—transforming a simple note-taking app into a personal knowledge graph.
Initial design stage
To move from abstract research to a concrete product, I synthesised my findings into a series of strategic frameworks. By defining the Problem Statement and 'How Might We' question. The User Personas and Journey Maps were the guardrails that ensured every design decision served the reader's need for focus and retention.
pic. problem statement, HMW, user personas, user journey, IA
pic. A mind map was created to explore the features the apps should have.
Wireframing + Prototyping 📲
I used low-fidelity sketching as a high-speed tool to explore the user journey. By working off-screen, I could focus entirely on the spatial relationship between the user and the annotation aspects without getting distracted by the aesthetic. This stage was about ensuring the Information Architecture felt intuitive in a hand-held context.
pic. paper wireframes.
pic. low level design iterations, before and after changes and rationale.
pic. screenshot of lo-fi prototype, click on the image to view the prototype.
Putting it all together
The final design stage culminated with creating designs that aligned with the information gathered throughout the design process from research to lo-fi testing and iterations. Special care was given to the 'Dark mode' version of the app, ensuring the accessibility aspects were kept in mind.
pic. created a brief visual brand guide.
pic. showreel of AnnoNote
Key Takeaways
Unique Needs
While the market is saturated with generalist note-taking apps, this project proved that niche problems require niche solutions. By focusing exclusively on the "reader’s journey," I was able to solve specific friction points—like digital marginalia—that "catch-all" apps like OneNote often overlook.
👀
Dark Mode
Designing in Dark Mode taught me that accessibility isn't just a checklist—it’s a functional requirement. My research into eye strain during long-form study sessions led me to prioritise a high-comfort, low-light interface.
🚦
Moving On
This project was a masterclass in balancing research with execution. The transition from messy paper wireframes to a high-fidelity prototype taught me when to linger on a problem and when to move into production.