HearAdvisor
A blind hearing test widget built with Next.js and React that allows users to compare hearing aids through MUSHRA testing, with progressive refinement and Klaviyo email integration
A blind hearing test widget built at N4 Studio for HearAdvisor. Uses MUSHRA (MUltiple Stimuli with Hidden Reference and Anchor) testing methodology to enable users to compare hearing aids without knowing which product they're listening to.
Blind Testing System
Users complete multiple test scenes across different audio scenarios (quiet room, noise, streamed music). They rate each sample without knowing which hearing aid it is, with the current product serving as the base comparison point. Users can progressively refine their preferences through additional rounds of testing.
Progressive Refinement
Users complete 3 scenes per round, then view results. They can complete unlimited rounds (3, 6, 9+ scenes) to progressively refine their preferences. Results accumulate across rounds, with the system identifying the best hearing aid match based on cumulative ratings.
Technical Stack
Built with Next.js 15, React 19, and TypeScript. Uses React Context API for state management across multiple rounds. Audio playback handled by React Howler with CloudFront CDN delivery. Supabase (PostgreSQL) stores all test data with Drizzle ORM for type-safe queries.
Webflow Integration
Widget is iframed directly into HearAdvisor's Webflow pages, automatically detecting the current product slug. Appears native within the existing site design without conflicts.
Klaviyo Integration
Results are automatically emailed via Klaviyo Events API. Users enter automated marketing sequences based on their test results, with test data flowing into HearAdvisor's CRM for follow-up and support.
