h-imports: A B2B Onepager for Switzerland on a Startup Budget

This case study is for agencies, designers, and solo devs who want to see what a onepager project can look like when you take it seriously without an enterprise budget. End clients will read it as a look behind the scenes of how their own website might come together.

The Starting Point

h-imports is a young Swiss company in B2B trade with fast-moving consumer goods (FMCG). The thesis behind it: many trends arrive in Switzerland later than in the EU. Close that gap.

Classic startup situation. No own images, no content, no experience running their own channels, and a budget that has to split between customs, logistics, and accounting. Still, they needed a professional online presence, otherwise Swiss B2B buyers won't take the company seriously.

What we agreed on: a WordPress onepager plus a small guide for the first steps (email signature, LinkedIn, what looks professional in the early days).

What the Swiss Audience Expects

B2B buyers in Switzerland tick differently than German end clients. The h-imports audience are retail chain buyers, distributors, mid-sized importers. They want to see trust, not playfulness.

The requirement was clear: clean, neutral, professional. Suggest trust. No crazy stuff. At the same time enough character so the site doesn't look interchangeable.

That's a balancing act. Too dry and the brand disappears between 50 other B2B sites. Too loud and the Swiss buyer clicks away after three seconds.

Discovery: Taking References Apart

Four reference sites were on the table: webstar.ch, hubspot.com, axongarside.com/winnow, and redwaynetworks.com. Before sketching even a pixel, I systematically analyzed each reference.

Per reference:

• Fullpage screenshot
• Raw data (HTML, stylesheets, computed styles)
• Markdown analysis on colors, typography, animations, tech stack, CTAs
• Assessment of what fits h-imports

The common denominator was clear: clean, neutral, lots of whitespace, clear hierarchies. But each of the four had its own spin. Which is what we need too.

Three Drafts in Parallel

The discovery phase narrowed things down to three possible brand directions: Editorial Premium, Swiss Modern, and Bold Industrial. My gut went to Swiss Modern, but it came across too cold and angular. Bold Industrial brought the warmth. A mix of both became the final brand direction.

Instead of building out one onepager and iterating through correction loops, I sketched three drafts in parallel:

• A — Catalogue: Quiet, catalog aesthetic, brand index as the main section
• B — Live Terminal: Lively, cargo terminal vibe, currently-shipping table with live status
• C — Editorial: Bold, magazine aesthetic, hero with word rotation and a wind rose in the footer

Three sketches in parallel is less work than it sounds because the discovery work is the same for all of them. And it saves iteration rounds later because the client directly sees the direction they want instead of nudging one variant around.

Why Variant C Won

The decision landed on the editorial variant. The magazine aesthetic feels self-assured without being loud, the word rotator in the hero gives the site an anchor, the wind rose in the footer is a subtle nod to internationality.

More important than the look: this variant had the clearest character. And that's exactly what's missing on many B2B sites in Switzerland. They all look the same.

From Static HTML to WordPress

Variant C started as a pure HTML/CSS/JS setup. For the final site, the client needed something they could maintain themselves without messaging me for every text change. So: WordPress.

Instead of a classic theme with ACF and a page builder, I went with FSE (Full Site Editing) and a Block Theme. Eleven custom blocks, all dynamic render (save: () => null plus render.php), no plugin licenses, no Yoast.

Why block theme:

• The client edits directly in the WordPress editor, which shows them the actual design
• No monthly plugin fees for SEO, caching, or page building
• Everything versioned in the theme repo, clean to deploy
• FSE in 2026 has finally reached the point where it works without workarounds

The eleven blocks cover the entire site: site-header, hero, marquee, why-grid, brand-list, process-steps, routes-map, story, faq-list, contact-cta, footer-windrose. Each block has its own attributes that can be adjusted in the editor.

Custom SVG World Map Instead of Stock Photo

The original design called for an "earth-with-arrows" graphic. Stock photos either looked kitschy or would have cost licensing fees that the project couldn't justify.

So I built my own world map. A build script loads Natural Earth 50m data (public domain), projects it equirectangular, and simplifies the paths. Output is an inline SVG embedded directly in the block.

Inline because I wanted to attach my own IntersectionObserver to the SVG that triggers the route animation when the block becomes visible. Seven thick EU routes are drawn with stroke-dashoffset and staggered delays like airplane landings, four distant routes (New York, Dubai, Shanghai, Singapore) run more subtly in the background.

prefers-reduced-motion is respected: no animation, lines visible immediately.

Middle Ground in Several Places

For a startup that's just writing its first invoices, budget is tight. That's not dramatic if you know where to cut and where not to. Concrete examples from this project:

• SEO: No Yoast or RankMath Premium license. Instead, a custom inc/seo.php module in the theme. Delivers meta tags, canonical, OG tags, and a JSON-LD graph with Organization, LocalBusiness, WebSite, WebPage, Service, BreadcrumbList, and FAQPage. All business data comes from a single business_data() function. Sure, it's not RankMath with a hundred features, but a onepager doesn't need that. Saves recurring license fees and is cleanly versioned in the theme repo.
• Hosting: Swiss hosting at Infomaniak on the standard plan instead of managed WordPress with a pro backup suite. The critical bits (HTTPS, mail, domain, cron) are included, the rest runs via WP-CLI from outside.
• Images: Custom SVG world map from public domain data instead of a stock photo subscription. Hero image with a one-time license instead of a monthly stock plan.
• Plugins: Minimal. Caching, honeypot, login URL protection. No page builder, no SEO plugin, no backup plugin (backup runs through the host).
• Mailbox: Infomaniak "Free" mail plan, enough for the start with up to five addresses. Upgrade later is one click when needed.

The important part: cut, yes. But not where it costs security or maintainability. Custom SEO instead of a plugin is extra effort on my side, but no downside for the client. Free mail plan instead of a pro suite is a deliberate decision, not sloppy work.

Swiss Details Nobody Sees

Switzerland has its own rules. A few things that don't show up on the radar on a first DE-only project:

• Hosting in Switzerland: Infomaniak runs Swiss data centers (Geneva, Winterthur), climate neutral, no lock-in. For CH B2B clients an implicit trust signal.
• html lang="de-CH": The frontend is Swiss German (ss instead of ß), the WordPress backend stays de_DE for editor comfort. A one-line filter.
• Reverse charge: For B2B services DE to CH, the tax liability transfers to the recipient. The invoice contains no VAT line, just the note "tax liability shifted to the recipient" plus the recipient's UID number.
• Sitemap cleanup: WordPress automatically generates /wp-sitemap.xml. By default it includes a users sitemap that leaks the admin slug. For a onepager without a blog, filtered: only pages remain.

What I Take Away From This Project

Three things I would do the same way on the next similar project:

Three sketches instead of one when the client has no clear vision. The effort stays manageable because the discovery phase is the same for all variants, and the decision becomes clearer for both sides. Iterating on one variant is often less efficient than choosing between three directions.

FSE plus custom blocks instead of plugin sprawl. Block theme needs more upfront setup, but the result is more maintainable, faster, and cleaner than a WordPress site with twelve plugins each shipping their own frontend. And it saves the startup recurring license fees.

Cut at the right end. When the budget is tight, the question isn't "where do we save", but "where are we allowed to save". Custom SEO instead of a plugin: yes. Weaker hardware or sloppy markup: no.

The site has been live for a few weeks now at www.h-imports.ch. Mobile is done, desktop is done, the client maintains it themselves.