TCA – Champagne UX Improvement

The problem

We received this email concerning a potential issue with pre-ordering champagne on Thomas Cook flights;

“We seem to have a problem with the UX around the pre-ordering of Champagne. Most days we get a complaint from someone who thinks they should be served a bottle they have pre-purchased on their outbound flight eg Manchester to Vegas but they actually purchased it for their inbound flight Vegas to Manchester. I guess they are booking close to departure when it isn’t possible to book for their outbound and they are getting confused. Please can you look at making it clear what flight people are adding extras too as like I say this seems to be a common problem.“

Going through the journey of pre-ordering champagne to a flight, it was initially a struggle to understand the problem at hand – as we simply weren’t checking close enough to departure.

This is what you see when you’re 72+ hours before your flight:

We then met with Simon Muddimer (who sent the original email) and after chatting with him, he informed us as to what the issue was.

When a passenger has less than 72 hours before their flight, they have an option to pre-order champagne, but this is only for the inbound flight.

Champagne pre-order when you have less than 72 hours until departure.

This isn’t clearly highlighted enough on the page and leads to confusion.

Speaking with the call centre, and those that take complaints directly from the customers – proved our suspicions to be correct. People were booking champagne on the inbound flight by accident – rather than the outbound flights.

I immediately started sketching out a fix.

The solution

I wanted to keep a certain amount of similarity to the existing champagne pre-order section in order for a quick development turn around – so the text/image section was pretty much untouched.

The main aspect I wanted to change – was to clearly display to users, just what flights they were assigning the desired pre-orders to.

Sketching

I split the sections up clearly, and displayed the flight information in an easy-to-understand way.

Initial sketch of the champagne pre-order section, more than 72 hours before the flight.

I also felt that rather than simply make the outbound section disappear when the passenger gets within 72 hours of the flight – to instead disable the ability to pre-order champagne, and display a message to manage the user’s expectations in regards to availability on the flight.

Initial sketch of the champagne pre-order section, less than 72 hours before the flight.

In this sketch, I replaced the functionality with a message to let the user know they were unable to do this through the pre-order section, and to call the number of the ancillaries team instead.

This way – the user would be well informed as to which flight the pre-order was going to be assigned to.

Wireframes

I converted the sketches into wireframes and sent them round to the relevant teams

Wireframe of the pre-order section, with more than 72 hours remaining.

Wireframe of the pre-order section, with 3 bottles selected in the outbound section.

Wireframe of the pre-order section, with the outbound section disabled.

Hi-fidelity

After sending around the wireframes, I considered the feedback from the relevant teams. This included the copy being approved, and the thumbs-up from the development team.

I did however, have to make a change in regards to design of the input component. After speaking with the Lead Developer – in order to get the change signed off quickly and easily, we’d have to carry over some existing functionality, and existing styles – to which I was willing to compromise.

The tweaked hi-fidelity style, to incorporate the existing functionality.

The yellow styling around the dropdown was originally not intended to be part of the design – however, it was recommended that we incorporate it into the new design.

The desktop and mobile hi-fidelity component, with the Outbound input disabled.

The tweak was almost ready – however I wanted to propose a change myself.

Changing the “Close” button

The champagne pre-order is inside an accordion. You press “Open” on the champagne card, and the inputs open up below. For some reason, the “Close” button doesn’t sit underneath the content – it sits at the top.

This means that on a mobile device, when a user scrolls to the bottom, they have to scroll up to close the section – which for me feels unnatural.

On the left, the current pre-order section, and on the right – my proposed change.

The change was accepted and went live along with the re-arranged champagne pre-order section.

The result

The change was a success! I’m very pleased to say that complaints regarding champagne not being served on flights were pretty much non-existent after this! 🙂

Hi Steve,
Just dropping you a quick thank you for your work on the champagne stuff you did a month and a bit ago. Ive been in touch with the call centre and they said they havent had a complaint about the issues for a long time!!
Cheers mate,
Si

Happy days! I’ll drink to that!

Role: UX/UI Designer

Client: Thomas Cook Airlines