issue 001  //  09.08.2026  //  16:04 theme  //  snd: off
menu
homepage / 002 ux + product / synapse06 / 07

synapse

a mobile app that helps researchers discover, organize, and track academic papers and labs.

26research topics, not journals. the gradient says how related the subtopics are.
topic cards (illustrative)
what it is

a mobile app for researchers to discover papers and labs, organized around 26 research topics instead of journals.

what i did

owned the information architecture and every key design decision; used figma make to generate directions fast, then refined every screen and interaction by hand.

what happened

delivered the core screens, ia, and a live figma prototype in a one-month contract, nov 2025.

speci
roleux designer (contract)clientsynapsewhennov 2025platformmobilescopecore screens + information architecturetoolsfigma make · figma · claudecase studymilk-droid.github.io/synapse-case-study/ ↗
the setup01

synapse is a mobile app for academic researchers: browse topics, follow institutions and labs, get paper recommendations, save papers into collections. i was brought on to design the core screens and the information architecture.

the bet02

organize the app around research topics instead of sources like journals or universities. researchers think in questions and fields, not publication venues. the ia is 26 topics, each with subtopics; a gradient on each topic card signals how closely its subtopics relate, without forcing a rigid hierarchy.

information architecture03
TOPICS (26)
├─ neuroscience
│  ├─ cognitive · computational · clinical
├─ climate science
│  ├─ atmospheric · oceanography · modeling
└─ ai & machine learning
   ├─ nlp · computer vision · reinforcement learning

SURFACES
┌──────┬────────┬──────┬───────┐
│ feed │ topics │ labs │ saves │
└──────┴────────┴──────┴───────┘
the surfaces·
  • feed — a personalized stream of papers, labs and collections from followed topics
  • topic explorer — a browsable grid of 26 topics with subtopics
  • lab pages — institutions and labs as primary navigation, not hidden behind search
  • saved collections — a personal library of papers
  • paper detail — save, cite, share
how i used ai04
  1. generate many directionsfigma make, with a "temperature" per screen: 8–10 copy the reference closely, 5 balanced, 1–3 free redesign. start wide, then narrow to the strongest.
  2. scaffold componentsai-assisted code generation for reusable ui components and layouts, treated as a first draft.
  3. work through the iaclaude as a thinking partner for the 26-topic taxonomy: hierarchies, naming, how subtopics group. several approaches were rejected in conversation before any screen was drawn.
  4. refine everything by handevery generated screen imported into figma and refined manually: spacing, hierarchy, type, color. all interactions and transitions built by hand, since figma make does not carry those over.
temperature key·
8–10
copy closely · low creativity, high fidelity
5
balanced · some exploration, still reference-based
1–3
freer redesign · high creativity, open interpretation
key deliverables05
search & discovery temp 8main search · top institutions · top companies / labs · topic detail
shelf + daily digest temp 5–7redesigned shelf · daily digest screens · card view
profile & my saves temp 7–8profile · my saves
figma prototypelive
what i owned06
  • every key design decision: direction, hierarchy, voice
  • the ia: 26 topics with subtopics, icons, gradients, naming, rollup logic
  • manual refinement of every screen
  • all interactions and transitions
reflection07

ai generates options. the designer picks the right one and refines it.

figma make produced around ten directions per screen. i picked the strongest and refined it. the ai scaffolded components; i owned spacing, rhythm and every interaction. the final product is mine, but i got there faster because the ai handled the first draft.

← homepage  //  002 ux + product © 2026 naeema :)