Case Studies

Cox & Kings
Travel

Front‑end development for Cox & Kings' luxury travel e‑commerce rebuild, translating user‑tested designs into a responsive, mobile‑first experience across destination discovery, itineraries, and booking.

Screenshot of the Cox & Kings website; part of John Kavanagh's selected project work.

In Brief

One of the world's oldest travel companies, Cox & Kings have long been synonymous with luxury travel experiences. With website traffic increasing and mobile usage growing among its customers, the company needed a modernised e‑commerce website that could improve holiday discovery and booking whilst still fitting into its existing back‑end estate.

My Role

As the sole front‑end developer in a small Brighton‑based delivery team, I built the responsive component and template library for the new website. The work was shaped by user testing and feedback, and I then supported the client's offshore development team as they integrated the front end into the existing back‑end infrastructure.

Technologies

coxandkings.co.uk
  1. jQuery
  2. Bootstrap
  3. HTML5 & CSS
  4. Storybook
  5. webpack
Photograph of a street in Salvador, Bahia (Brazil) lined with brightly-coloured buildings.

In Detail

Cox & Kings' website sat within a wider legacy estate that shared application code and infrastructure with back‑end products and back‑office software. Replacing the entire platform was therefore impractical; the new customer experience had to integrate cleanly with what already existed.

The rebuild was delivered as a new front‑end template and component system designed to slot into that estate. Bootstrap and jQuery were already deeply embedded across the client's systems, so the challenge was to modernise the experience without assuming a clean‑slate technology stack.

I developed the components and static templates using a lightweight webpack setup, with Storybook used to demonstrate each component independently and provide code‑based documentation for the offshore integration team.

The resulting library contained more than 70 reusable components and 30 precomposed HTML templates, covering responsive, mobile‑first journeys for discovering destinations, exploring itineraries, and beginning the booking process.

Homepage

The homepage templates prioritised large destination imagery, immediate holiday exploration, and clear contact routes. The layout was adapted for mobile users so key actions remained available without relying on the desktop experience.

Screenshot of the Cox & Kings website homepage - desktop screen size.
Screenshot of the Cox & Kings website homepage - tablet screen size.Screenshot of the Cox & Kings website homepage - mobile screen size.

Destinations

The destination templates brought Cox & Kings' catalogue‑style presentation into a responsive web interface, combining large imagery with filters for location, time of year, cost, and other trip‑planning criteria.

Screenshot of the Cox & Kings Destinations page - desktop screen size.
Screenshot of the Cox & Kings Destinations page - tablet screen size.Screenshot of the Cox & Kings Destinations page - mobile screen size.
Screenshot of the Cox & Kings Country page (displaying Brazil) - desktop screen size.
Screenshot of the Cox & Kings Itinerary page - tablet screen size.Screenshot of the Cox & Kings Itinerary page - mobile screen size.

Interactive Pairs Game

In October 2014, a responsive pairs‑matching game I developed was published on the Cox & Kings homepage as part of a competition. This was a fully responsive JavaScript game using simple HTML and CSS animations. It featured a timer, turn counter, and cheat detection.

The competition ran for six weeks, during which the game was played over a million times.

Editorial Pages

The template system also supported editorial travel content, giving content creators reusable layouts for more magazine‑style pages. One example was a seasonal travel feature built around destinations by month and time of year.

Screenshot of the Cox & Kings Travel Calendar page - desktop screen size.
Screenshot of the Cox & Kings Travel Calendar page - tablet screen size.Screenshot of the Cox & Kings Travel Calendar page - mobile screen size.
Screenshot of the Cox & Kings Order a Brochure page - tablet screen size.Screenshot of the Cox & Kings Order a Brochure page - mobile screen size.

Have a similar
platform challenge?

I help teams make difficult React, Next.js, migration, performance, and technical SEO work clearer, safer, and easier to deliver.