2 MSc dissertation, shipped and evaluated

Distill

A study app that turns anything you read into a summary, flashcards and a growing map of how it all connects. It started as a product pitch, was scoped into defensible research, and was redesigned more than once as evidence came in.

Role
Solo product designer and developer
Context
MSc dissertation, University of Lincoln
Platform
Installable web app (PWA)
Status
Shipped and evaluated

Scoping a product into a dissertation

Distill began as a real product idea for a universal problem: forgetting most of what you read within days. Testing recall on real people would have needed a full ethics application that didn't fit an MSc timeline, so I reframed the evaluation around usability, performance and correctness instead. A scope decision, argued and defended, not a workaround.

Distill welcome screen: the name in a serif, the line 'Your knowledge, connected.', a short description and a Let's get started button
The first thing a new user sees: one sentence on what it does, one button.

The mid-build redesign

The original plan was a conventional multi-page app, with a top nav routing between separate Upload, Cards, Study, Progress and Map pages. Partway through the build I decided that model fought against how someone actually works inside their notes, and redesigned the information architecture around a persistent sidebar and a writing canvas, closer to Notion. A deliberate call driven by how the app is used, not scope creep.

Top navigation Five separate pages Before → NotesStudyMapProgress Writing canvas After
From a page per task to one shell you never leave.
A Distill note titled Attention Is All You Need, with tags, an AI summary, five flashcards and the note text, beside a sidebar grouping notes by subject
A note after Distill has processed it: tags, a summary and flashcards sit above the writing, and the sidebar groups every note by subject.
A study card from The Roman Republic showing its answer, with six rating buttons from Blackout to Easy and a tip to press 0 to 5 on the keyboard
Studying a card. Six honest ratings feed the spaced-repetition schedule, and the keyboard shortcut is taught right under the buttons.

Evidence over instinct

A heuristic evaluation that found real problems

I evaluated all five core flows against Nielsen's ten heuristics and found 11 severity-rated issues, including a progress dashboard that showed a 71% "mastery" score for notes with no reviewed cards, and no way to delete a note at all. All 11 were fixed and re-checked in the running app.

Adversarial testing found a vulnerability

A separate pass trying to break the app with malformed and malicious input found a stored XSS hole: pasted rich content went into the page unsanitised. I fixed it with plain-text paste handling plus DOMPurify as a second layer, then proved it closed by reopening the "infected" note and confirming the payload no longer ran.

Both findings only showed up by using the running app under realistic and hostile conditions. Neither would have appeared in type-checking, linting or a quick click-through.

Knowledge map: notes drawn as coloured circles grouped by subject, with lines connecting related notes
The knowledge map links related notes and colours them by subject.
Progress page: a bar chart of cards reviewed over 30 days, a retention line chart, and a deck table with mastery bars
The Progress page, drawn with the small hand-built SVG charts that replaced a heavy charting library.

A design system that holds

Colour, spacing and type live as CSS custom properties. That mattered in practice: I found more than 44 places across 20 files quietly using raw hex values, which meant dark mode silently didn't reach large parts of the app until I migrated them file by file. Text size and reduced motion are real settings that can override the operating system's preference, not just mirror it.

Performance shaped the design

A Lighthouse pass showed the Progress page was the only one missing the performance target, because of a charting library too heavy to tree-shake: 110KB of gzipped JavaScript for two simple charts. I replaced it with a small SVG chart component, cutting that page's script weight by 98% and lifting its score from 85 to 92, with the charts checked side by side against the originals.

Measuring the AI, not just the interface

I built a ROUGE benchmark on a stratified corpus of 20 documents (three subjects, three lengths) to score the AI summaries against reference text, because "the AI feature works" needed a number behind it.

Stack and methods