In the first week of August, a good friend lent me two books, How to be a Games User Researcher and The Secret Science of Games. I’m a UX designer in games, and there’s a certain overlap between what I do and what a user researcher does, so I wanted a refresher. The kind of reading where you want to underline every other page, so you can come back later and refresh your memory from your notes.
Except I couldn’t. They weren’t my books.
That’s a bigger problem for me than it sounds. I’ve always been a messy reader. I take a lot of notes, and most of my books end up full of underlines, highlights, bookmarks and even random sticky notes. They usually look something like this.
So I tried the easy version. First I took notes in GoodNotes, then in a separate notebook. Both of them worked, technically. But both detached the notes from the book. A line in my notebook was just a line, without the page it came from or the paragraph around it.
And it wasn’t only borrowed books. I recently moved out of my country, and a huge physical library is not something I can carry around with me. So I started reading a lot more ebooks and borrowing from the library at work, and my notes started scattering. Apple Books lets me highlight and take notes, but unless I open the app, and that particular book, I never see them again. Same with Kindle, even if it syncs my notes to Goodreads. And on top of all that, notes from physical books had to live somewhere else again.
What I wanted was one place for all of it. Easy, right? Not really.
What I built
A bookmarking app for physical books, and for ebooks, PDFs and articles too. Readwise exists (it collects your highlights from Kindle and other apps), and there are other apps like it. But I couldn’t find one that suited what I needed without a lot of effort.
It’s called QuoteIt. Point at the page, tap the paragraph, save. The quote either goes inside its book, or into a temporary place I call the Inbox, until I get time to sort it out.
I started building it while I was still reading those two books. Which is a slightly strange loop, building the tool for the problem while you’re still in the middle of the problem (yes, I know :D).
How I built it
“I’m not good at coding” used to be my reason for not building things. Since AI-assisted coding showed up, that excuse has stopped working. Yes, I know I’m talking about AI, and some of you might be despising it with all your heart, and maybe despising me for writing this. But the reality is, AI is a better coder than I ever was, and it is helping me build the things I want.
Every project of mine starts with writing down what I want to achieve, and for a while now, that writing has mostly happened in Freeform. QuoteIt started as this.
What I wanted to achieve was simple, and a bit more straightforward compared to other flows. So I wrote a huge block about the design and the flows, and handed it to Claude Design. It built the design using SwiftUI elements, which was a requirement from me. I wanted QuoteIt to feel native on the iPhone, and to sit properly in the parts of iOS it depends on, like the share sheet, the camera and the widgets.
Then there was usability. The core of the app is scanning a page with the camera, and that is not something you can judge from a screenshot. So I installed a developer build on my personal phone, carried it around and used it every day while I read. That approach helped me a lot in finding and fixing bugs, because I was finding them the same way anyone else would, in the middle of a book.
There were plenty of scanning issues early on, but the one that changed the design was simpler. Opening the app and finding the scanner took too long. So I added a shortcut: long-press the icon on the home screen, and you’re straight into scanning. That’s the first flow in the next section.
The part I didn’t expect to learn was how to standardise design patterns and tokens across a Swift project. I knew how to do that on the web, with colour and type defined once and used everywhere, but I had never done it in Swift. In QuoteIt, every colour now comes from one palette file. The demos on this page use the same colours, which is why they look like the app.
The phone problem
The worst part of digital note-taking, for me, is that it disrupts the reading. QuoteIt disrupts it too, there is no question about that.
But the bigger problem was never the app I was reading in. It was the phone. Taking it out while I’m reading pushes me out of the zone. The moment it’s in my hand, it’s a Pandora’s box of distractions, and the book is suddenly the second most interesting thing in the room.
I couldn’t remove the phone from the process, since that’s where everything lives. So the approach was to make the time it’s in my hand as short as possible, by cutting the steps to take a note down to as few as I could. With a physical book, I long-press the app icon, choose New Quote by Scanning, and tap the paragraph. With an ebook or a PDF, I select the text and share it to QuoteIt. Then the phone goes back and I go back to the book.
Articles work the same way. Anything I can select in a browser, I can share into QuoteIt.
The one place it doesn’t work well is Apple Books, which, of course, is one of the apps I read in the most. The share extension I built (the bit that puts QuoteIt in the Share menu) isn’t working when Apple Books is open, and I still need to figure out why.
Sorting it out later
Things 3, a to-do app, has an Inbox where a task can land before you decide where it belongs. I borrowed that idea. Any quote can go into QuoteIt’s Inbox for now, and I can take my time to add it to a book later. The Inbox was crucial for cutting down the time it takes to capture a note while I’m reading.
The Inbox also has one CTA. Everywhere else, a quote card carries a bookmark. In the Inbox it carries “Identify” instead, because the only thing you should be doing there is giving the quote a book.
Three small decisions
The quote cant be edited, only the note. What I capture is what the book said, word for word. The note under it is mine, and I can change it whenever I want. I didn’t want anyone to guess which is which, so the quote screen says it out loud: “Editable. The quote above is not.”
When I save, the book is usually already picked. The capture sheet pre-fills the last book I filed to. If I’m reading the same book all week, saving is one tap. The Inbox is only for the quotes I chose not to file yet.
The scanner doesn’t guess. An earlier version of the scanner tried to be clever. It skipped the parts that “weren’t quotes”, like the running head (the book title printed at the top of every page), and every now and then it skipped a real quote too. So now it doesn’t guess. It offers every block it finds, even the ones nobody will ever tap. A running head nobody taps costs nothing. Losing the quote I actually wanted is the worst thing that screen can do.
Areas to improve
First, the scanner. Point the camera at a page, and it reads the page back as blocks you can tap. Tap a paragraph to take all of it. Tap it again to narrow it down to one sentence.
For now, Im relying heavily on Apple’s VisionKit (the text recognition built into iOS), and the scanning still isn’t perfect. That’s something I’m working on.
The other one is smaller. I always liked the idea of showing each book’s cover, so you can easily remember which book a quote came from. Right now I fetch covers from an open book database, but at times the fetching doesn’t work. So when it doesn’t, QuoteIt makes one. The title and author become the binding, and the colour comes from the title itself. Same title, same colour, every time, in the app, on the widget and in the demo below. Type your own title in and see what it picks.
Widgets
Bookmarking a quote is what feeds the widgets. There is no favourites screen in the app, and that is on purpose, the widget is where favourites live.
Each widget shows one bookmarked quote a day. Which one is worked out from the date, so every QuoteIt widget on your phone shows the same quote, and bookmarking something new doesn’t restart the cycle. The smaller sizes skip quotes that are too long to fit rather than cutting them off mid-sentence.
That’s the “come back later” part I wanted from the start. One quote a day, on the home screen, without opening anything.
The widget is also a way back into the app. Tap the quote and it opens straight to it. Tap the + and it opens a blank quote, for the lines I would rather type than scan.
Back to the borrowed books
I finished both books, and they went back to my friend. The quotes stayed with me, and so did what I learnt from them.
QuoteIt isn’t finished in the same way. The text scanning still needs polishing, it isn’t 100% accurate yet, and right now everything lives on my phone. Next is iCloud sync, so the same Inbox and the same shelf can follow me onto an iPad and a Mac.