Skip to content

( By / Independent Practice / Freelance UI/UX Designer / 2026 / 9 min read )

BLUE LLC

Delivered the redesigned site through an AI-based workflow as a solo engagement, deployed on Vercel with the live page plus three self-contained versioned design routes, each under its own token file

The result and the decision behind it

( What it did )

Delivered the redesigned site through an AI-based workflow as a solo engagement, deployed on Vercel with the live page plus three self-contained versioned design routes, each under its own token file

( The decision behind it )

Ink on paper, against the category

Every competitor looks the same, and this audience hires judgement. A printed-page discipline signals an old-money confidence no template can, and the bans are what keep it disciplined: the direction only works if nothing on the page contradicts the medium.

Generated schematic standing in for imagery of BLUE LLC. It depicts nothing.
Generated schematic, not a screenshot of BLUE LLC.

Generated schematic, not a screenshot. Real imagery to follow.

( The account )

Context

BLUE LLC is an M&A advisory firm working in TransTech, transportation, logistics and supply chain, representing both the operators being sold and the private equity firms and strategic acquirers buying them. Its site has exactly one job: convince a qualified prospect, a founder considering selling the business they built, or an acquirer with capital to deploy, to book a confidential consultation.

The engagement was a redesign of bluellc.io, run through an AI-based workflow: research, art direction, design and build as one continuous activity by one person, with Claude Code as the working layer and the product and research foundation kept as a structured, sourced knowledge base in the repository.

The category makes this a distinctive design problem. M&A advisory sells discretion and judgement, the audience is wealthy, senior and allergic to being marketed at, and nearly every competitor site is the same navy-and-glass template. The opportunity was to look like the only firm in the category with an actual point of view.

The problem

The existing site was a hand-written static page that undersold the firm: template visual language, 14px body type, and a contact form that posted to a script endpoint in a mode that reports success whether or not the submission was ever delivered. For a business whose entire site exists to produce one booked consultation, an unverifiable lead path is not a technical footnote, it is the whole risk, and it had gone unnoticed precisely because it never visibly failed.

The design problem was differentiation under constraint. The copy was to be reused verbatim, this was a visual and structural redesign, not a messaging rewrite, and the structured data and content had to carry over. Within that, the site had to escape the category's default look without tipping into the opposite failure, the over-designed agency page that makes a discreet advisory firm look like it is trying too hard.

There was also a discipline problem inherent to the workflow. Working solo with an assistant makes producing another design variation nearly free, and unlimited cheap variations are how projects drift into taste-driven churn. The process needed decisions that stayed decided, and a record of why, or the speed would work against the project instead of for it.

What I did

The art direction is the heart of the piece: ink on paper. Warm cream stock, deep marine ink, a single marine-blue accent drawn from the logo, and engravings of the client's actual subject matter, ships, rail, harbours, run at real scale in full ink, bleeding to the viewport edge. Engraving is a print medium, so the page behaves like a printed page: no gradients anywhere, one accent, no glow, no glass. Rhythm comes from two full-bleed inverted bands, paper-on-ink, so the register flip does the dramatic work that competitor sites ask colour effects to do. Typography is a transitional serif for display over a neutral grotesque for body, self-hosted, with body type raised from the original 14px to 17px.

The direction was not the first answer. An earlier same-day pass settled on a contained navy-and-blue option and was rejected on sight for reading as a restructure of the old site rather than a redesign, which the options document had named in advance as exactly that option's risk. The rejection, the reason, and the surviving direction are all recorded in the decision log, and a later first build pass failed in a documented way too: the engravings were initially shrunk into bordered boxes at low contrast, where they read as faint technical diagrams, and the fix, real scale, full ink, edge bleed, is written down so it does not regress.

Structurally the page is a Split Studio: every major block is a diptych and the pairing alternates direction down the page. Design exploration ran through versioned routes, v1, v2, v3, each with its own token file, so directions could be compared as running pages rather than as static frames, and promoting one is a routing decision rather than a rebuild.

The engineering serves the same discipline. Tailwind was installed, measured against the performance budget, and removed when the numbers showed it added 14KB of render-blocking CSS for utilities the page did not use; the design system is one token file per version plus a dozen hand-written classes. React exists for exactly one island, a text-hover component on v3's masthead, loaded only when visible, and its 64KB cost is explicitly flagged as unsigned-off before v3 could ever go live. And the live site's silently unverifiable contact form is documented as a lead path that must be verified before replacement, so the one thing the site exists to do cannot be broken by the redesign that improves it.

Outcomes

  • Established a distinctive ink-on-paper art direction in a category of interchangeable navy templates: real-scale engravings bleeding to the viewport edge, two paper-on-ink inverted bands, one accent, no gradients, glow or glass
  • Raised the typographic floor of the site, a transitional serif display over a neutral grotesque body, self-hosted, with body type up from 14px to 17px
  • Kept the main pages at zero JavaScript, with the single React island confined to a preview route, loaded only when visible, its 64KB cost measured and explicitly gated on sign-off before promotion
  • Removed Tailwind on measurement when it added 14KB of render-blocking CSS against the performance budget for utilities the page did not use, with the reinstatement path recorded
  • Surfaced in the site audit that the existing contact form reports success whether or not a submission is delivered, and made verifying that lead path a precondition of replacing it
  • Maintained a decision log that preserves rejected directions with their reasons, including the same-day rejection of the contained-blue option for the exact risk its options paper had predicted, and the documented engraving-treatment failure and fix
  • Produced the full research foundation solo, market, audience and personas, competitors, UX patterns, SEO, content inventory and live-site audit, as a structured knowledge base in the repository

What I learned

In a category where every site looks the same, the art direction is the conversion strategy. The audience for an M&A advisory does not compare feature lists; they infer judgement from every surface they touch, and a template signals its absence. Committing to a printed-page discipline, and enforcing it with outright bans rather than preferences, is what let the site claim a position no competitor occupies. The bans mattered more than the palette: a direction is only distinctive while nothing on the page contradicts it.

Cheap variations are the hidden hazard of an AI workflow, and the decision log is the counterweight. When another design pass costs minutes, nothing structural stops a project from cycling through directions indefinitely, and the work degrades into taste churn. Writing decisions down with their reasons, and preserving rejections rather than cleaning them up, is what made decisions stay decided. The rejected contained-blue option earning its predicted failure on sight was the log paying for itself: the risk was named before it was demonstrated.

Measurement beat convention twice, in opposite directions. Tailwind left the project because the numbers said it cost more than it gave; the React island stayed because its cost was measured, confined and gated rather than assumed to be disqualifying. The consistent principle is neither pro- nor anti-framework, it is that the performance budget decides, and every exception carries its price tag and its decision point in writing.

The audit finding about the form is the lesson I would lead with. The most important defect on the site was invisible by design: a lead path that reports success regardless of delivery fails without a trace, on the one function the site exists to perform. It is the same class of silent failure as Strixon's credibility problem, and it has made "what fails without producing evidence" a standing question I now ask of any site before asking what it looks like.

The full record / 5 decisions
My role
Freelance UI/UX Designer
Timeline
July 2026 to August 2026
Platform
Marketing website, content-led and prerendered, with versioned design routes
Category
B2B Website / Art Direction
Status
Redesign, delivered

Tools Claude Code, Claude Skills, Astro, React (one island), TypeScript, CSS design tokens, Vercel

Team Solo, working directly with the client

Decisions

Ink on paper, against the category

What
Committed the art direction to warm cream, deep marine ink, one accent, and real-scale engravings bleeding off the page, with two inverted bands for rhythm, and banned gradients, glow and glass outright.
Alternatives
The contained navy-and-blue option, closer to category convention, and the broader field of standard finance-site treatments.
Why
Every competitor looks the same, and this audience hires judgement. A printed-page discipline signals an old-money confidence no template can, and the bans are what keep it disciplined: the direction only works if nothing on the page contradicts the medium.

Versioned design routes instead of mockups

What
Built each design direction as a running route, v1, v2, v3, with its own token file, and made promotion to live a routing decision.
Alternatives
Conventional Figma exploration with a single build at the end.
Why
A direction whose drama lives in register flips, full-bleed engravings and type at display scale cannot be judged in a static frame. Real routes made the client review the actual artefact, and per-version tokens made directions cheap to keep and compare rather than destructively iterate.

Remove Tailwind on measurement

What
Installed Tailwind per the original stack decision, measured it against the performance budget, and removed it when it showed 14KB of render-blocking CSS for utilities the page did not use, recording the reinstatement path.
Alternatives
Keeping it for convention and future convenience, which is the default answer.
Why
The design system is one token file and a dozen classes; the framework was cost without benefit on this page. Deciding by measurement rather than by habit is the same discipline the rest of the project runs on, and recording how to reverse it keeps the decision cheap to revisit.

Flag the island's cost before it can matter

What
Allowed a single React island onto the v3 preview route, measured its 64KB gzipped cost, and explicitly marked it unsigned-off, with promotion of v3 named as the moment the decision becomes real.
Alternatives
Shipping it quietly since preview routes are free, or refusing any JavaScript on principle.
Why
The honest framing is that it costs nothing today and real money the day v3 goes live. Recording the cost and the decision point converts a future surprise into a scheduled choice, which is what a performance budget is for.

Verify the old lead path before replacing it

What
Documented that the live site's form posts in a mode that reports success regardless of delivery, and made verifying that path a precondition of replacing it.
Alternatives
Treating the new form as a clean break and simply shipping it.
Why
The site exists to produce booked consultations, and the current pipeline may have been silently dropping them for years. Replacing an unverified lead path with a new one destroys the evidence and repeats the risk; verifying first is the only way to know whether leads were being lost.

( Tags )

  • Art Direction
  • Editorial Design
  • Design Tokens
  • B2B SaaS
  • Marketing Website
  • Logistics
  • AI Workflow
  • Claude Code