From static frames to a moving system.
Once the wireframes held up, every interaction had to be felt before it was shipped. Four high-fidelity prototypes and six microinteractions — each tested against the n=18 cohort.
A wireframe lies. It tells you something works because the user understands the layout — not because the experience holds together under their thumb. Every Helix surface had to survive a five-minute task before it earned a place in the system.
I prototyped in Figma for layout, then re-built each surface in Framer + Lottie + a hand-rolled state machine to prove the motion model. The microinteractions in section three were the load-bearing ones — they're what made the system feel alive instead of computed.
Onboarding
Pulse Map zoom
Risk Lens triage
Async Digest send
Soft violet glow expands and recedes.
Magnetic snap onto a grid line with cyan flash.
A particle travels the path, lights endpoints.
Subtle paper-fold easing, never bouncy.
Slides from top-right with violet rim light.
2px luminous violet border + corner accents.
- P1 ack copy too vagueP011/18Rewrote as "Confirm and notify channel"Ack rate 62 → 91%
- Pulse Map illegible at 13"P08/18Added zoom-to-fit + minimum node radiusMobile usability +44%
- Digest send order felt arbitraryP17/18Surfaced ranking weights as a tooltipTrust score 3.2 → 4.4 / 5
- No way to mute a single repoP16/18Added per-source dampening slidersFalse-positive complaints to zero
- Onboarding video too longP24/18Not shipped — video stays at 90sTradeoff for narrative completeness