Portfolio / B2B corporate site
A complex business explained in three doors.
BB Holdings sources oil, refined products, gas and agricultural commodities for industrial buyers across several continents. It's an operation of sourcing, contracts, logistics and risk — none of which sells from a catalogue. We built the web and content architecture that orders it into three verticals, turns abstract capability into provable benefit, and leads to a single destination: a strategy conversation with the team.

01The brief
Here, trust comes before the price.
A commodity buyer doesn't arrive looking for a product: they arrive to find out whether the counterparty can hold a contract. Volume, timelines, quality, customs, insurance, volatility. Before anyone talks about a tonne of anything, they have to decide whether this company can answer when something goes wrong — and they make that decision by reading the website.
The brief was to build that first layer of validation. Not a catalogue, not a brochure: a corporate platform that explains a high-complexity operation with the seriousness the category demands, and that ends by inviting a conversation rather than a cart.
What a buyer needs settled
- 01Which commodities, in which markets
- 02Whether sourcing and logistics are their own
- 03How risk and compliance are handled
- 04What separates this from a middleman
- 05Whether they serve a business like theirs
- 06How to start a serious conversation
Our role
Information architecture across the whole site, content structure by vertical and by service, homepage hierarchy, the corporate narrative on About, the public FAQ, the capture points, and the flow that leads to the strategy call.
02The structure
Three layers, in the order they get asked.
The site isn't ordered by the company's departments but by the path of the doubt: what they move, how they control it, how you start. Each layer answers the one before it.
Three verticals, not a list.
Oil & Refined Products, Gas & Derivatives and Agricultural Commodities. In twelve seconds a visitor knows whether their industry is inside. The granularity — crude, LNG, LPG, grains, fertilizers, refined sugar, magnesium silicate — lives one level down, where it starts to matter.
Vertical integration, told with facts.
An owned logistics arm, direct control of sourcing and quality, fewer middlemen. It's the argument that separates a trading house from a broker, which is why it takes the entire About page rather than a bullet on the homepage.
One conversion.
No quote tool, no cart: a booked strategy call. In a business where price depends on volume, route, term and risk, the only honest action the site can ask for is a conversation.
03The idea
What this site had to solve.
When the business is global, clarity is the advantage.
In procurement every competitor says the same thing: global network, competitive pricing, tailored solutions. The vocabulary is spent, so the difference can't live in the words — it has to live in the structure. A company that orders what it does well proves, by the act of ordering it, that it understands its own operation.
So the work wasn't to write harder but to rank better: what gets said first, what gets proved with a number, what gets held back for the deep page, and what gets answered before anyone asks. The site explains a complicated business without simplifying it, which is not the same as making it sound easy.
OrderProveTalk
04Art direction
Institutional, not a marketplace.
The temptation in this category is to lay it out like a shop: product cards, from-prices, offer badges. That would be a register error. An industrial procurement director who sees a site with e-commerce energy concludes the counterparty is a reseller, and the conversation is over right there.
The site is set in deep teal, with real photography of refineries, tank farms and terminals — no illustration, no render. The accent colour appears in small marks and nowhere else; hierarchy comes from size, air and order. The result reads closer to a corporate report than to a storefront, which is exactly where we wanted it to land.
Rules of the register
- 01Operational photography, never render
- 02Deep teal as the dominant colour
- 03Cyan accent on small marks only
- 04No prices, no offer badges
- 05Figures only where there's data behind them
- 06One button per section
Why it matters here
Visual register is part of the validation: in an industrial purchase, a site that looks like a shop contradicts the promise of running long-term contracts, however well the copy is written.
05Visual system
One colour doing everything.
Headlines, body copy and dark surfaces
- HEX
- #0D4958
- RGB
- 13 · 73 · 88
Bands over photography and dividers
- HEX
- #6E929B
- RGB
- 110 · 146 · 155
Small marks and active states
- HEX
- #4ECAE6
- RGB
- 78 · 202 · 230
Secondary text on dark ground
- HEX
- #B6C8CD
- RGB
- 182 · 200 · 205
Alternating bands and cards
- HEX
- #F1F3F3
- RGB
- 241 · 243 · 243
06Typography
One that asserts, one that carries.
Poppins
Aa Bb Cc — 0123456789
SemiBold 600 · Bold 700
Inter
Aa Bb Cc — 0123456789
Regular 400 · Medium 500
Inter · small caps
Aa Bb Cc — 0123456789
SemiBold 600
Global Commodity Procurement
clamp(40–75) · -2% · 700Worldwide Delivery Network
clamp(30–48) · -1% · 700Oil & Refined Products
clamp(18–24) · 0 · 600End-to-end procurement of grains, soft commodities and fertilizers, backed by sustainable sourcing practices.
16 / 26 · 0 · 400Years of Experience · Offices Worldwide · Contracts
13 / 16 · 12% · 60007The journey
From a cold visit to a conversation.
The site has one conversion, so everything else exists to qualify the visitor before they reach it. This is the order in which it happens.
WordPress · Elementor
Site, templates and blogThree verticals
Oil, gas and agricultureDelivery network
Sourcing, transport and customsTrade Security
Compliance and riskMarket Insights
Analysis and editorial contentStrategy call
External bookingForms and newsletter
Capture and follow-up
- 01
They place themselves
The headline states the whole territory in three words — Global Commodity Procurement — and the vertical band, with no scrolling, makes it clear whether their industry is inside.
- 02
They find their sector
Oil & Refined Products, Gas & Derivatives or Agricultural Commodities. The right card gives them permission to keep reading; the other two tell them the company is bigger than their case.
- 03
They gauge the capability
The energy block turns the abstract into benefit: cost reduction through supplier negotiation, market monitoring, risk management against volatility. It's the first time the site talks about money.
- 04
They measure the reach
A map of the delivery network and the operating figures: years, offices, contracts. Scale stops being an adjective and becomes a number next to a map.
- 05
They check the model
The About page carries the hard argument: an owned logistics arm, control from sourcing to delivery, fewer middlemen. That's the difference between a trading house and a broker, and it needs a full page.
- 06
They get answers they didn't ask for
The public FAQ settles eight real objections — transaction security, regulatory compliance, support for first-time importers — in plain indexable text, not in a PDF.
- 07
They book
A single destination: the strategy call, with its own booking on a subdomain. The contact form stays as the alternate route and the newsletter as the tie for anyone not ready yet.
3 verticals · 4 cross-cutting services · 1 conversion
08The work
What's published.
Deliverable figures, not campaign figures: what a visitor can walk through today on bbholdings.net.
- 3
- Verticals that order the whole offer
- 6
- Solution lines with a card of their own
- 8
- Objections settled in the public FAQ
- 1
- Conversion: the strategy call
09The pieces
The architecture, section by section.

Six cards — magnesium, crude, liquefied gas, refined products, agriculture and sugar — with a single teal tile marking the one the business wants to push. Granularity lives here, not in the headline.

Three concrete claims where the rest of the category puts adjectives: cost reduction through negotiation, market monitoring, risk management. This is the block that turns capability into benefit.

The map makes tangible a sentence everyone uses. Beside it, the three operating figures: years, offices and contracts. Scale gets looked at and counted in the same screen.

The institutional layer a company this size needs so that its offer doesn't read as a product list. Three sentences, not three paragraphs.

The argument that separates a trading house from a middleman, written with its three consequences: friction-free operations, controlled risk, and margin that isn't shared away along the route.

Performance bars on the deep page, where the visitor is already evaluating rather than browsing. The figure arrives after the argument, never before it.

Three reasons and three bars: on-time delivery, efficiency and support. This is where the site moves from “what we sell” to “why work with us”.

Global Trade, Trade Security, Market Insights and tailored support: what travels with any vertical. Each with its own card, image and page.

Financial planning, market-entry consulting, technology integration and the presence across two continents. It answers “can you stay with me through the whole process?”.

Eight objections answered in plain text: what makes them different, how an international transaction is secured, what happens with regulatory compliance, what support exists for a first-time importer.

One band, one question, one button. There's no quote tool because the price of a commodity contract doesn't fit in a form — it fits in a call.

A form with company name and reason for contact, so the conversation starts qualified. That's the difference between receiving a lead and receiving a case.

An industrial buyer checks suppliers between meetings. The headline, the promise and the three verticals all fit in the first sweep of a thumb.
10Where it stands
The architecture is up. The content, not quite.
bbholdings.net is live with the full structure: the three verticals, the six solution lines, the four cross-cutting services with pages of their own, the global network, the vertical-integration narrative on About, the FAQ, the newsletter, the forms, and the strategy call booked on its own subdomain.
And there is template content still to be replaced: Latin filler in the solutions introduction and in the project cards, an unlabelled metric on About, and an article dated before the period it announces. We're writing that here instead of cropping the screenshots: the work being shown is the architecture, and content production is the phase that follows.
How it's built
- 01WordPress · Elementor and ElementsKit
- 02Header, footer and form templates
- 03Native blog for News & Insights
- 04Forms with reCAPTCHA
- 05External booking on a subdomain
- 06Google Analytics via gtag
- 07Poppins and Inter · Google Fonts
- 08Operational photography, no render
What this case does not claim
No traffic, lead or ranking figures: the engagement is ongoing and that data doesn't exist in measurable form yet. Nor do we present as finished the content that is still pending production.
More work
A complicated business doesn't need a complicated site. It needs a well-ordered one.
International trade, industry, healthcare, infrastructure: when what you sell takes months to close, the site doesn't close the sale — it enables it. Its job is to make the first conversation start with the buyer already convinced it's worth having.
Tell us about your project