Caledonian Sleeper is a premium rail franchise serving overnight services between London and the Scottish Highlands.
It’s such a magical experience even Lonely Planet listed it as one of their must-do overnight rail trips.
I was given free reign over the website solution in a design and UX capacity. Even for a seasoned designer, this was a fantastic opportunity to be able to shape and redefine the online digital experience for what is already an iconic brand in travel.
It could not have been a more enticing challenge.
My directive was to lead the charge with UX/UI direction, communicate with stakeholders over key decisions, define the product flows and interactions, direct and deliver UX research, then present thoughtful, evidence-based user-centric solutions.
I had 2 midweight designers working with me under my direction, following my guidance on the front end and interface design, whilst I set the initial creative direction and oversaw the entire UX and design process.
As well as providing an aspirational brochure, the new site acts as an e-commerce ticket retailing solution, so both of these user needs must exceed expectations in order for the project to be considered a clear success.
To do this, we needed to redesign the whole experience for desktop and mobile from the ground up, whilst introducing new sections to the existing site in a phased approach. The development team were keen to move to React as a platform and a this also created additional challenges in terms of grasping new technology.
The Caledonian Sleeper isn’t a train ride, it’s an escape – an overnight teleport from hubbub to Highlands.
We understood the business requirements of turning the Caledonian Sleeper into a “premium hotel on wheels”, so we undertook a heuristic evaluation of popular accommodation booking platforms.
There was a common buy-in amongst stakeholders that the experience should meet the same user expectations as to a major accommodation booking platform such as Airbnb, Expedia or Kayak. We looked at how they achieved a simple flow of booking along with providing in-depth information on each room.
We proceeded to create a full suite of interactive wireframes to illustrate the user flow and booking process from start to finish.
After a number of collaborative meetings with stakeholders in London and Inverness, we reached an agreed sign-off on the final flows and performed initial UA testing amongst associates.
You can view the wireframes online here.
Market research was limited, so we used a mixture of Hotjar, Google Analytics and online user testing from What Users Do to inform our decisions.
We initially created basic personas, with user wants and needs, on the basis of better understanding our customers and their requirements. It was a fast and lean process in order to meet budget, scope and development timelines.
For additional insight, we looked at how our Hotjar users were interacting with the landing page via recorded videos and heatmaps, which in turn revealed some valuable information. By observing scrolling habits, it was evident that much of the content further down the page was being viewed by less than 10% of the userbase.
As a result, the journey planning element was discouring users from scrolling out of view, so we made the decision to provide this as a static element on the left of the page. We will be measuring how this affects engagement with the content further down the page over the coming months.
The excellent brand guidelines from Weber Shandwick gave us an adaptable and striking palette. We recommended a number of additional “traffic light” colours to the digital guidelines to give us greater flexibility for user notifications.
We took inspiration from established British brands such as Morgan and Aston Martin to give a sense of elegance, whilst keeping a contemporary feel to the interface.
Overall, the look & feel was kept elegantly simple, with use of white for content areas, soft cream for background, coloured elements for interactive areas and use of imagery wherever possible in order to provide an aspirational feel.
The reservations option is a complex feature, largely due to the fact that the booking technology behind it is antiquated and difficult to manipulate.
Passengers need to be able to move different groups into separate carriages, in mixed types of accommodation. Because of this appropriate feedback needs to be given to the user, where they can move and where their current accommodation is.
I set up a high fidelity Axure prototype that not only enabled us to test moving between rooms in a carriage, but also animates between carriages. before we even needed to start development.
This gave the development team a clear picture of what was required, whilst minimising hickups.
You can try the demo prototype for yourself online
The previous checkout had a considerable revision in 2015 to streamline the purchase process further. Following the phase 1 launch of this, we had both Hotjar and GA enabled to allow us to gain insights and allow us to fine-tune any areas that we saw as friction points.
Both of these tools revealed some interesting observations regarding user behaviours. As is typical in more elaborate user-testing, pain points are often revealed in areas that were previously considered easy to use, often brought to our attention by elderly users of lower technical ability or experience.
These reveals fed into our new checkout process. We initially planned to have a concertina checkout, but this was found to be too taxing for some users across both Desktop and Mobile. Not to mention the mobile experience may have been less than optimal.
Hence, to service our userbase best as a mobile-first approach we decided to remove the one-page approach and return to a series of simple steps. With the approach, the user has less likely to be overwhelmed and can proceed at their own pace.
To paraphrase Steve Krug “make my decisions a series of mindless steps”. So, in essence, that’s how we approached this for the user!
As a result, we have seen checkout conversions improve by over 23%. I think that can be called a success.
The new trains are due to be introduced late this year in a phased approach. To meet this significant change, we have produced a completely revised booking platform that is set to lead the way in luxury rail.
Not only, this but we have moved from Angular to React as a tech platform, which considering the challenge in doing so, the team should be incredibly proud of.
As this is a phased release, rather than a big bang approach, we will gain insight as user numbers and bookings increase to give us further insight as to how successful the improvements to the front-end and UX have been.
In a way, although less satisfying than a larger release, this allows us to fine-tune as we go rather than a sudden change for our users, very much in an MVP approach.
As an ongoing series of improvements, I’m excited to see how our users respond. As a team, we’ll be carefully monitoring, testing and iterating in the coming year.