A knowledge network you can walk through
FAST is Futurity Analysis & Synthesis Tools, the research and foresight platform at the center of everything Futurity Systems ships. Underneath sits a knowledge network: subjects connected to the organizations, press, patents, papers and books that mention them. On top sit labs, collaborative workspaces where innovation teams plan goals, gather subjects, and run analysis and invention tools against the data. I owned the frontend end to end, around 350 TypeScript components, and led the UX and UI of the whole product.
Lead Frontend Engineer and Lead UX/UI Designer. Every screen went through my hands twice, once as a design problem and once as a React build. That double pass is the method: interaction ideas survived only if they could ship, and engineering decisions were made with the design intent in the room. Where the interface needed contracts that did not exist yet, I reached into the FastAPI backend and contributed them.
- ROLE
- Lead Frontend Engineer & Lead UX/UI Designer
- YEAR
- 2025–2026
- STACK
- React, TypeScript, Chakra UI, Cosmograph, React Flow, D3
- CONTEXT
- Futurity Systems
The subject page is a portal
One page pattern carries the product: the live graph underneath, glass identity above, analytics below. Three decisions made it work.
Every subject in the network has a page, and the page is built in layers. The ground layer is the network itself: a GPU-accelerated graph of everything connected to the subject, each entity type in its own color. Glass cards float above it carrying the subject’s identity and its three strategic indices. Below come the analytics: activity trends across decades, forecasts per source type, related subjects and related analyses. Each section loads independently, so a slow chart never holds the page hostage.
The move that makes it a portal is traversal. Click any node and the camera glides to it and an info card identifies it. If the node is another subject, a button appears: go to that subject. One tap and you are standing on its page, inside its own graph. Navigation is not a menu, it is walking the network one camera position at a time.
Traversal, not search
Click a node and the camera glides to it. If it is a subject, one button walks you onto its page and into its own graph. Moving between pages is moving through the network.
Honest waiting
Index math takes time. The page polls with backoff and says so in plain words, from Calculating to Attempt 9 of 10. Every section loads alone; nothing holds the page hostage.
Overview to detail in one click
Stat cards are also navigation. Click Patents and the page scrolls to the forecast chart with the patent series already selected.
One pattern, five more citizens
Subjects are not the only citizens with pages. Organizations, patents, press, papers and books each get one too, built from a single shared snapshot pattern: the same layered grammar and the same color system, configured per entity type. Learn to read one page and you can read the entire network. That sameness was a design decision, not a shortcut.
Tabs that read like a sentence
Plan, gather, analyze, forecast, invent. The first two shipped deep; the rest land on the same foundation.
Strategy becomes structured goals. A stepped wizard asks who is affected, how many people, in which regions, what problems, and what impact by which horizon year.
A board where subjects found through web and curated-source searches get dragged into categories. Every action optimistic, undoable, and silently synced.
Analysis tools that read the gathered corpus, horizon charts and cross-subject comparison among them.
Per-source-type projections of network activity, showing where each signal in the corpus is heading.
LLM-driven invention tools that generate and structure new concepts from everything the lab gathered.
THE PRODUCT'S REAL TAB ORDER — IT READS LIKE A SENTENCE.
Labs are where teams act on the network, and the tabs read like a sentence: plan, gather, analyze, forecast, invent. Plan turns strategy into structured goals through a stepped wizard that asks who is affected, how many people, in which regions, what problems, and what impact by which horizon year. Gather is a board where subjects found through web and curated-source searches get dragged into categories, with every action optimistic, undoable, and silently synced so teammates never collide. The later tabs land on the same foundation, each tool drawing on the corpus the team gathered.
Optimistic, with an undo
Board actions apply instantly, sync silently in the background, and every destructive act gets an eight second undo. Fast and forgiving, not fast and fragile.
Wizards for hard questions
A goal is demographics, regions, problems, impact and horizon year. A stepped builder asks one thing at a time and previews everything before commit.
One token system under everything
All of it stands on one Chakra-based token system. Semantic tokens for the three indices, one source-type palette shared by the graph, the stat cards and every chart, dark and light modes throughout, and a consistent feedback grammar: toasts with undo, per-section skeletons, and status copy that admits when a computation is slow instead of spinning forever.
Companion tooling: browser extension
Research happens in the browser, but research platforms live in another tab. I designed and built a companion extension that closes the gap: it extracts structured content from the page a researcher is reading and files it into the FAST knowledgebase in one action. Clean extraction, sensible defaults, no context switch. Small surface, used constantly. The kind of tooling that compounds.
The product that demos itself
FAST also had to sell itself. I built a public demo explorer and the pitch deck that hands off to it: the deck captures a visitor's industry, passes it along in the URL, and the demo quietly floats matching content to the top. No login, no form, no visible personalization. The pitch and the product are one system.
FAST is in production with client innovation teams. For my own practice it is the project where the patterns I now use everywhere hardened: progressive disclosure for dense data, semantic visual encoding, optimistic interfaces that can apologize, and navigation treated as a spatial experience rather than a sitemap.
THE PAGE IS A PLACE IN THE GRAPH.
NEXT ▸ campus_ai
research on how people actually learn with AI