Portfolio Qantas Payment Widget

Qantas Payment Widget

Analysing the current state of the Qantas payment page — mapping customer problems, competitor benchmarks, and analytics to define a modular, omni-channel payment framework across web, mobile, and IoT touchpoints.

Qantas Payment Widget — Current State Journey Map
Role Experience Designer
Company Qantas
Platform Web & Mobile
Phase Discovery & Strategy
Overview

A payment experience that was costing Qantas customers time — and the business revenue

The Customer Problem

The payment step on Qantas takes a considerable amount of time and effort to complete. Increased cognitive load — caused by mandatory ancillary product options, overall page length, ancillary product incompatibility, inefficient payment detail entry, and a disjointed payment method experience — left customers frustrated at the most critical moment of the booking journey.

Customer feedback consistently surfaced confusion around payment options, high surcharges, and a lack of transparency in the pricing breakdown before committing to purchase.

"I don't understand what extras are being added — I just want to pay for my flight."

Qantas customer verbatim

The Business Problem

The payment step existed as duplicated, coded instances across multiple booking flows — generating significant technical complexity every time a new feature needed to be rolled out or optimised. With commercial opportunities for payment expanding well beyond the initial booking (loyalty, ancillary, post-trip), the existing architecture couldn't scale.

The business needed a single, modular payment framework that could be embedded contextually across the entire Qantas customer travel journey — on any device, at any touchpoint.

"The high surcharges for credit card payments are making customers choose other airlines."

Qantas customer verbatim

What the data revealed about the payment page

75%
of customers scroll to the bottom of the payment page
66%
Payment confirmation rate
79%
of customers use credit card most frequently
6.7%
Drop-off rate at the credit/debit card entry step
19.5% → 28.2%
Desktop to Mobile shift in payment completions
17.9% → 29.2%
Domestic to International booking growth
22.6% → 24.5%
OFT to Non-OFT payment method shift
42.3%
of total Qantas Digital payments occur on this page
Empathy Map

Inside the customer's head at payment time

Thinks & Feels

  • "Is this the best deal I can get?"
  • "Why are there so many extra charges?"
  • "I hope I haven't been charged extra already"
  • "I want to feel like I already made the right decision"
  • "Will I get confirmation after I pay?"

Hears

  • Advice from friends or family about booking flights online
  • Social media sentiment about Qantas pricing
  • Possibly utilising music or ambient noise at home
  • "Don't forget travel insurance — it's expensive!"

Pains

  • Confusing or hidden fees
  • Struggling across 9 steps — not being able to complete it
  • Not understanding what extras are necessary
  • Feeling pressured to purchase extras in a "funnel sales" managing

Gains

  • Smooth and secure transaction
  • Confidence in selecting the right options
  • Assurance of no post-purchase surprises
  • Transparent breakdown of total cost
  • Feeling in control of the purchase process

Discovery approach — from current state to future framework

01

Current State Audit

Mapped the existing payment flow end-to-end, documenting every friction point, mandatory field, and ancillary product insertion. Created a current-state journey map covering 5 stages from booking page entry through to post-payment confirmation.

02

Customer Research

Synthesised customer verbatim, NPS feedback, and session analytics to build an empathy map identifying what customers think, feel, hear and say during the payment step — with a clear pain/gain breakdown driving prioritisation.

03

Competitor Benchmarking

Analysed payment experiences across Singapore Airlines, Virgin Australia, Qatar Airways, Emirates, KLM, Lufthansa, and United against the Baymard Institute's payment form guidelines — identifying best-practice patterns and gaps in Qantas's current approach.

04

Vision & Strategy

Defined a modular Payment Framework vision: a consistent, contextually embeddable payment experience supporting native mobile, embedded web, single-click purchasing, and server-side payment microservices — backed by a Qantas Figma Payment Library.

Key Work

The full payment widget flow — wireframed end to end

Each screen in the payment journey mapped out with annotated sticky notes — from flight selection and ancillary options through payment method entry, review, and post-purchase confirmation. The wireframe flow surfaced structural problems with the existing layout and became the foundation for the new modular framework.

Qantas payment widget wireframe flow

Heuristic evaluation against industry best practice

Each screen and interaction in the existing payment flow was evaluated against Baymard Institute payment form guidelines and internal UX heuristics. Issues were colour-coded by severity and mapped to specific design opportunities — giving the team a prioritised, evidence-based brief for the redesign.

Qantas payment widget design audit
Competitor Analysis

How the world's leading airlines handle payment

Singapore Airlines

Clear placement of CTA (Pay Now) at the top of the page. Payment Widget at a fixed level and size on the page — consistent across devices. Inline error handling and immediate feedback at field level.

Virgin Australia

A dedicated payment page with a clean, focused layout. High level entry — streamlined flow with minimal distractions and a clear pricing summary visible throughout the payment step.

Qatar Airways

The security indicator is displayed beside the Smart Frame payment form. Dedicated confirmation page follows payment — builds trust and clearly communicates next steps to the customer post-booking.

Emirates

Differences between Payment types (EFTB, FOP) handled clearly. Clear, inline error states. Uses 'Pay Now (AED)' button — explicit currency confirmation reduces customer uncertainty at the final click.

KLM

No checkout fees are advertised upfront — total price transparency from search through to payment. Customers see the final price inclusive of all surcharges early in the funnel, reducing friction at checkout.

United

A dedicated page focused on payment — no ancillary distractions at the payment step. Streamlined flow that respects the customer's time and reduces the cognitive load of completing the transaction.

A payment framework built for every Qantas touchpoint

The Framework Vision

A Payment Framework that enables Qantas to deliver a modular and fragmented — yet cohesive and consistent — payment experience for accepting and managing payments across all Qantas Digital touchpoints. The framework can consistently adapt to its requirements and personalise for each end-user, whether they're booking on a browser, a native app, a watch, or another IoT device.

Technically, the Framework extends the current single-entry journey to support 'One-click' purchasing — and by adding further fragments, enables greater payment management functionality across the entire customer travel journey.

Product Goals

  • 1A well-tested suite with a Qantas Payment Figma Library as the single source of truth for all payment UI components
  • 2Support native mobile in-app payment experiences across iOS and Android
  • 3Support embedded web 'Single Click' pay buttons for contextual purchasing moments
  • 4Deliver contextual payment experiences across all supported platforms — web, mobile, and IoT
  • 5Deliver payment microservices API and server-side payment management infrastructure
Outcomes

Impact & results

1 Framework
All Touchpoints
A single modular payment framework replacing duplicated, flow-specific implementations across Qantas Digital — enabling consistent experiences on web, mobile, and IoT
7
Competitors Benchmarked
Singapore Airlines, Virgin Australia, Qatar Airways, Emirates, KLM, Lufthansa, and United analysed against Baymard payment best practices
5 Stages
Journey Mapped
End-to-end current-state experience map covering booking entry through post-payment confirmation — with pain points, emotional states, and design opportunities at every stage
← Back to All Projects Next Project → CommBank Travel Hub