Context

The Skyscanner checkout experience presented several key challenges from a product design perspective. The existence of five separate checkouts for flights, hotels, and car hires created inconsistencies and inefficiencies for users. Each checkout model had unique friction points, including issues with navigation, micro-interactions, animation, information architecture, and hierarchy. The existing design did not adequately address Skyscanner's specific user needs, particularly in areas like error handling and clearly displaying the total booking cost upfront. This lack of transparency often led to traveller frustration and booking delays.

Solution

To improve the user experience, Skyscanner's checkout process was completely redesigned with a focus on creating a single, unified, and transparent process.

Action & build

This streamlined approach simplified booking across all product offerings by consolidating five separate checkouts into one intuitive flow a 'One Page' Checkout with stateful panels and progressive disclosure techniques with smooth transitions and animations was implemented to minimise friction and cognitive load for the traveller. After a heuristic evaluation and several user tests were completed. The direction addressed the IA of the checkout, notably providing a clear breakdown of all costs without requiring exhaustive user input.