UX CASE STUDY · CIVIC DESIGN · Designed and built in one day, 2026

A courthouse kiosk that turns ten minutes of plain questions into paper in hand at the clerk's counter.

Answer plain questions at a court self-help kiosk. The navigator screens your fee waiver eligibility against real poverty guidelines, names your claim in both your words and the court's, and prints a three-page packet: cover sheet, waiver information, document checklist. One HTML file, nothing leaves the device.

SPEC · LAN001

Role: Solo Designer & Developer
Timeline: Designed and built in one day, 2026
Stack: Single-file HTML/CSS/JS · print stylesheets · Playwright
Constraint: KIOSK-PRIVATE (NO NETWORK CALLS)

COMPLETE DESIGNS JUDGED BEFORE BUILDINGAFTER vs BEFORE 1→9

MY ROLE002

Solo end to end in a single day: design ritual, three views, verification rig, decision records. The build doubled as the proving run for a new standard: no AXOS build starts coding before the taste loop ratifies its visual world.

Team

Solo, Designer of One

Stakeholders

Self-represented litigants, self-help center staff, court clerks

FIG. 01Designed and built in one day, 2026

PROBLEM → SOLUTION003

The Problem vs. The Solution

Most low-income Americans facing a civil legal problem get no legal help at all. The bottleneck starts at the self-help desk: a stressed visitor, a stack of unfamiliar forms, and a staffer repeating the same twenty minutes of triage all day. The navigator moves that triage onto a kiosk and ends every session with something physical: a packet the visitor hands to the clerk.

BEFORE003.A

The triage desk does not scale

Court self-help centers answer the same three questions all day: do I qualify for a fee waiver, what is my case called, and what do I need to bring. Each answer is verbal, repeated, and forgotten by the parking lot.

P-01

92% get no or not enough helpThe Legal Services Corporation's 2022 Justice Gap Report found that low-income Americans received no or insufficient legal help for 92% of their civil legal problems. Intake capacity is the choke point.

P-02

The vocabulary wallThe court calls it an unlawful detainer. The visitor calls it "I got papers saying I have to move out." Every form assumes the first language; every visitor arrives with the second.

P-03

Verbal triage evaporatesA staffer explains the fee waiver, the claim type, and the document list out loud. By the time the visitor is home, three-quarters of it is gone, and the return trip starts from zero.

AFTER003.B

Ten minutes, three views, one packet

A single-file kiosk app in three connected views. Intake screens eligibility with a benefits shortcut and real poverty-guideline math. Classification turns plain answers into the court's claim name and a deadline warning where hours matter. The packet prints it all as paper the clerk can act on.

S-01

Eligibility in the visitor's own numbersReceiving SNAP, SSI, Medicaid, TANF, or a VA pension short-circuits the whole income screen, three taps to a verdict. Everyone else answers household size and take-home pay, tested against 125% and 200% of the 2025 federal poverty guidelines. Blank income is allowed; the clerk helps estimate.

S-02

Both vocabularies, deadlines flaggedTwelve claim outcomes across housing, family, money, and work, plus an open path for everything else. Each result names the claim in plain words and the court's term, and time-critical claims, eviction answers, debt answers, agency filings, get a bolded warning to ask about the deadline today.

S-03

The packet is the productPrint swaps the frosted UI for a paper stylesheet: a visit summary addressed to the clerk, fee waiver information with the exact screening limits used, and a checklist with pen-tickable boxes. Answers live in memory only; Start Over wipes them. Nothing is ever transmitted.

THE IMPACT004

The Impact

A one-day build, so the numbers are structural facts about what shipped, verifiable by reading the repo, not projections.

Claim outcomes classified

Across housing, family, money, work, plus the open path

The entire portal

0 file

Three views, screening math, and print packet in one HTML file

Sent off the kiosk

0 bytes

Memory-only state; no storage, no network, Start Over wipes

The wide net, measured

Full page designs evaluated before the first line of app code, versus the one-shot default.

KEY DECISIONS005

Key Design Decisions

Three calls that shaped what the navigator is, and the process it proved.

DEC-01

Design ratified before code existed

Nine full pages were designed, screenshotted, and judged across three gated rounds before the first line of app code. The winning world, frosted atmosphere with an anchored glass card, became law for all three views.

Why

One-shot design is exactly how AI-default slop ships. Casting wide and gating on human taste costs an afternoon and buys a product that does not look like everyone else's. The repo history is the design lineage: round 1, round 2, round 3, then the build.

DEC-02

Memory-only state, structurally

Answers never touch localStorage, cookies, or the network. State is a JavaScript object; Start Over reassigns it. The privacy promise on the landing page is enforced by architecture, not policy.

Why

The audience is people describing evictions, debts, and firings on a public kiosk. "Your answers stay on this device" has to be literally true, and provable by reading one file.

DEC-03

Generic on deadlines, specific on limits

The screening math names its exact sources, 125% and 200% of the 2025 federal poverty guidelines, and prints them on the packet. Deadline warnings deliberately stay generic: short, often days, ask the clerk today.

Why

Poverty guidelines are published federal numbers; citing them builds trust. Answer deadlines vary by jurisdiction, and a confidently wrong number on a legal kiosk is worse than an honest pointer to the person who knows.

BEFORE / AFTER006

Round one vs. the shipped world

The frosted direction as it entered the taste loop, and the same layout after the polish gate: weighted entrances, tightened type, a deeper grade, and the detector-enforced removal of every AI tell. Drag the handle to compare.

LIVE PROTOTYPE007

Walk the kiosk yourself

The real build, not a mockup: screen your eligibility, classify a claim, and print the packet. Try the benefits shortcut, then Start Over and take the income path. Everything runs in your browser and nothing you enter goes anywhere.

kashb.ca/navigator/app.html kashb.ca/navigator ↗

THROUGH THE KIOSK008

Through the Kiosk

Live screens from the shipped build, plus the wide net it was chosen from. Every image opens full size.

The benefits question with large tap targets for SNAP, SSI, Medicaid, TANF, and VA pension — FIG. 02The benefits shortcut: any selection skips the income screen entirely. Three taps to a verdict.

An eligibility verdict showing the visitor likely qualifies under the household-of-three limit — FIG. 03The verdict names the actual limit used, $2,776 a month for a household of three, instead of a vague yes.

The eviction classification result with a deadline warning and a four-item court checklist — FIG. 04Classification: plain name up top, the court's term underneath, and a deadline warning where hours matter.

The packet review screen listing cover sheet, fee waiver information, and document checklist — FIG. 05The packet review: three documents, one print button.

The print layout: black-on-white visit summary, fee waiver information, and a checklist with tickable boxes — FIG. 06Print swaps the frosted UI for paper: ruled fact tables, pen-tickable boxes, and lines for the clerk's notes.

The Cream Showroom wide-net variant with giant condensed type on cream paper — FIG. 07From the wide net: Cream Showroom, one of the four directions that lost the first gate.

The Threshold Cinematic wide-net variant with a coral accent over dusk mountains — FIG. 08From the wide net: Threshold Cinematic, calm with one lit path of coral.

The Civic Classical wide-net variant styled like a printed court form with engraved serifs — FIG. 09The wildcard: Civic Classical, the printed court form done with care. The loop requires one unfashionable entry.

DESIGN PROCESS009

Design Process

The design was chosen before the product existed. A five-family wide net, two human gates, then a polish pass, and only then did app code begin inside the ratified world. Every round is one commit, so the repo history reads as the design lineage.

WIDE NET

▸Five full landing pages, five aesthetic families
▸Same product truth in all five: only taste varies
▸One deliberately unfashionable wildcard, per the loop's rule

NARROW

▸Frosted Atmosphere won the first gate
▸Three layouts inside the family, aesthetic held constant
▸The anchored glass card won the second gate

POLISH

▸Weighted entrances, scroll reveals, typographic detail
▸The anti-slop detector flagged its own author's glow shadow
▸Reduced-motion and reduced-transparency fallbacks throughout

BUILD

▸Three views built inside the ratified world, same day
▸Playwright walks every path before every commit
▸Print verified with a real PDF export, not a description

REFLECTION010

The detector caught its own author, twice

The anti-slop pipeline this build proved is only honest if it fires on me. It did. A glacial-blue glow shadow on a hover state in round 3, and a layout-property animation on the intake's progress bar: both mine, both minutes old, both flagged mechanically and fixed before commit. That is the actual lesson of the taste loop. Taste is not a vibe you have; it is a gate you build, and then you stand in front of it with everyone else.

NEXT CASE STUDY

A2J Court Access Portal

▸

Available for Work

Let's build something impactful.

I'm currently open to new opportunities in UX/UI Design, Product Design, and GovTech transformation roles.

Drop me an email Connect on LinkedIn