Synapse is a mobile app for academic researchers. It lets them browse research topics, follow institutions and labs, get personalized paper recommendations, and save papers into collections. I was brought on as a contract UX designer to design the core screens and information architecture.
The Setup
The Bet
My central design decision was to organize the app around research topics instead of sources like journals or universities. Researchers think in terms of questions and fields, not publication venues. I built the information architecture around 26 research topics, each with subtopics. A gradient system on topic cards signals how closely related subtopics are, without forcing a rigid hierarchy.
Information Architecture
SYNAPSE IA ==================== 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 based on the researcher's followed topics.
Topic Explorer
A browsable grid of 26 research topics with subtopics, organized by domain.
Lab Pages
Dedicated pages for research institutions and labs, surfaced as primary navigation items instead of being hidden behind search.
Saved Collections
A personal library where researchers save and organize papers into custom collections.
Paper Detail
The full view for a single paper, with options to save, cite, and share it.
Mobile Wireframes
Feed
Topics
Topic Detail
Daily Digest
Profile
How I Used AI
1
Generate many directions with AI
I used Figma Make (an AI design tool) to generate multiple UX directions at different creativity levels. I set a "temperature" for each: 8-10 means copy the reference closely, 5 means balanced exploration, 1-3 means freer redesign. I deliberately started wide to see what was possible, then narrowed down to the best direction.
2
Scaffold components with AI
I used AI-assisted code generation to quickly scaffold reusable UI components and layouts. I treated the output as a starting point that I then refined by hand.
3
Work through the IA with AI
I used Claude as a thinking partner to work through the 26-topic taxonomy. We tested different hierarchies, naming conventions, and how subtopics should group together. Several approaches were rejected in conversation before I spent any time making them into screens.
4
Refine everything by hand in Figma
I imported every AI-generated screen into standard Figma and manually refined spacing, hierarchy, and visual detail. I added all interactions and transitions 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 Deliverables
Search & Discovery
Temp = 8- Main Search
- Top Institutions
- Top Companies / Labs
- Topic Detail
Shelf + Daily Digest
Temp = 5-7- Redesigned Shelf
- Daily Digest Screens
- Card View
Profile & My Saves
Temp = 7-8- Profile
- My Saves
Figma Prototype
What I Owned
- All key design decisions - which direction, which hierarchy, which voice
- The IA - 26 topics with subtopics, icons, gradients, naming, rollup logic
- Manual refinement of every screen - spacing, hierarchy, type, colour, detail
- All interactions and transitions - built in Figma after AI screens were imported
Design Decisions
Organize by topic, not source
Researchers think in terms of research questions and fields. I organized the app around topics instead of journals or universities.
Use gradients for subtopic relatedness
Instead of rigid category boundaries, the gradient on each topic card shows how closely subtopics relate. This keeps the taxonomy flexible.
AI generates options, I choose the direction
Figma Make produced many design directions. My job was to evaluate them, pick the strongest one, and refine it into a polished design.
Reflection
AI generates options. The designer picks the right one and refines it.
This project was a clear example of how AI fits into a design workflow. Figma Make generated around ten directions for each screen. I picked the strongest one and refined it. The AI scaffolded the components. I owned the spacing, visual rhythm, and every interaction. The final product is mine, but I got there faster because the AI handled the first draft.