Skyscanner
3 Engineering Squads, 7 Product Managers and 5 Product Designers at variest levels
weeks
Lead Product Designer leading the vision and execution of design cross functionally on Flights, Hotels and Car hire.
The unification and redesign of five checkouts into one with horizontal alignment in Flights, Hotels and Car Hire.
When working with mutilple tribes creating a design strategy helped bring all our teams to a shared vision. It was key for the successful execution of the product redesign and helping make Skyscanner scalable for partners whilst reducing friction for travellers. The design strategy evolved over the course of the work.
As so many team members touched the checkout, I facilitated a Competitor Analysis workshop where I collaborated with Product Designers and Product Managers. Collectively we observed direct areas of interest like navigation, micro interaction, animation, information architecture and hierarchy. These were discussed and categorised into pros and cons of each Checkout Model type, from this I found a 'One Page' Checkout would provide the least friction for our Travellers and be easily tagged by our Data team.
There are industry standard Checkout Models, but I was keen to observe interaction style on each model, from gestures, transitions, selections and states. I wanted to ensure that Skyscanner traveller needs were considered and recorded so conducted a Heuristics Evaluation. Grading each checkout model against Skyscanner Traveller needs, this created an early feedback loop and supported in focusing on specific issues, like error handling.
From my evaluation I found a One Page Checkout with stateful panels to break out the different input sections performed best for our travellers. This was due to flights being a high ticket purchase with additional layers. Unlike a traditional checkout a Flights Checkout has several considerations for instance legal, itinerary, price breakdown and service design elements.
Checkout Types
Inline fields
Stateful panels
Accordion
Heuristic Evaluation: Focusing on interaction
At this stage I began designing various concepts using the One Page Checkout with stateful panels as a skeleton. Within my early explorations it became clear that ‘guidance’ for the traveller could be achieved with progressive disclosure. This progressive disclosure particularly used to reduce noise could be achieved by using transitions between each section - closing a section with inputted data to provide a summary then moving to the next section. I spent time discussing the direction with Product Designers in WIP (Work in Progress) sessions in their respective verticals to ensure I did not encounter a blind spot.
Design direction
%201.svg)
Exploration One
%201.svg)
Exploration Two
%201.svg)
Exploration Three
One of our goals was to demonstrate Total Cost of a booking with avoiding the exhaustive habit of filling out an entire checkout. From my data collected and existing Traveller behaviour I was aware that this caused friction when completing a booking, causing Travellers to book later which could be impacted by price change etc. My iterations were simply based on moving the ancillaries above the inputted fields. This would show the Total Cost of a flight with any ancillaries like baggage or seats. The significance for the traveller was high but discussing the feasibility with backend engineers it required more thought and influence to implement. So, after multiple catchups and deep dives with our supply team it was clear there was a dependancies with particular airlines and search criteria’s.
To demonstrate the value of the information architecture I showcased the reduction in time using prototyping. The average time was reduced by 1min 55secs when adding an ancillary before inputting any data. I compared this with the average time it takes to add an ancillary using our current checkout after inputting data. With the quickest and leanest method in mind, a quick whizz round the office I began testing with people not in technical teams, to prove or disprove my assumptions. The value in the reduction of time for travellers to view the total cost of their flight appeared to become paramount, and so the Supply team was convinced to change tac even with the heavy lift of backend engineering. We now had the opportunity to move the IA checkout around leading with ancillaries, creating a positive impact for our travellers.
Info Arch Before
Problem
Info Arch After
Impact
To achieve a reduction in clicks, cognitive load and discovering consistency I was committed to utilising two columns on our One Page Checkout. Fortunately, on web I had more than enough negative space to experiment with, thus it became imperative to create a clear focus and hierarchy within this space. Looking at our end to end experience Skyscanner is not alien to two columns making it a lean proposition - you'll find two columns on our fares page. A checkout however requires an additional layer of design, so ensuring the booking panel and price breakdown were sticky I was able to create a split screen keeping a point of convergence and focus but also provide the traveller centrefold. At this stage I conducted multiple rounds of user testing to analyse usability and performance, these insights, unknowns, truths were observed and shared back to the wider team.
Prototyping
User Testing Insights
One pager
Sticky Right Hand Panel
Sticky Header
Length of the page
During the design process it was a clear opportunity to add a Sticky Footer on mobile and apps, something which has been long awaited from our design team. Working across the org with several designers whose work also touched checkout in their respective verticals, it allowed me to prioritise particular problems and run focused design WIPs. One of which was ’focus’, where we all agreed that although a sticky footer has a multitude of concentrated benefits for our travellers, the summarised sections would play a more pivotal role in the overall experience.I made the decision to focus and design summarised sections and transitions rather than a sticky footer as the two could not be utilised at the same time. Considering our traveller base has a wide age range, areas like error handling and account detection could be prioritised better when created summarised sections. This in-turn reduced friction in the checkout journey.
Transitions
Sticky footer
Displaying clear sectioned summaries once content has been inputted is a key component of the checkout - it leant into the handholding approach, which was found to be positively received in the unmoderated user test. The summarised sections provided users feedback after they had inputted content, however it also reduced the amount of real estate the various sections took on the page. This in turn pushed all components into view especially for travellers who held an account with Skyscanner. However, ensuring the transition and motion from section to section was smooth, expanding the following section for further content to be inputted I worked closely with engineers. I spent a week improving their implementation, guiding them in appropriately defining all of the transitions and animations. I also spoke to them about the fundamental principles of excellent design.
User Testing Insights
Continue CTA
Expanding and collapse
Multiple Travellers
Booking completion
Skyscanner is a meta-data company and makes its revenue through partner clicks with an addition from ancillaries on Skyscanner's own checkout. An assumption was made on mobile web and apps, that introducing a new Checkout Model alongside an old interaction pattern (opening new screen to add an ancillary) for the short term would effect revenue negatively. In-order to de-risk the revenue impact my PM and I decided to run an A/B test, so I facilitated a workshop with Engineering which helped defined the impact vs effort for POC features we wanted to explore. Shaping the POC variants with engineering was key to implement a happy route with least effort and high impact for Travellers. The developers were then able to spike where there was any knowledge gaps.
Using Skyscanner’s own suite of experimentation platform Dr Jekyll, the Data team and Product Manager launched the A/B test on flights with 1 control and 1 variant on mobile web. This allowed us to test and observe attach rate and performance of ancillaries over a 10 day period, segmented too 100 travellers. The results we surprisingly positive results for the One Page checkout with stateful panels. It did not increase or decrease in attach rate - this result gave us the green light to continue iterating on the checkout with the intention to adjust the ancillaries interaction later in the roadmap.
POC Engineering Workshop
Variant 1
Variant 2
A/B Test Results
Our Design System, Backpack, had gaps and did not hold some more complexed components needed in the Checkout experience newer components like, covid response or messaging. I worked closely with the Backpack Designer and Engineers and our discussion consisted of the feasibility based on platform, development effort, risks and dependancies, ownership of build and implementation for each new component etc. I was able to work closely and integrate mutilple new components into the Backpack Design System which would help future proof and scale new partners.
Cell components
Body components
Implementation for Flights Checkout was been completed in 2021 and within three months of implementation, as a team we observed some interesting results. There was observations made on Desktop where there was a reduction of global checkout abandonment by -32%. Looking closely revenue per session grew and growth can be attributed to upturn in revenue from several EMEA markets. Revenue per session growth driven particularly by United Kingdom, Germany, France grew by 2% to £0.20 and Netherlands by 2.13% to £0.26, this helped drive conversion. Across iOS and Android we observed an uplift in overall attach rate by 20%.This brand-agnostic, simplified design was also very easy to apply to the different verticals Hotels and Car Hire, this helped accelerate cross-platform implementation.
Flights Checkout
Car Hire, Flights, Hotels unified checkout
Unauthenticated traveller
Authenticated traveller
