( Independent Practice / July 2026 to August 2026 )
Port 2 Home
Delivered a rebuilt landing page for a port-to-door logistics business whose entire published evidence base was 31 words on a five-year-old default WordPress page, taking it from no proposition, no structure and no contact surface to a positioned, written, designed and QA-approved page
- My role
- Freelance UI/UX Designer
- Timeline
- July 2026 to August 2026
- Category
- B2B Website / Evidence-Led Design
- Status
- Redesign, delivered
Tools Claude Code, Claude Skills, Claude subagents, Astro 5, TypeScript, hand-authored CSS with locked design tokens, Vercel
Generated schematic, not a screenshot. Real imagery to follow.
( The account )
Context
P2H, Port 2 Home, is a port-to-door import logistics business, and its site has one job: convince an importer, a retailer or a forwarder that a container arriving at a port will reach a residential door with somebody answering for it the whole way.
The site it had could not do that job. It is a single WordPress page carrying roughly 31 words of product copy, on the default page slug, substantively unchanged since January 2021. No address, no phone number, no email, no team, no customers and no statistics. The engagement was to rebuild it, run through an AI-based workflow: research, positioning, copy, design and build handled as one continuous activity by one person, with Claude Code as the working layer and the evidence kept as a structured, sourced knowledge base in the repository rather than a deck.
What made the project unusual is what the research phase found on the other side of the brief. Sixty-three questions went to the client across two rounds, covering the legal entity, whether the company is trading, what it actually sells, who it is for and how to reach it. Sixty-three of sixty-three came back unanswered, twelve of them blocking. So the design question was not how to present this business well. It was what a page is allowed to say about a business that has told nobody anything, and how to make that page persuasive anyway.
The problem
The page has to earn a decision with no social proof available. Every conventional credibility device in B2B logistics is closed off here: no customer logos, no testimonials, no volumes shipped, no years in business, no named operations lead, not even a phone number in the footer. A visitor's reasonable question, why should I trust a container to these people, has to be answered by the argument itself or not at all.
The category makes that harder rather than easier. The live site's own phrase is "end to end," which is a coverage claim every incumbent freight forwarder and 3PL also makes, so repeating it puts P2H in a comparison it cannot win against firms that can back the claim with a network. Coverage is contested ground and it is the only ground the existing copy stands on.
Underneath both sits the unanswered brief. What the business sells and who it buys from were open questions, so the page's proposition, its audience and even its vocabulary rested on positions taken by the project rather than by the client. A page written that way is not automatically dishonest, but it becomes so the moment a working position hardens into a public claim without anyone noticing the promotion.
There was also a discipline problem inherent to the workflow. An assistant fills silence, confidently and instantly, and on a project this short of facts that is the failure mode that matters. Ask for a logistics landing page with nothing to go on and you get a founder quote, a customer count, a percentage and three testimonials, none of it flagged and every line a claim about a real company that nobody there has made. The same speed makes a second complete design direction nearly free, which sounds like an advantage and is how projects drift into taste-driven churn instead of decisions.
What I did
The page argues its case structurally, because it cannot argue it socially.
The position it takes is one accountable party for a containerized import, from the port of arrival to a residential door, with one record open the whole way. The wedge is accountability across handovers rather than coverage. An import passes through a terminal, a customs broker, a drayage carrier, a deconsolidation warehouse and a final-mile courier; each owns one leg and none owns the outcome, which is a gap a visitor recognises from experience rather than one the page has to prove with a statistic. It is narrower than "end to end," harder for an incumbent to copy, and it can be demonstrated by the shape of the page.
So the journey section is the spine: five stages, five handovers, and a rail drawn as one continuous element. A page arguing that accountability does not break at the handovers cannot have its own line break at them, which is also why one of the automated checks does nothing but assert that the rail stays unbroken at every width.
Specificity carries the credibility that proof normally would. The copy works in trade nouns rather than adjectives, demurrage, deconsolidation, gate-out, packing list, proof of delivery, on the reasoning that knowing the vocabulary of the job is the one competence a page can demonstrate without a customer to vouch for it. Against that, a banned vocabulary list: trusted, proven, leading, seamless, guarantee, 24/7 and the percent sign are absent from all 109 copy slots because each claims something the client has not established, and platform, software, dashboard and API are absent because whether P2H is software or a service is an open question and the page must not answer it by accident.
Three complete design directions were built rather than one refined, each owning every file under its own directory and sharing no token name, class name, component or stylesheet rule, deliberately, so a rule copied from one into another fails loudly instead of half-working. The first is editorial and deliberately unfashionable, light paper and a serif display with one anchor hue and one signal colour used exactly once, at the terminus of the route motif; typography and hairlines carry the page and the single drawn mark on it is structural. The second is a dark navy canvas using one variable grotesque through its width axis, with ornament tessellated from the client's own mark. The third is a two-colour press job on bone stock, the client's navy and the client's sky with tone made by CSS halftone screens rather than a third ink, crop marks on open elements and a 45 degree chamfer on filled ones, one board that indexes the whole argument before seven ruled bands print it. Promoting any of them to the site root is a single line, so the choice stays the client's and stays cheap.
Everything above had to survive being made quickly by one person with an assistant, and that is what the second half of the system is for. Evidence was classified before a word was written, 26 facts verified against the served HTML and the site's own WordPress API, held in a register that separates fact from inference from guesswork so nothing gets quietly promoted. All sixty-three open questions sit on one severity ladder with stable IDs, and every load-bearing sentence names the assumption it rests on together with that assumption's reversal cost, which is the number that decides whether the page can ship without an answer. Real copy and invented placeholder copy live in separate files, and in the honest state a gap renders as a bracketed placeholder naming the client question that unblocks it, with a build gate that failed while invented content reached the output. Five review rules became executable checks, and each was run against a deliberately broken build and confirmed to fail before it was trusted.
Outcomes
- Delivered a rebuilt landing page for a port-to-door logistics business whose entire published evidence base was 31 words on a five-year-old default WordPress page, taking it from no proposition, no structure and no contact surface to a positioned, written, designed and QA-approved page
- Replaced a contested end-to-end coverage claim with an argument the business can actually own, accountability across five handovers, carried structurally by a journey section drawn on one continuous rail rather than by proof the client could not supply
- Produced three complete, independent design directions on parallel routes, sharing no token, class, component or stylesheet rule, so the client compares real alternatives as running pages and promoting one is a single line
- Wrote 109 copy slots that credentialise through trade specificity rather than adjectives, against a banned vocabulary list covering both unearned claims and any word that would answer an open client question by implication
- Closed three adversarial QA rounds at zero blockers, zero majors and zero minors, with 142 contrast ratios computed and published, behaviour verified at six widths, no third-party requests and every colour and typeface enforced into a locked token block
- Ran the whole engagement to completion with all sixty-three client questions unanswered, by putting them on one severity ladder with stable IDs and pricing every assumption's reversal cost, which separated the twelve that genuinely blocked from the fifty-one that did not
- Built the evidence base the work stood on, 33 knowledge documents across research and product knowledge, including 26 facts verified against the live site's served HTML and its own WordPress API, in a register that keeps fact, inference and guesswork apart
- Kept invented content out of the output mechanically rather than by convention, with real and placeholder copy in separate files and a build that failed while placeholder content reached the build output, so a gap in the page reads as a client question with an ID
- Turned five review rules into executable gates, three of them build-blocking, and validated every one against a deliberately broken build on the standing rule that a gate that cannot fail is worth nothing
- Delivered a launch verdict rather than a launch, documenting that QA approval is not deployability and naming what stands in the way in order of cost, with the cheapest item being four lines of contact details
What I learned
Structure is a form of proof, and it is the only one available to a business that cannot cite a customer. I went in expecting the hard part to be differentiation in a category of interchangeable logistics sites, and the real constraint was that every conventional credibility device was closed off. What replaced them was an argument the page could demonstrate rather than assert: name the five handovers, show a rail that does not break at any of them, and use the vocabulary of the job accurately enough that knowing it becomes the credential. I would reach for that first now, even on projects where the logos and the metrics are available, because a claim a page can show is stronger than one it can cite.
Pricing an assumption is more useful than avoiding one. The instinct with sixty-three open questions is to treat them as one large blocker, and that stops the project. Attaching a reversal cost to each one separates the assumption that costs six strings from the assumption that changes the product, and it turned out only twelve genuinely blocked anything. That distinction is what allowed real work to happen while the questions stayed open, and it is the practice I would carry into any engagement where the client is slower than the schedule.
The workflow's speed has to be pointed somewhere or it turns into churn. A second complete design direction is nearly free here, and free variation with nowhere to go becomes argument about one page. Putting each direction in its own isolated folder, sharing nothing, deliberately naming the tokens differently so a copied rule breaks loudly, made three parallel designs cost less than one defended design and gave the client a choice instead of a defence. I would not share components across design directions again, even where it is easy, because the sharing is what makes them variants of one idea rather than three ideas.
The same speed is also why the honesty machinery had to be mechanical. An assistant fills silence convincingly and instantly, and on a project this short of facts that is the failure worth engineering against: a page written that way is not a draft with gaps, it is a set of claims about a real company that nobody there has made. Rules in a document are advice, so the ones that could become assertions did, and a gap became a bracketed placeholder naming the question that unblocks it rather than a sentence covering for it.
The limit of that is worth saying plainly, because it is the most useful thing the project taught me. When the client asked for a presentable page rather than a specification with holes in it, the invented content the system had quarantined was exactly what filled those holes, and the gate did its job: the first deployment attempt failed on sixty findings reaching the output. The decision to show that content anyway was the client's, it was raised and reaffirmed, and it is recorded in the repository as a decision with the objection attached rather than as an oversight. Where the choice was mine, it was mitigated: the faces beside the invented quotes are AI-generated rather than photographs of real people, so no living person's likeness is attached to words they never said, and reverting the whole thing remains a one-word change. A gate can make invention visible, detectable and cheap to undo. It cannot make the call.
( Tags )
- B2B
- Website Redesign
- Marketing Site
- Evidence-Led Design
- Content Strategy
- Copywriting
- Art Direction
- Editorial Design
- Design Tokens
- Accessibility
- Information Architecture
- Conversion Strategy
- AI Workflow
- Claude Code
- Claude Skills
- Astro
- TypeScript
- Logistics
- Freight Forwarding
- Import Logistics