Clarity Engine

Component Prototypes

Interactive prototypes for individual components and systems. Each is self-contained. Build and test independently, then integrate into the product.

Information Architecture
IA

Progressive Reveal: Three Panel IA

Interactive walkthrough of the conversation-centered layout. Three states: Entry (chat only), Property found (chat + about you), Scenarios (full three panel). Click through to see the interface grow with the conversation.

Built 3 states Keyboard nav (1, 2, 3)
Deliverable #8 + #9: Education + Magical Moments
Deliverable #8

Education System

4 core concepts (amortization, compound interest, break-even, trade-offs). Each with 2 explanation approaches. Magical Moment fallback transitions from complex to simplified.

Built 4 concepts Interactive transitions
Component C2

5 Magical Moments

Emotional interventions triggered by the Advisor. De-shame, Reframe, Ground, Transparency, Permission. Each with trigger signals, conversation context, and intervention card.

Built 5 moments Conversation simulation
Core Product Surface
Component D1 + D2

Scenario Cards + Sliders

3 named paths (Freedom, Fast Track, Growth). Click to select, drag sliders to see every metric respond in real time. Rate, term, loan amount, home value, cash-out.

Built 3 cards 5 sliders Real-time math
Generative UI
JSON Render

Component Catalog + Conversation Shell

Portable React prototype showing every JSON-rendered block in one place, plus the matching conversation shell that composes them. Opens directly to the catalog view.

Built Catalog + chat JSON spec driven