COI Commodities
COI Commodities brings the harvest to the hands that need it, moving maize, wheat, soybeans, pulses, oats and ginger from South African farms into global markets. They needed a digital home that felt as dependable as a handshake on the farm and as sharp as a board-room pitch.
The Challenge
Commodity trading sites either look like spreadsheets or look like stock photography. COI sits in a very human middle ground, where real relationships with farmers and real logistics across nine provinces are the product. The site had to carry that trust without drowning buyers in jargon, and had to work well on the phones that farmers actually use in the field.
The Solution
We shipped a calm, editorial WordPress site built with Elementor around a green, earthy identity. A looping hero grounds the brand in people, a mapped logistics view shows the national reach, and a four step process lays out exactly how a trade moves from first call to final delivery. Every icon and illustration is bespoke to COI, nothing is stock.
At a glance
0
Commodity types moved
0
South African provinces served
0
Service pillars on the site
0 weeks
Ship time, brief to launch
Colour Palette
A grounded, earthy system. Deep forest greens carry the brand, a muted olive drives action, and warm creams keep the whole thing readable.
Deep Forest
#1E3D33
Hero bg
Teal Green
#2C5A47
Logo / overlay
Muted Olive
#7A8C6A
CTA button
Warm White
#D6D8C8
Headings
Cream
#E8E4D4
Pattern bg
Full palette flow
Behind the Build
The details we obsessed over.
Hand-drawn commodity illustrations
Every commodity COI moves, grain, beans, oats, ginger, gets its own hand-drawn illustration in the deep forest and cream palette, each sitting inside a soft olive capsule so the set reads as one family across the site.
Design Direction
We leaned into an agricultural editorial feel rather than the usual corporate trading aesthetic. Deep harvest green carries the brand, wheat gold and soil brown add warmth, and generous white space keeps the site feeling considered. Typography pairs a confident sans for headings with a readable serif for longer copy, so a farmer scanning on a phone and a buyer reading on a laptop both get a clean read.
Services as pillars
Instead of one dense services paragraph, the offering is split into five pillars, sourcing and trading, logistics, quality assurance, client support, and market insight. Each pillar gets its own card with a bespoke icon and a two sentence plain-language summary, so a visitor can understand the full COI offering in under thirty seconds.
Trust without the corporate stiffness
The copy was written in the voice COI uses on the phone, warm, direct, and confident. Phrases like we bring the harvest to the hands that need it do the work that ten buzzwords usually try to do. Accreditation marks, client testimonials, and a visible contact block anchor every page so trust never has to be earned twice.
“The site finally looks the way our calls feel, personal, professional, and clearly South African.”
COI Commodities
Founding Team
Technical Stack
Built to load fast on rural connections and scale with the business as new commodity lines come online.
WordPress
Platform
Elementor
Page Builder
Bespoke SVG icons
Illustration
How We Got Here
Discovery
One workshop with the founders on farm, one on-screen, to map the real trade flow from farmer to buyer and pick out the moments where trust is won or lost.
Design
Moodboards pulled from agricultural journals, trading reports, and South African landscape photography, then a Figma prototype reviewed against the COI logo pack to keep brand consistency tight.
Build
Three week sprint on WordPress with Elementor, with the map, the process flow, and the service pillars built as reusable sections so new commodity lines can be added without a redesign.
Launch
Quiet launch to existing buyers and farming partners first, then a full reveal across LinkedIn and industry channels once live feedback was baked in.
Hanni Design
A luxury bridal atelier website showcasing bespoke gown collections with an elegant, editorial aesthetic. Features a gallery-driven layout and a custom enquiry form that routes brides straight into consultation bookings.
Next buildForget Me Not
A digital memorial platform where families create lasting tribute pages for loved ones. Includes a physical NFC-enabled memorial tag that links to the online page, connecting the physical and digital in a beautiful, floral-themed experience.