easyJet Checkout

Redesign

UI, UX

Responding to an industry brief set by Foolproof to redesign a digital checkout experience, I reimagined easyJet's desktop checkout.

Why easyJet?

I landed on easyJet after exploring the category of airline checkouts, and finding theirs fell particularly short of competitor sites. My research and user testing validated this – users felt overwhelmed by information, and confused by unusual and unexpected layouts.

Some frames from the existing site

Key Redesign Goals

With findings from my user tests in mind, I set several key goals for my redesign.

Reduce information overload

Through minimising scrolling, to reduce the amount of information on screen at once to a more digestible quantity.

Group information and actions more logically

Presently, baggage options are split between separate pages, slowing decision making as most users needed to go back and reference their first choice.

Reduce visual overwhelm

By lightening colour usage and potentially exploring a secondary brand colour, to reduce the amount of grey needed.

Brand Colour

During the redesign process, I found the lack of a secondary brand colour to be quite restrictive, which began to lead towards an overuse of orange. I researched other primarily orange brands, and felt inspired by the successful implementation of lighter blues alongside orange in brands such as Headspace.

I settled on a bright blue as the main secondary colour, with lightened and darkened hover and pressed variants.

Flight & Fare Selection

Presented in a row format with a limited number of options visible at once, the redesigned flight search interface follows a UI pattern similar to those used by Google Flights and Trainline, limiting results displayed by date and time.

Fare types are displayed in cards, with differences highlighted with illustrative icons.

Seats

A fixed key and a scrollable, interactive seat map present easyJet's three seat types.

Using three new colours inspired by existing website imagery, seat categories look clearer, brighter and bolder.

Baggage Options & Car Rental

Cabin bags and hold bags now exist together, side-by-side on the same page to enable easier, more confident decision making – no longer separated and out of sight of one another.

Personal Details

Side-by-side booker details and passenger details enable easy completion, alongside integrated insurance options for a simpler add-on experience.

Review & Pay

A dedicated flight review page, presents every chosen option and extra, providing the opportunity to check and edit details before proceeding. A higher level, more general overview summarises the booking before payment.

Trip Confirmation

Once payment is processed, a celebratory confirmation screen assures and confirms the booking.

Mobile Adaptation

Additionally, I chose to adapt a select few checkout pages to demonstrate how desktop layout might adapt to a smaller display.

Seat selection is split across two frames, enabling a full screen seat map to be displayed.

The flight details review is split into outbound and return, retaining the opportunity to view and check each detail before proceeding.