03 — Prototyping

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.

01From static to system

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.

03Microinteraction library
Confirm
Micro · press
Button press

Soft violet glow expands and recedes.

card
Micro · drag
Card drag

Magnetic snap onto a grid line with cyan flash.

Micro · edge
Edge form

A particle travels the path, lights endpoints.

Micro · expand
Card expand

Subtle paper-fold easing, never bouncy.

Digest sent
Micro · toast
Toast in

Slides from top-right with violet rim light.

search signals…
Micro · focus
Field focus

2px luminous violet border + corner accents.

04Usability findings · n=18
  • P1 ack copy too vague
    P0
    11/18
    Rewrote as "Confirm and notify channel"
    Ack rate 62 → 91%
  • Pulse Map illegible at 13"
    P0
    8/18
    Added zoom-to-fit + minimum node radius
    Mobile usability +44%
  • Digest send order felt arbitrary
    P1
    7/18
    Surfaced ranking weights as a tooltip
    Trust score 3.2 → 4.4 / 5
  • No way to mute a single repo
    P1
    6/18
    Added per-source dampening sliders
    False-positive complaints to zero
  • Onboarding video too long
    P2
    4/18
    Not shipped — video stays at 90s
    Tradeoff for narrative completeness