FICTIONAL BUSINESS DEMO / CONTROLLED DESIGN COMPARISON
Kowalski
Refresh.
Same business.
A different first impression.
A fictional plumbing business, two complete presentations, and shared content that keeps the comparison honest.
One business.
One set of details.
Different view.
Content stays shared.
The hierarchy changes.
- My contribution
- Design, development
& deployment
- Context
- Demo · Fictional plumbing business
July 2026 account
- Built with
- React · TypeScript · Vite
Tailwind CSS · Static Worker
01 / THE BUILDOne business, built twice
Kowalski Plumbing & Heating is a fictional business. I built it two complete websites: one deliberately dated, the other a responsive refresh. Visitors can open either version or return to the comparison.
That setup gives the project a specific job. Instead of describing what a refresh might change, it lets someone inspect two treatments of the same business. The services and business details come from one shared data module, so a new layout does not quietly get a better story to tell.
The “before” is a constructed demonstration. It is not a former client's website, and the comparison does not represent measured business results.
02 / THE BUILDKeep the content. Change the presentation.
The dated version uses small text, dense copy, a table-like layout and no responsive behavior. The refreshed version changes the presentation and the route toward an action, not the underlying business.
Try the miniature comparison below. Edit the shared service summary, then switch between the two treatments. It illustrates the idea with new, deliberately simplified markup—not captured screens of the original build.
CONTROL THE COMPARISON
Same words. Different hierarchy.
Change the service summary once. Both miniatures receive the same literal text.
Kowalski
Plumbing & Heating
Plumbing and heating help for homes in the local area.
Kowalski
Plumbing & Heating
Plumbing and heating help for homes in the local area.
Both treatments use one shared sample summary.
Read the explanation without interacting
The two original presentations share a business-data module. The dated treatment changes density and hierarchy, not the services or business identity. These small new layouts demonstrate that principle without reproducing the complete original screens. They intentionally remain readable on mobile.
The original demo contains complete old and new sites. This figure shows only a small part of that contrast, with both sides kept readable at phone widths.
03 / THE BUILDA useful destination for each version
The application recognizes #/old and #old as the dated view, and #/new and #new as the refresh. Other hash values select the comparison. Each view can therefore be pointed to directly instead of requiring a visitor to find the right tab first.
The documented version uses React 19, TypeScript, Vite and Tailwind CSS v4, deployed as static assets on a Cloudflare Worker. This project does not need a backend to show two presentations of the same supplied content.
04 / THE BUILDWhat the comparison can show
You can inspect text hierarchy, spacing, the prominence of an action, and how a layout responds to a smaller screen. You can also explore both versions rather than judge a pair of hand-picked screenshots.
Those are things the build makes visible. It does not establish that one version brought in more customers, passed an accessibility audit or achieved a particular performance score. Those measurements were not part of the original write-up.
05 / THE BUILDThe next comparison should be measured
The original article identifies two useful additions: a scroll-synchronized side-by-side view and a Lighthouse before/after panel. Neither is being presented here as part of the delivered original.
The main value of this demo is more immediate: it gives a website-refresh conversation something concrete to point at. The deeper article shows the shared data and routing code that make the comparison work.
Source, dates, and what this page verifies
This rewrite describes the supplied fictional-business project and its article published July 17, 2026. The original publication date and canonical source address are preserved. The original application and current deployment have not been audited.
New miniatures are explicitly illustrative, not screenshots or full reproductions. All teaching inputs stay in memory. No booking tool, enquiry service, message provider or outside page is loaded by an interaction. Original code excerpts remain unchanged and are displayed rather than executed as application code.
The named source limits and exact explanation of each new model are recorded in docs/batch-4/SOURCE-REVIEW.md. No business, medical, conversion or performance outcome was measured for these demos.