Case Studies

Cox & Kings
Travel

Responsive frontend template and component development for Cox & Kings' luxury travel ecommerce website rebuild, designed around mobile users, existing platform constraints, and offshore backend integration.

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 ecommerce website that could improve holiday discovery and booking while still fitting into its existing backend estate.

My Role

As the sole frontend developer in a small Brightonbased delivery team, I built the responsive component and template library for the new website. The work was guided by user testing and feedback, then handed over with implementation support for the client's offshore team as they integrated it into the existing backend 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' existing website was part of a wider legacy estate managed by a remote development team in India. The website shared application code and infrastructure with backend products and backoffice software, so a full platform replacement was not the most practical route.

Instead, the rebuild was delivered through a new frontend template and component system that could be integrated into the existing infrastructure. Bootstrap and jQuery were already heavily used across the client's systems, so they remained core constraints for the new build.

I used a simple webpack setup to develop the static components and templates, with Storybook used to demonstrate each component in isolation and provide codebased documentation for the integration team.

The finished library included more than 70 individual components and 30 precomposed HTML templates, all aligned around a responsive, mobilefirst interface for browsing destinations, exploring itineraries, and starting the booking journey.

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' cataloguestyle presentation into a responsive web interface, combining large imagery with filters for location, time of year, cost, and other tripplanning 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 pairsmatching 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 magazinestyle 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.

Relevant Services

  • Embedded Technical Leadership

    Principallevel engineering support when architecture, delivery quality, and technical judgement need strengthening inside the work, not just from the sidelines.

Need this kind
of technical help?

This project reflects the kind of handson engineering and technical direction I bring to complex web platforms. Get in touch if your team needs similar support.