Marginalia
I designed and built Marginalia, a concept web app that uses AI to turn long podcasts and audiobooks into concise takeaways. It automatically generates key insights, quotes, and strategic lessons, so passive listening becomes a memorable margins notebook.
Overview
Marginalia leans on an LLM pipeline rather than basic keyword extraction: it can group ideas into insights, synthesize lessons, and support follow-up questions for deeper understanding.
The Problem
Using podcast and audiobook as a proxy for long-form learning content, I saw three consistent issues for heavy listeners: attention drop, poor revisitability, and manual quote management. For users who listen while commuting or multitasking, these issues meant most insights were forgotten within days.
The Goal
Turn hours of long-form audio into a one-page takeaway: structured insights, memorable quotes, and practical lessons that are easy to revisit and share. Marginalia should reduce cognitive load during listening and make post-listening review 5x faster than re-playing episodes.
80%
quotes shared to team quote board
2 min
average reading time
5x
faster review vs. re-listening
The Solution
Session-based capture flow
Users log an audio source, then add highlights with quotes, notes, and timestamps as they listen. This mirrors how real listeners jot down margin notes in books.
Integrated Spotify metadata
Spotify metadata auto-fills titles, authors, and cover art so users focus on ideas, not data entry.
AI-generated takeaways
Marginalia distills key insights, best quotes, and strategic lessons into a one-page takeaway users can scan in minutes.
Process
I used a 4-stage validation workflow to design and build Marginalia.
Stage 1 - Fake Door Test: Validate the idea
- ✓Ran lightweight market research on Reddit and Twitter to explore frustrations with existing summary tools.
- ✓Interviewed 18 UX book club members to capture real listening pain points before building anything.
- ✓Synthesized findings into an opportunity map that framed Marginalia's positioning.
Stage 2 - Sandbox Test: Define and prototype
- ✓Translated research into a concise PRD that defined target listeners, core jobs-to-be-done, and the structure of the one-page takeaway.
- ✓Used Lovable to rapidly scaffold the Marginalia UI and wire up an AI generation pipeline.
- ✓Designed the pipeline with four key capabilities: timestamp traceability, one-page takeaway generator, auto-generate quotes, and a conversational AI layer.
Stage 3 - User Flow Test: Validate the experience
- ✓Shared the prototype with the 18 UX book club members and observed how they processed the Hooked audiobook.
- ✓Synthesized feedback via affinity mapping to uncover friction points.
- ✓Iterated on interaction accessibility, feedback and system status, editable sections, and safer AI edits.
Stage 4 - Product Analysis: Connect data to research
- ✓In progress: connecting the site with PostHog to track real user data for events and workflows.
- ✓These signals will inform which UX improvements to prioritise next.
Reflection
Challenges & Takeaways
AI accelerates the product lifecycle
Vibe coding dramatically reduced time from idea to functional prototype, enabling more cycles of user feedback.
UX fundamentals still matter
I still needed to design hierarchy, empty states, and feedback - especially around AI generation - to avoid confusion and distrust.
Data closes the loop
Without analytics on sessions, highlights, and revisits, it would be impossible to know if AI actually improved learning outcomes.
What's next
Supabase integration
Add auth and persistence so listeners can build a lasting Marginalia library and search across sessions.
Personalised takeaways
Let users star favourite insights and quotes and surface them in a Margins dashboard.
AI templates
Design multiple layout templates and test how different formats affect comprehension and recall.