Talking to real people to learn what they need, before and after building.
In the notes app: Five short calls with students showed that finding old notes is the main pain.
A field guide: read once, then look things up
Field guide for a small notes app
Building a notes app draws on 30 fields in six families. For a small team, 16 matter now and 14 can wait.
Keep in your head (only these)
- Design decides it, engineers build it, shipping runs it.
- Four fields fail quietly, so they come first.
- Every other field is one search away.
Chapter 1 of 3, about 1 minute
Where does everything fit?
Work moves from left to right. Each family hands its work to the next. The bar under each family shows how much of it matters now.
Build
Frontend engineeringBuild what runs in the browser Backend and dataBuild what runs on the serverProtect and prove
Security and privacyKeep notes safe and privateShip and run
Shipping and runningRelease it, watch it, recover itOwed by every family
Qualities everyone owesDuties that no single family ownsTake from this: the notes app sits in Build. Most of Ship and run can wait, except backups.
Remember: design decides it, engineers build it, and shipping runs it.
Chapter 2 of 3, about 1 minute
Which four cannot wait?
Before this: design decides it, engineers build it, and shipping runs it.
For one builder, a mistake in these four is silent and hard to undo. Tap one to read its entry.
- Backups and recoveryOne lost database erases every note. Test a restore before launch.
- Access controlOne wrong rule shows a stranger your notes, and nobody sees it happen.
- Privacy by designNotes are personal. Keeping less data is the cheapest protection.
- Data modellingA wrong shape is slow and costly to change once people have notes.
Can wait: localization, cost tuning and error tracking. They pay off once real people use the app.
Take from this: the fields that fail quietly and cost the most come first.
Remember: fields that fail quietly and cost the most come first.
Chapter 3 of 3, about 1 minute
Look something up
Before this: fields that fail quietly and cost the most come first.
Search by name, definition or example. The filter starts on Now and always says how many entries it hides.
Product and design
Understand
User research
Product strategy
Choosing what to build, for whom, and what to leave out.
In the notes app: The app is for people who keep personal notes, not for teams.
Shape
Information architecture
How things are named, grouped and found.
In the notes app: Notes live in notebooks, and tags cut across notebooks.
See also: Search
Interaction design
How a screen behaves when someone taps, types or makes a mistake.
In the notes app: Deleting a note shows an undo bar for ten seconds.
Content design
The words on screen: labels, messages and tone.
In the notes app: Error messages say what happened and what to do next.
Frontend engineering
Shape
UI architecture
How the interface is split into parts that can be reused and changed safely.
In the notes app: The editor, the note list and the sidebar are separate components.
State management
Deciding where data lives on screen and keeping every view in step.
In the notes app: Renaming a note updates the list and the open editor at once.
Data fetching
How the browser asks the server for data and keeps answers for reuse.
In the notes app: The note list loads first, and the full text loads when a note opens.
See also: API design
Quality of the client
Frontend performance
How fast a page loads and how smooth it feels to use.
In the notes app: The editor loads after the list, so the first screen appears sooner.
See also: Performance
Frontend testing
Automated checks that the screens work the way people expect.
In the notes app: One test opens a note, edits it and checks that the change shows.
Backend and data
API design
The agreed way the browser and the server talk to each other.
In the notes app: Every request to change a note carries the note’s version number.
See also: Data fetching
Data modelling
How information is shaped and stored so that it stays correct.
In the notes app: A note belongs to one notebook and can have many tags.
Sync and conflicts
Keeping copies on two devices the same, and deciding what happens when they disagree.
In the notes app: If a phone and a laptop edit one note, the app keeps both versions.
Background jobs
Work the server does later, such as sending email or cleaning up.
In the notes app: A nightly job removes notes that have been in the bin for 30 days.
Search
Finding words inside large amounts of text quickly.
In the notes app: Search covers titles and note text, and ignores capital letters.
See also: Information architecture
Security and privacy
Sign-in
Proving who someone is, with passwords, codes or passkeys.
In the notes app: People sign in with an email link, so there is no password to forget.
See also: Access control
Access control
Deciding who may see or change each thing.
In the notes app: A shared notebook lets a guest read a note but not delete it.
See also: Sign-in
Encryption
Scrambling data so that only the right people can read it.
In the notes app: Notes are encrypted on the server, and the keys are kept somewhere else.
Privacy by design
Collecting as little personal data as possible and being clear about it.
In the notes app: The app stores an email address and nothing else about a person.
Dependency hygiene
Keeping the libraries the app relies on current and trusted.
In the notes app: A weekly check lists outdated libraries and known security problems.
Shipping and running
Automated builds
A script that tests and packages every change, so releases are repeatable.
In the notes app: Every change to the main branch runs the tests and builds the app.
Hosting
The computers and network that serve the app to people.
In the notes app: One small server and one database serve the whole app.
Backups and recovery
Copies of data kept apart from the original, and the practice of restoring them.
In the notes app: A copy of the database is saved every night, and nobody has tried a restore yet.
Monitoring and alerts
Watching the app while it runs and being told when it breaks.
In the notes app: Nothing watches the app yet, so the builder hears about problems from users.
See also: Error tracking
Error tracking
Capturing the errors people hit, grouped so that the most common come first.
In the notes app: Failed saves are logged with the note text removed.
See also: Monitoring and alerts
Qualities everyone owes
Accessibility
Making the app usable by everyone, including people who use a keyboard or a screen reader.
In the notes app: Every button can be reached with the keyboard, and text meets contrast rules.
Performance
How fast the whole experience feels, from tap to result.
In the notes app: Opening a note should take under half a second on a phone.
See also: Frontend performance
Documentation
Written notes on how the app works and why choices were made.
In the notes app: A short file explains how to run the app and where the data lives.
Cost
What the app costs to run, and how that grows with use.
In the notes app: Hosting costs about ten dollars a month for the first thousand people.
Localization
Supporting other languages, date formats and reading directions.
In the notes app: The app is English only for now, with all text kept in one file.
Take from this: every field is one search away, and each entry says where it shows up in the app.
Remember: any field is one search away.
Recap
- Design decides it, engineers build it, and shipping runs it.
- Fields that fail quietly and cost the most come first.
- Any field is one search away.