Explainable-AI note workspace · MS-HCDE capstone · React and Supabase

A thinking tool
that shows its work.

People don’t lose ideas when they write them down. They lose them on the way back.

The one thing I kept seeing across six interviews.

Role: Product and visual design, the design system, and the full-stack build. I led the product and interface and directed the AI that wrote most of the code.
Team: Luhmann’s Quorum, a two-person team with Ruhi Vadsariya. Advised by Prof. Sang-Hwan Kim.
Context: MS Human-Centered Design and Engineering, University of Michigan.
Live: A working prototype, built end to end, never publicly released. No users, and that is the truth of it.

What I built

30commits, all mine, across the capstone build
8surfaces in one workspace
6.5out of ten, on my own hard audit

The Tho8 three-pane workspace on a near-black canvas: a note library and folders on the left, a note open in the center rich-text editor, and the Insights rail on the right with Outline, Backlinks, Link suggestions, Resurface, and Comments. The link suggestions and resurfaced notes each carry a one-line reason in neutral text. — The workspaceLibrary, editor, and the Insights rail, side by side. The AI lives next to the cursor, not in its own window. The right rail holds Outline, Backlinks, Link suggestions, Resurface, and Comments. The suggestions and resurfaced notes each carry a one-line reason.

The short versionThe thirty-second read

Six knowledge workers lost ideas, forgot their own note titles, and gave up on search in under thirty seconds. So I designed a workspace where capture is effortless, connection happens by meaning, and every AI nudge earns trust with a one-line reason and, with transparency on, the source notes behind it.

Interviews, sixty minutes each, in real note setups

Tools benchmarked, three note apps and three AI-native, on five dimensions

Rounds of moderated usability testing, V1 to V2

Commits, all mine, one real full-stack app

6.5

My own audit of the build, out of ten, written down in full

^01 The problem Where ideas die

Ideas don’t die at capture. They die on the way back.

Across every interview the same loop kept breaking. People wrote the idea down, then couldn’t find it, couldn’t link it, or couldn’t trust the AI that tried to help them with it.

The lifecycle of an idea, broken on the return. 01 Capture is alive, two taps in the lightest tool. Then the rail snaps at the handoff between a team system and a private vault, with Slack and email in between, and the later stages stay ghosted and never reached: 02 Connect breaks on title recall, 03 Retrieve takes twenty to thirty seconds then people recreate the note, and 04 Resurface is the gap nobody fills.

If I still could not find it I would stop and write a new note. That is the painful truth.
A participant, when the search runs out.

^02 Research Two semesters, five phases

Problem discovery first. Solutions last.

Every decision had to trace back to an observation, a quote, or a measured friction point. A finding only reached the requirements if it showed up in at least two of three independent sources.

The research method as a five-phase spine, problem discovery first and solutions last. The four discovery phases: 01 Literature Review, foundations and prior art; 02 Benchmarking, six tools across five dimensions; 03 User Interviews, six people at sixty minutes each; 04 Synthesis, ten findings and ten requirements. Then, past a divider, the lone solutions phase: 05 Design and Test, lo-fi to hi-fi across two rounds.

A triangulation matrix of the six core findings against three independent sources: literature, the tool benchmark, and the interviews. Every finding surfaced in the interviews and the benchmark; the literature backed all but one, so each holds across at least two of the three sources. — **Six core findings, each triangulated.** Every one surfaced in the interviews and the benchmark; the literature backed all but one. The one-line *because*, the reason people come to trust, held across all three.

What today’s tools get right, and wrong.

We ran the same tasks through six networked-note tools, three established note apps and three AI-native ones, and assessed each on the same five dimensions. Two columns came back thin across every one of them: nobody surfaces the right note at the right moment, and nobody shows the proof behind a suggested link. Those two gaps became the product.

Capture: fast beats fancy Connect: link by idea, show the proof Retrieve: strong, but heavy under time Resurface: the gap nobody fills Trust: evidence, or it is ignored

The competitive benchmark grid: six networked-note tools, Obsidian, Notion, Logseq, Tana, Mem, and Readwise, assessed across five dimensions, capture, connection, retrieval, resurfacing, and trust, with a short verdict on each. — BenchmarkSix tools, five dimensions, one verdict per cell. Three established note apps, Obsidian, Notion, and Logseq, and three AI-native, Tana, Mem, and Readwise, assessed on capture, connection, retrieval, resurfacing, and trust. The two thin columns were resurfacing and proof, the space almost nobody builds.

I tried Mem for a month because I liked the idea of asking questions across my notes, but I ran into trust issues when it guessed wrong about a link, so I stopped.
A participant, on quitting an AI tool that guessed wrong.

^03 The people Six setups, one story

Six people. Six setups. One story.

Sixty minutes each, screen-sharing their real vaults, thinking aloud through four task probes in the tools they already use: make two notes relate, find a note they could not name, judge what else on the page they would trust, and explain why two things belonged together. No hypotheticals. Every observation traces to a real moment of friction.

Six anonymized research participants with six different setups, all converging on one shared finding. 01 Doctoral student, deep research vault; 02 Master's student, local Markdown vault; 03 Master's student, Logseq and journals first; 04 Product Manager, meeting to memory; 05 Strategy Consultant, careful with sources; 06 Senior UX Researcher, evidence over recall. The one friction all six shared: linking by title recall.

The real interview screener, a Google Form titled Capstone 1: Interview Screener Form, with nine questions: role, how often they capture notes, which note tools they use, how often they link or tag, willingness to screen-share a real vault for sixty minutes, time zone, contact, devices, and a short prompt asking them to describe the last time they tried to find an old note. — How we recruitedThe real screener, not a description of one. Nine questions to find six people who live in their notes. The last one, describe the last time you tried to find an old note, is the whole problem in a single line.

If I type a phrase the system should propose a handful of precise candidates with a short because.
A participant, on how linking should feel.

I never tag on the phone. It slows me down.
A participant, on the front door.

^04 The trust ladder What earns a click

The trust ladder.

When we asked what would make you trust this suggestion, participants ranked evidence types in a strikingly consistent order. I turned that order into the design of every AI surface in Tho8.

because · shared tags, #memory and #trust. The reason is the match itself, and with transparency on the source notes sit one click away.

Seeing the citation match gives me confidence. If both notes cite the same paper I trust the link.
A participant, ranking the evidence.

^05 The shape Four loops, one surface

Four loops. One surface.

Knowledge work isn’t a funnel. It is four nested loops that reinforce each other, and each one has an effort threshold people walk away from the moment you cross it. If any loop breaks, the whole thing feels broken.

The four loops of knowledge work on one spine, closed into a cycle, not a funnel: 01 Capture (don't lose it, in one keystroke), 02 Connect (link by meaning, not titles), 03 Retrieve (find it in thirty seconds or less), and 04 Resurface (right idea, right moment). An ember return arc loops from Resurface back to Capture around a three-pane shell labelled one shell, eight surfaces, one workspace.

A three-pane shell anchors the product: library on the left, note canvas in the middle, intelligence panel on the right. Eight surfaces, one coherent workspace. AI never opens in its own app. It lives next to the cursor.

A new empty note on Cmd+N in the Tho8 editor: the prompt Start typing or press slash for commands, a Use template button, a Draft with AI button, and a row of quick-action template chips. No required fields. — CaptureCmd+N, and a note is ready for the idea. The empty note asks for nothing. Start typing, press slash for commands, reach for a template, or hand the first draft to AI. Nothing to fill in first, no friction at the front door.

^06 Explainable AI The heart of it

No suggestion is a black box.

Every suggestion starts from a real similarity match, not a hunch. It shows the basis in one line: the tags two notes share, a note they both touch, or a plain concept match. Open Details and it names the tag the link leans on. Turn on Transparency and the source notes appear as chips you can open. No confidence percentage, no black box, just the match, shown plainly.

The Link suggestions card in the Insights rail on a near-black canvas: a header reading Based on this note plus two related notes, then a suggested note with its title and an Open link, a one-line because in neutral text, a relation dropdown set to supports, Accept and Dismiss buttons, a Details toggle revealing the counterfactual, and an Evidence row of clickable source-note chips. — ExplainabilityThe reason rides with the suggestion, inline in the rail. Each candidate shows why it matched, the shared tags or the concept similarity, and a relation you can set. Open Details and it names the tag the link leans on. With Transparency on, an Evidence row lists the source notes as chips you can open. Accept or Dismiss in a click, no modal in the way.

I put the reason in the data model, not the copy. Every suggestion is stored with its because, its evidence notes, and the tag it leans on, all computed from the real match. So the reason is the mechanism itself, not an AI story written afterward to sound convincing. It lives where it cannot drift from what the interface claims.

^07 Retrieve and connect The everyday loops

Find it, or ask about it, without leaving the keyboard.

The Cmd+K command palette over the workspace: a search field reading Type a command or search notes, results grouped under Recent, Actions, and Notes, the matched letters of the query highlighted, and an esc hint. — RetrieveCmd+K, and any note is a few letters away.

Find it in under thirty seconds.

Cmd+K opens a fuzzy search over every note and command, grouped into Recent, Actions, and Notes, with the matched letters lit as you type. Built to the thirty-second budget the research demanded. People gave search one query and one hop before they gave up and rewrote the note, so finding it has to land inside that. Enter jumps straight to the note.

The editor AI panel with the Ask pill active: pills for Ask, Summarize, Continue, and Draft, a line reading Using the full note, a question typed in, and an answer card below labeled Based on this note only, an Evidence chip, and actions to Insert below, Create note, and Copy. — AskAsk in your own words, and the answer names its note.

Ask the note you are on.

The editor’s AI panel runs on the note in front of you, Ask, Summarize, Continue, or Draft. The answer comes back in a card labeled Based on this note only, with the source note shown when Transparency is on. One click inserts it below, replaces the selection, spins it into a new note, or copies it.

^08 The graph For thinking, not decoration

A graph you can actually stand in.

The graph is global, but it never throws the whole hairball at you. Click a node and it lights up with its neighbors while the rest dims; a Focused Node panel fills with the note, its connections, and a place to generate ideas. The full graph overwhelmed people in testing, so focus and a clear way out became the point.

The global graph on a near-black canvas: many note nodes and edges, with one note selected so it and its neighbors glow orange while the rest dim. A Focused Node panel on the right shows the note title, when it was updated, a preview, Open and New-tab buttons, and its connections. A legend reads notes gray, tags orange, folders blue, with hints to click, drag, scroll, and press Esc. — The graphSelect a node and the graph focuses: it and its neighbors light up, the rest fades back. The Focused Node rail turns the selection into a next step, its connections and a place to generate ideas. A legend, an onboarding card, and a Back-to-notes button keep you from getting lost. It is built for thinking, not for looking impressive.

In the first build the graph rendered a black screen and crashed the app. I found it in my own audit, and wrapped the graph view in an error boundary with a real fallback, a “Graph view crashed” message with a way back to your notes, instead of a dead screen. The crash became a caught, recoverable state, not a patch.

The global graph is too chaotic for me … Local graph plus backlinks is enough.
A participant, on the global graph, and why Backlinks carry the load.

From the graph rail, Explore Related Thinking. Select a note and it grows ideas from that note and its neighbors, each a card with a title, a one-line summary, and one button to turn it into a note. It reads as connecting what you already wrote, not conjuring something new.

2560 × 1600AI Ideas from a selected note: a title, a summary, and a Create note button on each

GenerateIdeas grown from the note you selected, each a title and a summary. One button turns any idea into a note. This panel is the app’s one violet moment, marking generative AI apart from the brand orange everywhere else.

^09 The testing Six people, two rounds

What the testing changed.

Two rounds of moderated testing, V1 to V2. The same confusions surfaced again and again, and each one pointed at a specific fix. I shipped the fixes, then tested the build again.

The graph overwhelmed people before it helped.

A context-first graph: it opens focused on the note you clicked, with an onboarding cue and a clear way back, instead of the whole hairball at once.

People could not tell what the AI was working from.

Source labels on every answer, Based on this note or Based on three related notes, so the scope is never a guess.

Idea generation only clicked when it was tied to a note.

Renamed it Explore Related Thinking and anchored it to a selection, never a blank prompt.

People could not tell whether a note had saved.

A visible save state, Saved just now, so no one has to wonder.

Trust rose the moment people could see the reasoning.

Made Why this a primary layer, the evidence one click away, not a buried toggle.

The rail asked for too much at once.

Progressive disclosure: the essentials first, the rest on interaction.

Six people is a small sample, and no one has used this in the wild, so I will not dress it up as a measured win. What two rounds of testing bought was precision: the confusion was specific, so the fixes could be too.

A two-sided honesty ledger. What I can prove: designed and coded it solo, thirty commits all mine; ran the research, six interviews, a six-tool benchmark, two test rounds; audited my own build, 6.5 out of 10, my own score. What I won't claim: that anyone used it, no adoption and no active users; any before-and-after number, six people find confusion, not a lift.

I tested with six people and turned their confusion into specific fixes. A save state they could finally see. A graph that stopped crashing. A reason attached to every suggestion. That part is real, and it is the part worth judging.

^10 Design system A quiet interface for loud thinking

A quiet interface for loud thinking.

Calm near-black surfaces so the words stand out. Two accents, and only two: Ember orange for the brand, selection, focus, and the live highlight, and a violet for the generative-AI moments. The reasons themselves, the because and its evidence, stay in neutral zinc, so a reason reads like a fact and not a pitch. I built the system alongside the UI, not after it, so every screen spoke the same language as it was drawn.

The product palette, from tokens.css

#09090BBase canvas, near-black, not pure

#18181BRaised surface

#F2572BEmber, brand accent

#A78BFAAI accent, violet

#FAFAFAText, primary

#A1A1AAText, secondary (zinc)

#71717AText, muted (zinc)

Inter, Outfit, JetBrains Mono

DisplayOutfit 800

HeadlineOutfit 700

Body copyInter 400

note_links · ⌘KMono, kbd & code

Fixes from the audit landed in the tokens, not the screens. A failing contrast value became a token change every component inherited. A missing error state became a reusable error boundary. That is how the same defect does not come back.

^11 Reflection What it taught me

Trust is a design problem, not a model problem.

The thing I had backwards at the start was treating trust as something the model earns by being good enough. It isn’t. People believed a suggestion the moment they could see why it was there, and ignored it when they couldn’t, however good it was underneath.

So the real work was never the model. It was making the reason visible, making the save state visible, making the graph start somewhere a person could actually stand. Small, unglamorous things. That is where the trust came from.

The fastest way to find what is broken is to measure your own work a new way each round, not to walk the same screens again. Six people, two rounds, and a hard look at my own build taught me more than another week of polish would have.

By the bar I hold now, a few things date it. An accent glow token that should have stayed neutral. A capstone deck that leaned on stock AI imagery. The research rigor and the systems discipline are the parts that hold up, and they are the parts I kept.

A working prototype, built end to end, kept private.

A thinking toolthat shows its work.