Skip to content

( Independent Practice / July 2026 to August 2026 )

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

My role
Freelance UI/UX Designer
Timeline
July 2026 to August 2026
Category
B2B Website / Art Direction
Status
Redesign, delivered

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

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

  • 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
  • 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.

( Tags )

  • B2B
  • Art Direction
  • Website Redesign
  • Marketing Site
  • Editorial Design
  • Design Tokens
  • Performance Budget
  • Typography
  • M&A Advisory
  • Logistics
  • TransTech
  • AI Workflow
  • Astro
  • Claude Code