Research Recommender · AI + UX · 2025

Find papers, take notes, cite them, in one place

A research paper recommender with smart note-taking and automatic APA, MLA and Chicago citations. Designed and coded end to end.

Designer & Developer · Self-initiated project

Research, UX, UI, and the Python + Flask build

Watch the demo
Research Recommender interface with paper detail, notes and citations
  • ROLE

    Designer who codes, end to end

  • STACK

    Python · Flask · scikit-learn · PyMuPDF

  • MODEL

    TF-IDF + cosine similarity, NIPS dataset

  • USERS

    Grad students, PhD researchers, academics

The problem

Notes and citations scattered across a dozen PDFs

WHY I BUILT IT

“As a researcher and student, I often struggled with organizing key points and citations across multiple academic papers.”

Keep track of relevant content

Finding the right papers takes longer than reading them.

Organize notes and citations

Quotes, figures and formulas end up in different places, with citations retyped by hand.

Compare papers across topics

No easy way to hold two papers side by side.

Project goal

One tool for the whole literature review

Recommend

Relevant papers from a keyword search

Compare

Multiple papers side by side, in tabs

Take notes

By category: text, chart, formula, figure

Cite

Auto APA, MLA and Chicago

Export

Notes as .txt for assignments

Target users

Graduate students & PhD researchersProfessors & academic writersAnyone needing fast, accurate literature review

UX flow

From a search to a finished citation

  1. 01

    Land on the homepage

    Clean search bar, one call to action

  2. 02

    Search “neural networks”

    Results sorted by cosine similarity

  3. 03

    Or upload a paper

    Drag and drop a PDF or Word doc, or paste a link

  4. 04

    Open a paper card

    Goes to the paper detail view

  5. 05

    Read on the left

    Take categorized notes on the right

  6. 06

    Select key phrases

    Choose a category; a citation is generated

  7. 07

    Compare in tabs

    Open other papers side by side

  8. 08

    Download notes

    With citations, copied or exported

Information architecture & wireframes

Three views: home, results, paper detail

A split view keeps the paper on the left and your notes on the right.

Information architecture diagram
Information architecture
Homepage wireframes with search and upload
Homepage: search and upload
Result cards with score badges and split detail view
Result cards with score badges, and the split detail view
Highlight to note, citation options and download
Highlight to note, citation options, download

Visual design

Calm blue for focus, sunshine for action

Electric Sapphire

#0055FF

Blue Ribbon

#57A0FF

Sky Breeze

#82B9FF

Frosted Sky

#F1F7FF

Snow Drift

#F9F9F9

Pure White

#FFFFFF

Sunbeam

#FEF7A3

Sunburst

#FFD233

Poppins

Regular · Medium · SemiBold · Bold

Headings and UI. Geometric, friendly, highly legible across screen sizes.

Albert Sans

Regular · Medium · SemiBold · Bold

Body and research content. Clean and professional for complex reading.

Under the hood

Classical NLP, built by a designer who codes

TF-IDF weighting and cosine similarity recommend papers from the NIPS dataset.

01

Data ingestion

02

Preprocessing

03

TF-IDF model

04

Similarity scoring

05

Paper display

06

Citation generator

TF-IDF matrix visualization
TF-IDF matrix: each cell is a term’s weight in an abstract
Recommendation algorithm code
The recommendation algorithm
Data loading and preprocessing
Data loading & preprocessing
Merging authors across three CSVs
Merging authors across three CSVs
Handling missing values
Handling missing values

Structured citation logic

Highlight a line, get a citation

Template-based formatting pulls authors, title and year to build APA, MLA and Chicago, with copy to clipboard.

Highlight to save a note
Highlight to save a note
PDF viewer integration
PDF viewer integration
In-text and reference citations
In-text and reference citations

Flask interface · iterations

Five rounds to a finished interface

  1. Iteration 1

    1First working cards

  2. Iteration 2

    2Author and year added

  3. Iteration 3

    3UI refresh

  4. Iteration 4

    4Keyword highlight

  5. Iteration 5

    5Titles become links

Final interface with search, recommendations, notes and citations
The final interface: search bar, recommendation cards, note panel, PDF viewer, citation dropdowns, download and copy
“Designed for student-researchers. Powered by AI. Built by a designer who codes.”
PythonFlaskscikit-learnPandasNumPyPyMuPDFHTMLVS CodeGitHubFigma

Self-initiated project. I designed and built it end to end: research, UX, UI and the Python/Flask implementation.

MORE PROJECTS

All work