case study · Website Projects

Nuraak Gulf

A full redesign for a Saudi freight forwarder — the old multi-sector brochure became a focused quoting tool, with a shipment enquiry that starts in the hero.

At a glance
9
service pages, each ending in the same ask
26
pages in the sitemap
6
insight articles
0
plugins — fully custom code
Nuraak Gulf — full page design
Scroll inside the frame to see the full page.

Before the redesign

Nuraak Gulf — the previous site
The site this replaced: a dark multi-sector brochure that led with “Designing · Transporting” and left the freight business to be guessed at.
01 · The brief

What Nuraak Gulf needed

The first site read as a multi-sector Saudi enterprise — engineering, logistics and tech in one dark brochure — and the freight business it actually runs on was buried in it. A shipper landing there could not tell within ten seconds whether Nuraak Gulf could move their container, clear it and deliver it, let alone start a price. The redesign had one job: make the offer obvious and make asking for a quote the easiest thing on the page.

02 · What I built

How it works

A rebuild in React, Vite and TypeScript, pre-rendered so every page arrives as ready HTML. The dark corporate look gave way to a light editorial one, and the hero now carries a shipment enquiry — origin, destination, service — so a visitor starts a quote in the first screen instead of hunting for a contact page. Underneath it: nine service pages from freight forwarding and customs clearance to RoRo and project cargo, a five-stage explanation of how a shipment actually moves, industries, fleet and network pages, six insight articles, and an FAQ marked up for search.

  • Shipment enquiry in the hero: origin, destination and service, before any scrolling
  • Service pages from freight forwarding, air and ocean freight and customs clearance to RoRo, project cargo and warehousing
  • A five-stage walk-through of how a shipment moves, from brief to proof of delivery
  • Industries, fleet and network pages
  • Insight articles, such as SABER certification explained
  • FAQ marked up for search, plus WhatsApp, phone and email contact
  • Privacy, terms and cookie policy pages
03 · Tech stack

What it runs on

The tools behind the build and the job each one does.

01ReactInterface and page components.
02Vite + TypeScriptBuild tooling and typed code.
03Pre-renderingPages arrive as ready HTML, then become interactive — quick to open and readable by search engines.
04Quote APIThe hero enquiry and the quote form post to the site’s own endpoint.
05Structured dataOrganisation, location, opening hours and FAQ markup.
06Security headersHSTS plus frame, content-type, referrer and permissions policies.
The result04 · Outcome

What it delivered

A site that reads like the operator it belongs to rather than a holding company: the service is clear in one screen, the route to a quote is open from the hero, and every service page ends in the same ask.

  • Shipment enquiry in the hero — origin, destination, service
  • Nine service pages, each ending in the same ask
  • Light, readable design in place of the dark brochure
  • Six insight articles and an FAQ marked up for search
  • Pre-rendered pages that open fast and search engines can read
05 · Check it yourself

Don’t just take my word for it

Open the project and see it working. The stack and numbers on this page were checked against the live build on 4 October 2026.

How it ran

The same process for every project

One person from first call to launch. See the full process

  1. 01Brief and scopeWe agree what it has to do, who it is for and what counts as done.
  2. 02DesignLayouts for the key screens, shaped around what turns visitors into customers.
  3. 03Build and testBuilt, checked on phones and desktops, and connected to the tools the business uses.
  4. 04Launch and supportLive on the real domain, with 12 months of support included.
Usually replies within a day
let’s talk

Have a project like this?

Tell me what you’re trying to build and I’ll walk you through exactly how it would run — a clear scope and a fixed price.