Start with evidence
Before any design, I documented the old site: a full crawl (Screaming Frog), 16 months of Search Console data, and a snapshot of every post, page and image from the WordPress REST API. The snapshot became the source for the migration, so nothing depended on the old server staying online.
A redirect for every old address
Every old URL got a deliberate outcome, written down before launch:
- Pages and articles: a permanent (301) redirect to their new readable address, e.g.
/?p=714 → /guides/form-m-nigeria.
- Demo pages, empty archives and feeds: "Gone" (410), so Google drops them instead of keeping dead pages in its index. Old paths that never had any value return a normal 404.
A script tests all 136 old URLs against the live site. All 136 pass, and a sentence-by-sentence check confirmed that all 298 sentences of the five articles are on the new pages.
Content the team can edit
Pages are built in Sanity from a small set of sections (hero, services, how it works, document checklist, guides, FAQ, contact), so the team can reorder or rewrite a page without a developer. Articles are Sanity documents with their own SEO title and description. Copy that never changes (the privacy policy, the four process steps) lives in code and is written once, so the homepage and the Services page can't drift apart.
A design built around how customers actually get in touch
Customers mostly arrive by WhatsApp, phone and email, usually after finding the business on Google. So the site is contact-first: "Request a quote" and "Chat on WhatsApp" in every hero, a floating WhatsApp button, and a short quote form that sends a formatted email with one-tap Reply on WhatsApp, Call and Reply by email buttons. Each service card links to the form with that service already selected.
The look uses JUMTA's shared navy, sand and amber, plus a Cargo blue. The homepage hero has an animated clearance diagram: the cargo moves through Shipment → Documents → Customs → Release → Delivery, the same journey a customer's goods take. Each service has its own small animated illustration, and the "What to send us" lists look like paper documents.
Accessible and quick on a phone
- One H1 per page, headings in order, a skip link, visible focus outlines and alt text required in the CMS.
- Small orange text on the sand background got its own darker shade to pass contrast (5.0:1).
- Screen readers hear whole words even where headings animate letter by letter.
- Everything is visible without JavaScript or with reduced motion.
- Fonts trimmed to the characters the site uses (including the naira sign): about 0.35 MB instead of 1.3 MB.
- Content on the first screen fades in by CSS straight away instead of waiting for the animation code.
- Business structured data (name, address, phone) matches the Google Business Profile.