UX CASE STUDY · META · 2026

Every case study on this site was rebuilt in about 15 minutes each, by a tool built for the job.

A single-file wizard that turns a case study into structured data and exports a drop-in portfolio page. It replaced hand-editing an 855-line HTML template, and every study you can read on this site, including this one, came out of it.

SPEC · MCSB001

Role: Designer & Developer
Timeline: 2026
Stack: HTML · CSS · JavaScript · Node.js · Claude
Constraint: ONE FILE, NO BACKEND

LINES EDITED BY HANDAFTER vs BEFORE 855→0

MY ROLE002

I built this for an audience of one: me, with a portfolio to rebuild and no appetite for editing 855 lines of HTML six more times. It became the design system for the whole site.

Team

Solo, with Claude as pair

Stakeholders

Recruiters, hiring managers, future me

FIG. 012026

PROBLEM → SOLUTION003

The Problem vs. The Solution

Portfolio case studies lived as hand-edited copies of one 855-line HTML template. Every edit was a chance to break something, every study drifted from the others, and the content was trapped inside the markup.

BEFORE003.A

One template, hand-edited forever

The production template was strong content design wrapped in a terrible authoring workflow.

P-01

855 lines per study, by handPublishing a case study meant duplicating the template and hand-editing section markers through 855 lines of markup.

P-02

Every study driftedEach hand-edited copy diverged a little: a stray color here, a missing focus ring there. Consistency depended entirely on discipline.

P-03

Content trapped in markupThe writing lived inside HTML. Re-editing a study meant re-finding it in the code, and a site-wide redesign meant touching every page.

AFTER003.B

Content becomes data, the preview is the page

A guided wizard on one side, the actual export document rendering live on the other. Fill the fields, watch the page, download the file, drop it on the site.

S-01

Schema-driven wizardEvery slot in a case study is a field: headline, decisions with their why, stats, galleries, workflows. JSON in, JSON out, autosaved as you type.

S-02

A component arsenalWorkflow node maps with a guided tour, a before/after slider, a savings odometer, drawn slope charts, tabbed evolution galleries with a lightbox, and a light/dark theme.

S-03

Drop-in export, batch rebuildThe export is a complete portfolio page. A headless script rebuilds every study from its JSON in one command, so a design change ships to the whole site at once.

THE IMPACT004

The Impact

Measured against the workflow this replaced: hand-editing the production template for every study on the site.

Case studies regenerated

Plus a full user-flow comparison page

Per study, folder to page

~0 min

The PRD bar, met in practice during the rebuild

Hand-edited lines after export

The export is the shipped page

NOBODY EDITS THESE BY HAND ANYMORE004.B

0LINES

The old template was one 855-line file with section markers. The wizard turned every marker into a field.

Hand-edited markup per case study

Lines of HTML touched by hand to publish one study. The template era vs. the builder era.

KEY DECISIONS005

Key Design Decisions

Three calls that made it a tool instead of a demo, each anchored to a real constraint.

DEC-01

The preview is the export document

The live preview pane renders the exact HTML the export button downloads. Same generator function, same output, no preview-vs-production gap.

Why

Preview drift is how authoring tools lose trust. If what you see can differ from what ships, you end up checking both forever. One code path makes drift impossible.

DEC-02

JSON schema, not a CMS

Studies live as plain JSON files in a git repo. No database, no backend, no accounts. The builder itself is one HTML file that works offline.

Why

A CMS is a service you maintain; a JSON file is content you own. Git gives history and review for free, and a single-file tool can never rot behind a dependency update.

DEC-03

AI drafting without API keys

An AI Brief button copies a prompt plus the exact schema to the clipboard. Claude drafts the study as JSON on my existing plan, and Load JSON pulls it in.

Why

A static page with an embedded API key is a security hole with a billing problem. The clipboard route costs nothing, leaks nothing, and uses the subscription I already have.

OLD vs NEW WORKFLOW006

Publishing a Case Study, Both Ways

The same job, before and after the builder. The old side is also where every edit nudged the design a little further off course.

OLD WORKFLOW · HOURS PER STUDY006.A

01Duplicate the 855-line template file
02Hunt down each section marker in the markup
03Paste the writing into the right tags
04Hand-swap every image path and caption
05Fix whatever the edits broke
06Eyeball the page against the other studies
07Spot a difference, edit again, drift further

NEW WORKFLOW · ~15 MIN PER STUDY006.B

01Fill the wizard or load the study's JSON
02Watch the live preview, which is the export
03Export the page and drop it on the site

7 STEPS → 3 STEPS · −57% · HOURS PER STUDY → ~15 MIN PER STUDY

BEFORE / AFTER007

One night vs. one tool

The first version was an overnight agent build: a four-step form with an empty preview pane, proof that the wizard workflow could work. Four days later it had become an instrument. Drag the handle to compare.

LIVE PROTOTYPE008

Use the builder yourself

The real tool, running live with this study's own JSON loaded. Walk the wizard, drag sections in the page map, open preflight, and watch the export preview react. What you are reading came out of what you are holding.

kashb.ca/builder/?load=examples/case-study-builder.json kashb.ca/builder ↗

Start a blank study → →

INSIDE THE INSTRUMENT009

Inside the instrument

The builder chrome is a design HUD: every panel exists to answer a question about the page before it ships.

Compare mode: the live preview on the left, a pinned earlier version on the right — FIG. 02Compare pins a version beside the live preview, so a layout experiment is judged against the page it replaces, not memory.

The Layout Lab step with hero layout, impact order, and decisions style variants — FIG. 03The Layout Lab: per-section variants for hero layout, impact order, and decisions style, swapped live on the real page.

The Motion Desk step with intensity, entrance style, and stagger controls — FIG. 04The Motion Desk tunes entrance choreography and stagger; Off mirrors exactly what prefers-reduced-motion visitors get.

The preflight console open beside the preview, listing warnings, passing checks, and readouts — FIG. 05Preflight is the QA instrument: headline and meta length, image loads, word count and read time, checked before every export.

The preview pane in mobile viewport mode — FIG. 06The preview swaps to a mobile viewport with one press. The export is the page, so the check is the real thing.

DESIGN PROCESS010

Design Process

It started as an overnight build by my own agent pipeline, went through a head-to-head against the production template, and came out the other side as the site's design system.

DISCOVER

▸An overnight agent build proved the wizard workflow
▸Head-to-head comparison against the production template
▸Verdict: template won content design, wizard won authoring

DEFINE

▸PRD bar: a full case study in about 15 minutes
▸Export must be a drop-in page, zero hand-editing after
▸Work is never lost: autosave plus JSON round-trip

DESIGN

▸Glass design system drawn from my agent dashboard concepts
▸Type unified with the site: Inter and JetBrains Mono only
▸Light and dark themes from one variable set

DELIVER

▸Headless build script batch-exports every study
▸Six case studies and a user-flow page regenerated
▸Shipped as the live kashb.ca redesign

REFLECTION011

The best design system is the one that enforces itself

I spent years keeping case studies consistent by being careful. The builder made carefulness unnecessary: the design system lives in one generator function, so consistency is a property of the tool, not a habit I have to maintain. The other lesson was watching my own content become data. The moment a study was JSON instead of markup, redesigning the whole site stopped being a rewrite and became a rebuild command. This page came out of the tool it describes.

NEXT CASE STUDY

AXOS Agent OS

▸

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