Scott Lederer

UX design for scrappy web app teams

Totes

2023 · Personal productivity design and development · Deployed

Totes was a proof-of-concept exploration into the relationship between notes and todos.

It's common for todos to naturally emerge while taking notes in meetings, during desktop research, or on the fly. Unfortunately, while notes apps all but universally support checklists, they tend to do a poor job affording inline todos as distinct entities that can surface outside their originating documents. I've always wanted to be able to take notes as needed, organically creating inline todos along the way, and then later consult a todo list automatically populated with those and other related todos.

So I scratched that itch by designing and building a fully functional web app exploring how such an app might work.

The Svelte frontend used the TipTap rich text editor with custom extensions for authoring infinitely nestable inline todos and notes. The backend was powered by Appwrite.

List of notes in the selected area
By default, Totes lists recent notes in the selected area
Overview of open todos in the selected area
Toggling on todo mode surfaces open todos
Tote detail view with nested todos
Each note (or todo) has a rich body that can contain nested todos (or notes)
Composing an inline todo
Composing an inline todo in a note's body
Nested notes view
Detail view includes a mode that hides body text to just show nested notes…
Nested todos view
… or nested todos
Desktop view of an area's recent notes
Desktop view of an area's recent notes
Desktop view of an area's open todos
Desktop view of an area's open todos
Desktop view of a note's body with nested todos
Desktop view of a note's body with nested todos
Desktop view of long note with nested notes
Desktop view of long note with nested notes
Todos + Notes. Done write.
Totes logo <3