Field notes4 min read

Twenty-four designs, one brand

Instead of one mockup, we built a client 24 complete homepage directions on a single route, each production-grade, and let them flip through live and pick.

The standard design pitch is a mockup. Maybe two. A flat picture of a homepage, exported to a PDF, judged in a conference room. The client is asked to choose the next few years of their brand from a static image that cannot be scrolled, clicked, or felt.

For a healthcare enterprise, we took a different route. We built 24 complete homepage designs for their brand and put every one of them on a single live page. A floating switcher lets the client flip between finished directions in place, on their own screen, at full production quality. Nothing staged, nothing simulated: it is deployed and real, open it on any device.

Finished directions, not comps

Each of the 24 is not a hero image with lorem ipsum under it. It is a complete homepage: navigation, hero, services, care model, pillars, stats, testimonials, accreditations, FAQ, call to action, footer. The theme code runs 28,860 lines, and the largest single direction is 1,772 lines on its own.

The range is deliberate. Twelve distinct archetypes, from restrained editorial and big-type poster to luxe serif, terminal console, photo-cinematic magazine, glassmorphic product page, a hand-built particle sphere, a scripted concierge-conversation demo, and, at the far end, a full sci-fi command HUD imagined decades out. Some directions channel the DNA of famous product sites. Others exist nowhere else.

One brand, held firm

Twenty-four designs could easily become twenty-four brands. The registry that defines the themes carries a written palette contract: every direction builds on neutral light or cool slate-dark bases with the brand's red accent, and off-brand neon is banned outright. The wildest concept and the quietest one are recognizably the same company.

They also share one fact sheet. A single source of truth holds the real statistics, services, testimonials, and accreditations, and every direction draws from it under one rule: restructure and rephrase to suit the style, but never invent a stat, a client, or an accreditation. For a healthcare brand, that rule is not a nicety. It is the line.

Production-grade means production engineering

A page carrying 24 full homepages should be a performance disaster. It is not, because no visitor ever downloads 24 homepages:

  • Every direction is code-split, so the browser fetches only the theme being viewed
  • The picker previews are drawn procedurally from each theme's palette and archetype data, no screenshots, so they can never drift out of sync with the real thing
  • The chosen direction persists locally, and the server always renders a stable default, so nothing flashes or mismatches on load
  • Hero entrances are pure CSS keyframes, engineered so the largest paint never waits on JavaScript

And the hygiene did not relax because this is a demo. All 24 directions honor reduced motion, down to replacing canvas engines with a single static frame. The components carry 592 aria attributes. The site ships a full security header suite, and it is deliberately kept out of search indexes so it never competes with the client's real domain.

Even the switcher is a finished product. It opens as a proper dialog with every concept in a grid, full arrow-key navigation in two dimensions, an on-screen keyboard hint, and a shuffle button for the undecided. Each concept's tile shows a live miniature of the design drawn from its own data. Flipping through 24 directions feels less like reviewing deliverables and more like channel surfing your own brand.

No favorites

Here is the part of the process that matters most: we did not build one real candidate and 23 straw men. There is no imposed gold standard among the directions. Each one had to be the strongest version of its own concept, or it had no business being in the set.

Before the client saw anything, every direction was screenshot-reviewed and scored on its own merits against a strict rubric: dead heroes, palette violations, contrast failures, layout overflow, distinctiveness. Scores ran 84 to 91 out of 100. One direction needed a fix before it shipped. None failed.

Then the decision-maker picks. Not from our shortlist, and not steered toward the one we secretly preferred. From the full set, live, with the freedom to change their mind by pressing an arrow key.

Why this beats a mockup

A mockup asks a client to imagine. A finished direction lets them feel: how the motion carries, how the type reads on a phone, how the brand holds up at its extremes. Choosing between real things is faster, and it produces far more conviction than choosing between pictures of things.

We think of it as pick-your-direction as an architecture: a typed registry, a shared fact sheet, a palette contract, and per-direction code splitting. The client gets certainty before the real build starts. And the build that follows inherits a direction that was never a drawing. It was already real.

case storydesignpitchinghealthcare

Let's talk

Got something worth building?

Whether it's a brand-new site, a rebuild, or a product you can't find off the shelf — let's make it.

Or email hello@spiderdigitalgroup.com · reply within one business day · no pushy sales

Trusted by teams who ship

Belzona Baton RougeAmerica PremierAdvanced Applications SpecialistsPrime CoatSalyers ConstructionPolymer Nation