Rolling out a rebranded site for one of Europe’s largest rail carriers

Eurostar

Summary

In 2022, International high speed rail operator Eurostar was merging with another carrier at the same time as a major rebrand.

I worked on UX, UI, IA, Interaction and Visual Design briefs, across the ticket booking system, navigation and rebranded page templates.

Over 8 months, I worked on UX, UI, IA, Interaction and Visual Design briefs, across the ticket booking system, navigation and rebranded page templates.

Results were:

  • • 11% increase in ticket booking conversions.
  • • 15% increase in hotel booking conversions.
  • • Much improved site navigation and search experience.
  • • A fresh new look across key pages, in line with the new brand.

My role

  • Research
  • Usability testing
  • UX design
  • UI design
  • Visual design

Team

  • 4 Designers

Eurostar

  • A leader in European rail travel
  • 2,500+  employees
  • 11 million+ passengers transported annually
  • 3,300 km of rail track, linking European capitals
A Eurostar train

Brief I

Book and  Pay

  • • Merge the booking systems of Eurostar and Thalys
  • • Improve seat selection and booking extras
  • • Add multiple journey booking

Research

Brief

Eurostar were merging with another rail carrier and needed to realign the ticket booking experience to suit both companies.

This redesign was an opportunity to address existing issues such as train schedule info, fare types, seat selection and checkout, as well new business demands such as multi buy tickets and additional extras.

Customer interviews

Twelve Eurostar customers were interviewed, and a variety of challenges emerged in their experiences with the booking process.

Customers faced difficulties when searching for trains, booking tickets,adding extra services to their reservationsanaging bookings post-purchase

Insights

These mixed experiences underscored the need for Eurostar to address these issues, emphasising the importance of streamlining the online platform for easier navigation, efficient booking, and improved post-booking support to enhance overall customer satisfaction.

Define

Personas

Two personas named Anna and Markus were created to empathise with a broader range of customers' needs and perspectives.

The personas represented a distinct variation of customer, helping us understand behaviours, motivations, pain points, and aspirations.

Journey Map

With these personas as a guide, User Journey maps were created, detailing the experience of deciding to travel, researching options, choosing tickets, paying, receiving information and managing the booking.

Define

How Might We best position seat selection?
How Might We make the timetable easier to scan?
How Might We streamline the checkout?
How Might We better explain fare classes?
Sketching

With a better focus on the problems that needed solving, I turned to sketching as a fast and easy method of thrashing out options for UI, as well as mapping out alternatives for the user flow and other ideas.

User flow

User flows were created to get a clear understanding of the steps involved in choosing tickets, choosing extras and then paying.

Different flows were needed to understand the differences in booking trains, hotels or a combination.

Early UI

Lots of early development work went into exploring different possibilities for the UI, in particular for search result rows and fare types.

Features that were designed or improved included:

• Side column cart
• Cart button on mobile
• Multi trip booking flow
• Fare class info
• Tooltips and toasts
• Hotel bookings banner
• Enhanced extras page

Prototype and Test

A high-fidelity prototype was put together from the new designs and a group of 8 subjects were recruited for testing online.

These subjects all had some familiarity with booking trains but represented a broad spectrum of customer, with different backgrounds, ages and incomes.

Test results

The test results were broadly positive, with subjects all generally able to navigate the process smoothly, from scanning train timetables to selecting a train, understanding fare classes, choosing seats, adding extras, logging in, and making payments.

Minor usability issues such as changing tickets and accessing the cart were identified and addressed in the final designs.

Deliver

The designs were completed after several rounds of testing and are now live.

Along with the rest of the site, the ticket buying flow was also re-skinned with the new Eurostar brand, which is ready to launch in September 2023.

Outcome

The new improved end-to-end ticket booking flow design saw:

11

%

increase in successful conversions

15

%

increase in hotel bookings

Brief II

Rebrand rollout

  • • Explore the possibilities and limitations of the new brand
  • • Redesign key page templates
  • • Manage stakeholders on the brand team

Research

Brief

Eurostar were preparing for a bold new rebrand, featuring a new logo, symbol, colour palette, photography and illustrations.

I was tasked with bringing this new brand to life online. This would involve balancing the enthusiastic demands of the branding team with the refined tastes of high end rail travellers.

Early explorations

I began with gaining an understanding of the new brand, which was inspired by sparking adventure, travel and excitement. Research and benchmarking against other travel/luxury brands helped align the new look.

Make the logo bigger

Early efforts involved pushing the limits of angled typography and the loud colour palette. The brand team were keen to feature the new brand symbol, known as The Spark, as much as possible.

Unfortunately, The Spark didn’t easily lend itself to the spatial restrictions of the screen and needed some clever positioning.

This led to experimenting with image cropping and the use of angled page sections, in order to keep some of the sparky dynamism.

The new look evolved over many iterations, discussions with the branding team and stakeholders including the CEO.

Landing page

Along with integrating the booking engine, a particular challenge on the landing page was the need to allow flexibility for a variety of marketing promotions and imagery. The headline needed to accommodate long or short messages in all European languages, and of course, The Spark also needed some presence.

City Breaks pages

One of several templates designed to showcase both the brand and the holiday travel destinations with a sense of excitement.

Travel info pages

Content page templates that contained all of the practical information needed by passengers ahead of their journey.

Components

When my designs had been completed and signed off by the brand team, I began creating components to be used as part of a Figma component library. Colour was a big part of the new brand and the team were keen to allow the content editors a broad palette in the CMS. This added to the complexity of the component variants.

Design System

The new page template components were part of an overhaul of the Eurostar design system. Over 6 months, our team constructed a new system, which we documented and handed over to developers as we went along. I have written a seperate case study about this project:

Design System Case Study

Brief III

Search and Navigate

  • • Redesign the booking engine
  • • Reposition the booking engine to avoid clashing with imagery
  • • If possible, integrate booking engine into the navigation

Research

Brief

Eurostar had struggled with the placement of their 3 separate booking engines:
• Trains
• Train + Hotel
• Hotels

The tabs for these clashed with three identically named but very different pages in the primary navigation, and the confusion had never been properly addressed.

Research

I started with competitive research and analysis understand how we might better integrate booking engine UI with the navigation.

I wanted the booking functionality to be easily accessed from any page.

Early designs

To avoid clashing with the navigation, I tried positioning the booking engine just above the fold on desktop.

However this soon became problematic when it came to scaling for different screen sizes.

Site mapping

A new site map helped with restructuring the site content and prioritised what would appear in the main navigation.

Solution

In retrospect, the solution was quite simple. Some probing uncovered that the links in the main nav were largely included for SEO purposes, and so could be safely repositioned to share the same tabs as the booking magnet.

This allowed a horizontal layout that could be integrated with the navigation, to allow easy access from any page.

Navigation

This restructure necessitated a redesign of the navigation and menus. On mobile I used a side-to-side navigation, to replace the janky accordions. The designs were also restyled to fit the new brand.

Finished Navigation

The new integrated booking engine was successfully tested with users and the new design will launch with the rest of the site rebrand in September 2023.

Back to top ↑