MSc dissertation
Design, build and evaluation, solo

Rebuilt mid-project when the structure turned out to be wrong.

A study app that turns your reading into summaries, flashcards and a map of how it all connects.

11usability issues found, all fixed
98%less script on the slowest page
85 to 92Lighthouse score on that page

A Distill note with its tags, summary and flashcards above the writing

Built with React, TypeScript, Vite, CSS tokens, IndexedDB and D3.

The problem

You forget most of what you read within days.

Distill began as a real product idea for that problem. 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 what I could measure properly: usability, performance and correctness. A scope decision, argued and defended.

The first thing a new user sees: one sentence that types itself, and one button.

The decision that changed it

From a page per task to one place you never leave.

Partway through the build I decided the multi-page plan fought how someone actually works inside their notes, and redesigned the structure. It cost time mid-project. It was a deliberate call driven by how the app is used.

Before. Five separate pages behind a top nav. Every task meant leaving the note you were in.

After. A sidebar that holds every note, and one canvas to write, summarise and study in.

A flashcard question with a Show answer button — A question, and nothing else on screen.

Reveal, rate, next. Six honest ratings feed the schedule, and the keyboard shortcut is taught under the buttons.

None of it would have shown up in a quick click-through.

Evidence over instinct

11real problems, found by using it properly

I checked all five core flows against Nielsen's ten heuristics and rated each issue by severity. One example: the progress dashboard showed 71% "mastery" for notes with no reviewed cards. Another: there was no way to delete a note at all.

A separate pass with hostile input found a stored XSS hole, where pasted rich content went into the page unsanitised. I fixed it in two layers and proved it closed by reopening the infected note.

All 11 were fixed and re-checked in the running app.

The knowledge map linking related notes, coloured by subject — The knowledge map links related notes and colours them by subject.

A design system that holds

Forty-four stray colours, moved onto tokens.

Colour, spacing and type live as CSS custom properties. I found more than 44 places across 20 files quietly using raw colour values, which meant dark mode silently missed large parts of the app.

I migrated them file by file. Text size and reduced motion are real settings too, and they can override the operating system instead of only mirroring it.

Performance shaped the design

Two small charts were costing 110KB.

A Lighthouse pass showed one page missing the target because of a charting library too heavy to trim. I replaced it with a small hand-built chart, checked side by side against the original.

What the page was loading for two charts, against what replaced it.

The Progress page with small hand-built charts — The Progress page, drawn with the charts that replaced the library.

What I took from it

The real problems only appeared when I used it the way a person would, and the way an attacker would.

Neither the usability issues nor the security hole would have appeared in type-checking, linting or a demo run. I also built a benchmark of 20 documents across three subjects to score the summaries against reference text, because "the feature works" needed a number behind it.