"Synaptic Drift"
A digital hi-fi prototype envisioning the inside world of an artificial intelligence's memory as an experience that involves browsing, examining, and interacting with the memory in question. Through a series of interconnected screens, including Memory Log, Timeline, and Artificial Intelligence Personality Development Dashboard, one learns about the journey of a fictional AI from logging emotional responses to monitoring changing attitudes such as trust and affection to dealing with distorted and redacted memories which the AI finds impossible to retrieve. This prototype is as much an example of user interface design as it is a case study of personality development.
Project Links
Poke at the Figma mockup, or dig into the code — the repo's README links straight to the live build.
The Concept
Imagine you had the ability to peel back the layers of an artificial intelligence and actually examine its memories like those contained in a personal diary. Synaptic Drift explores such a concept, using the hypothetical interface of a fictional artificial intelligence as the narrative for each individual memory logged into the "Session 04 · Drift Active" system. Each memory is accompanied by a corresponding emotion, confidence rating, and sometimes even damage. While some entries may be free of blemish, others can be redacted, corrupted, or even partially recovered.
The goal was to design an interface that carries genuine narrative weight — where the data visualization isn't decoration, it's characterization.
Three Connected Views
The prototype is built around three interlocking screens, each a different lens on the same emotional record:
Each perspective remains in step; when you open a journal entry, the personality chart shows what effect the memory had on the AI’s emotions. Mouse over a timeline marker and the corrupt ones will warn you before you have a chance to read them.
How It Came Together
-
01
Concept & Narrative Wrote the AI's voice first — the log entries, the redacted memories, the emotional arc — so the interface had something real to hold
-
02
Information Architecture Structured the three views (Memory Log, Timeline, AI Evolution) and how state flows between them
-
03
Hi-Fi Design in Figma Built the full visual language and interaction flow as a hi-fi mockup — type, color, the monospace/display pairing, the data viz
-
04
Coded Build Translated the Figma mockup into a working HTML/CSS/JS interface with a custom dark-themed design system and live, synced state
-
05
Ship & Deploy Pushed to GitHub and deployed live on Netlify — a fully interactive build anyone can open and explore
Outcome & Takeaways
The Synaptic Drift project was designed and delivered in its interactive form, going from concept, through the hi-fi Figma prototype to the final coded project. This shows that data visualization and UI design can actually tell stories because the trust meters, the broken logs, and the trajectory graph all belong to a character.
The toughest and most gratifying challenge has been restraint. An interface that deals with a delicate, partially corrupt mind risks spiraling into chaos. Finding ways to make it atmospheric yet coherent — immersive, but not chaotic — is what I'm most proud of accomplishing, and something that informs all future designs I undertake.
