Independent HCI research, 2025 to 2026, live platform

everydayservices.studyvA2 assigned at runtime

Users finish everyday tasks they still cannot explain. I built the platform that measures why.

The Everyday Services Study is a between subjects experiment across banking, healthcare, and government flows. It tests whether interface language register changes cognitive distance: the gap between task completion and user comprehension. This case study covers the engineering: Next.js, Supabase, trilingual i18n, balanced assignment, CDI scoring, and prototype versioning from vA1 to vA2 after pilot data.

Role

Design engineer and ownerApp, API, schema, panel, deploy

Stack

Next.js 16, SupabaseTypeScript, Vercel, Turbopack

Locales

EN, ES, PT-BRSeparate copy namespaces per lane

Routes

9 interactive + 9 walkthrough/{module}/{a1|a2|b}

  • 3

    Simulated services

    Banking transfer, medical booking, license renewal

  • ≈1:38

    Pilot CDI ratio

    Clear vs institutional in friends and family sample

  • 5

    Pre registered hypotheses

    Directional tests on CDI and comprehension

01. Research context

Cognitive distance names a gap completion metrics miss

People send money, book doctors, and renew licenses online every day. Most finish without errors. Many leave unsure whether the payment left, who will call them, or when a document arrives. Usability research measures time on task, completion rate, and errors. None of those answer: did the user understand what just happened?

Cognitive load describes effort and capacity limits. Cognitive distance describes alignment: whether someone can explain, predict, and transfer the system's logic into their own reasoning. A user who completes in three taps but cannot say if money has left was not overloaded. They were not informed.

The Everyday Services Study operationalises that gap. I designed the construct, built the Cognitive Distance Index (CDI), pre registered five hypotheses, and shipped a live international platform at everydayservices.study. The conceptual paper is under peer review. This page documents the engineering behind the instrument.

02. The experiment

Three services, two registers, one isolated variable

The design is deliberately austere. Interface language register is the only variable that moves. Every click, field, and outcome stays identical across arms. If participants diverge on effort or completion time, the manipulation failed.

Between subjects. Each participant sees one register across all three modules. Version A (vA2 today) uses plain language that names who acts next and when. Version B uses institutional copy matching real bank and government services. Module order is balanced across six rotations of banking, medical, and license renewal.

What participants do. They complete three simulated tasks: send a bank transfer, book a specialist appointment, pay and mail a license renewal. After each module they answer prediction questions while the result screen stays visible, write open explanations, and rate ease, effort, understanding, and certainty. Session length is about fifteen minutes.

What the platform measures. CDI scores open explanations against a rubric. Five pre registered hypotheses test whether institutional register raises CDI, widens confidence miscalibration, and shifts which service participants name as most uncertain. Manipulation checks flag arm leakage in real time on the researcher panel.

Version A (vA2)

Plain language. Names the next actor, timeline, and outcome in words a participant can repeat back.

Version B

Institutional register. Same UI chrome and flow. Copy matches the opacity of real public and financial services.

Locales

EN, ES, and PT-BR. Shell and structure identical across arms so translation never becomes a hidden variable.

Banking transfer result screen in plain language English on mobile

Banking result, Version A. Plain language names who receives funds and when.

Medical appointment booked result screen with plain language next steps

Medical result, Version A. The screen states who will contact the patient and when.

03. Engineering constraint

The manipulation must be airtight

Research validity depends on isolation. If Version A and Version B differ in layout, timing, or affordances, the data is noise. The engineering job is to make language the only moving part while the participant experience still feels like a real service.

The codebase shares one component tree per module. Copy lives in isolated i18n namespaces per lane (bankingA2, bankingB, and equivalents for medical and license). Silent server side assignment balances arms without participant cookies. Events, answers, and open text stream to Supabase for CDI scoring and hypothesis charts.

04. Pilot data

The construct worked. The first copy pass did not.

A friends and family pilot ran on vA1 clear language against vB institutional copy. Cognitive Distance Index separated the arms sharply: roughly 1 on clear language versus roughly 38 on institutional copy in the pilot sample. The manipulation did what the theory predicted.

Task time told a different story. vA1 clear language was slower than vB. For a study grounded in cognitive load theory, that is the wrong direction. Clear copy should not cost more time if the only change is register. The pilot surfaced a copy and interaction problem, not a platform problem.

The engineering response was deliberate iteration, not a rewrite. Archive vA1 strings under lib/i18n/archive/a1/. Add prototype_version on participants. Route /banking/a2 alongside a1 and b. Point new assignments at vA2. Keep vB unchanged as the control arm. Preserve vA1 rows in the panel for comparison.

CDI separation

Pilot ratio near 1:38 between clear and institutional arms. Strong signal that the instrument detects register, not task difficulty alone.

Task time inversion

vA1 slower than vB on module completion. Triggered microcopy pass, static stepper, and removal of dwell animation on vA2.

Versioning in place

Nine interactive routes and nine walkthrough routes from one repo. New participants never see vA1 unless assigned for comparison.

Study welcome screen with consent summary and language selector

Welcome funnel: locale detection before consent, layered consent summary, no storage until Agree and start.

05. Architecture

Assignment, sync, and scoring in production

Participants never see their arm. A POST to /api/experiment/assign reads live counts from module_runs, picks the underrepresented variant and module order, and writes variant, order, and prototype_version atomically. Events stream to Supabase as the participant moves. Answers and open text feed comprehension scoring on the panel.

Silent balanced assignment

Counts per module and variant drive assignment. No cookies, no client side randomisation. The server is the source of truth for balance.

Supabase schema with migrations

Participants, events, answers, module_runs, pilot_links, prototype_archives. Idempotent SQL migrations. Health route verifies consent columns and DB reachability on deploy.

Trilingual copy namespaces

bankingA2, bankingA1, bankingB (and medical, license) as separate i18n exports. Shell chrome shared. Manipulation copy isolated per lane.

Panel analytics

Passcode session, CDI gauge, H1 to H5 views, manipulation checks, blind scoring queue, CSV export, prototype filter for A1 vs A2.

Multi domain Vercel deploy

everydayservices.study plus panel subdomain and alternate TLDs. Middleware rewrites panel hosts. NEXT_PUBLIC_SITE_URL keeps recruitment links canonical.

Walkthrough mode

Non interactive replays for all nine module and lane pairs. Same components as the live study for IRB walkthroughs without touching assignment state.

06. Data layer

Tables, events, and prototype lineage

The research dataset stores no PII. Participants get a random identifier. Consent timestamps and locale sit on the row. Every screen transition is an event with module, step, and timing metadata. Post task scales and open explanations land in answers with typed question keys so panel charts do not parse free text twice.

prototype_version is the lineage key. Pilot vA1 rows stay queryable. vA2 rows accumulate for open recruitment. Cloud archive snapshots preserve A1 pilot exports without mixing cohorts in live dashboards.

Core tables

  • participants: variant, module order, locale, consent, prototype_version
  • module_runs: per module timing, completion, assignment balance input
  • events: funnel and step telemetry
  • answers: scales, predictions, explanations, manipulation checks
  • open_scores: blind comprehension coding queue

07. Participant engineering

Mobile first funnel participants trust

Most participants arrive on a phone. The welcome funnel detects locale before consent, shows a layered privacy summary, and writes nothing to storage until Agree and start. The question dock keeps the result screen visible while prediction and explanation questions slide up from the bottom. Primary actions stay fixed outside the scroll area so the sheet never hides the commit button.

Mobile banking flow with prediction question overlaying the review screen

Prediction question on mobile. Review screen stays visible while participants answer.

Bottom sheet up to 55vh. Background never reflows when the sheet opens.

Mobile welcome screen with consent card and sticky agree button

Mobile welcome. Calm eConsent language, single elevated session card.

Consent and privacy engineering

Trilingual privacy notice. GDPR and LGPD aligned rights copy. Researcher panel behind httpOnly session cookie. Participants stay anonymous in the dataset.

Question dock pattern

Post task questions overlay the flow without navigation. Preserves context for prediction items. Reduces false completions from users who forgot what they just did.

Manipulation checks

Ease, effort, understanding, and certainty scales after each module. Panel flags arm pairs that diverge on effort, which would invalidate the language only claim.

Walkthrough parity

Walkthrough routes render the same components without POST side effects. Training, IRB review, and QA share one code path with live assignment.

Desktop banking transfer result with vertical status stepper

Desktop banking result on vA2. Vertical sub stepper tracks payment lifecycle in plain language.

08. Researcher panel

Analytics that stay honest about inference

The panel is where comprehension becomes a number. CDI aggregates open explanations against a rubric. Hypothesis views chart directional comparisons with thresholds printed inline. Every verdict is descriptive until the manuscript claims otherwise. Export is one click for researchers who want their own models.

The A1 vs A2 filter is the iteration dashboard. It answers whether vA2 fixed task time while holding the CDI gap. That is the question the pilot raised, and the platform was built to answer it without a redeploy.

Post task scale question about mental effort on a 1 to 7 scale

Post task scales captured after each module. Manipulation checks surface arm leakage before it pollutes CDI.

09. Prototype versioning

vA1, vA2, and vB from one tree

Dynamic segments [version] generate static params for a1, a2, and b. Legacy /banking/a aliases resolve to the active clear language lane (vA2). Flow components accept clearPrototype so researcher previews and participant assignment use the same UI code paths.

Versioning is a data and i18n problem, not a fork. The next copy pass is a namespace diff plus a migration default on assignment. vB stays frozen. vA1 stays archived for comparison. vA2 is what new participants see today.

10. Stack

What runs in production

Next.js 16 App Router, React 19, Tailwind CSS 4, TypeScript throughout. Supabase Postgres with Row Level Security. Vercel deployment with /api/health check. No participant cookies. httpOnly session cookie for researcher access only.

Production stack

  • Application: Next.js 16, React 19, TypeScript, Tailwind 4
  • Data: Supabase Postgres, typed tables, Row Level Security
  • Auth: httpOnly session cookie for panel, anonymous key for participant funnel
  • Infra: Vercel, health check, environment scoped secrets
  • i18n: per lane namespaces, archived A1 strings, shared shell chrome

Outcome

Instrument live, iteration cheap

The research question needs a platform that isolates language as the only moving variable. Owning the stack means copy can iterate at the speed of insight. vA2 is live. vB is unchanged. vA1 is preserved. The panel reports whether the iteration fixed task time while the CDI gap holds.

This is design engineering in service of evidence: a study participants trust, a dataset reviewers can audit, and a versioning model that treats wording as deployable infrastructure.

Ship the instrument. Let the data argue with your first copy pass. Version in place. Keep the control arm frozen.

Open recruitment on vA2. Manuscript under peer review. Platform extensible to automation and AI mediated flows.

Within this project

More from the Everyday Services Study