Case Study: Solving the Travel Payments Experience, A Journey of Delight and Conversion

Introduction

In the fast-paced world of online travel booking, every second counts. As a Product Experience Designer at Cleartrip, I embarked on a mission to enhance the payments experience and tackle a pressing issue: a staggering 45% drop-off rate during the payment process. By addressing the lack of coupon confirmation, information hierarchy, trust markers, and fare breakup visibility, I aimed to in-still trust, motivation, and convenience into the hearts of our users. Join me on this amusing journey of transformation and innovation!

Step 1:

Competitive Analysis and Research Before diving into the redesign, I delved deep into the realm of online travel platforms. Through an extensive competitive analysis, I discovered valuable insights, inspiring ideas, and potential pitfalls. Understanding the strengths and weaknesses of our competitors allowed me to craft a unique payments experience that would stand out in the crowd.

In order to benchmark any payment experience I defined primary building blocks.

Building Blocks: An ideal payment experience while booking a flight/hotel (high ticket item) should be designed primarily for the below

1. Trust: A user would only come back to us if we build trust in the first place and we should look upto designing for trust that mean a user should have a clear communication about the price value, see if the experience is met to their needs and expectations and if they have absolute control in their payment journey.
2. Flexible: With multiple payment options while we should help the user with decision making we should also aim to provide every possible payment option for a user to complete their payment.
3. Transparent: In the times where a user can be considered media literate we should aim to solve for data literacy. This means we should design for pillars as: Explain what data we collect, why we collect it, and how it helps a user, Allow our users to opt into data collection, rather than opting out of it, Examine and consider how bad actors could use our system. Then prevent it, prepare for it, and be ready to react in real time if it happens.
4. Frictionless: While we understand that a user has already been through a lot of steps in their journey so far before coming to the payment page we should aim to reduce the friction wherever possible for a user on the page itself.
5. Intutive: High affordances in form factors, communicating usability through motion design, connecting the interface with real world elements could foster quicker decision making for users.

In order to benchmark each competitor I understood the groups of information that would make a Payment Page and based on the usage these information groups could make or break the experience for the above mentioned building blocks.

The Information groups here would be:

• Trip Summary
• Price breakup
• Coupon applied confirmation
• Final Price
• Hidden Charges
• Defined Icons and Logos

Breakdown of screen as per the necessary data points

Break down of products from non flight category

Step 2:

The Design Process To ensure a well-structured and user-centric redesign, I followed a meticulous 5-step design process: research, ideation, prototyping, testing, and refinement. Each step allowed us to iterate and fine-tune our approach, making the end result a testament to user satisfaction and conversion.

With the research I was able to figure out the factors that contributed to a broken UX.

While I thoroughly studied CT’s payment experience I also dived and looked into the various flows of other products in the market.

Summary of the Highlights and Lowlights of the selected players

User flow analysis of various payment options

Breakdown of the existing payment experience

Step 3:

Reinventing the Payments Journey The existing payments journey required a makeover to reduce decision-making time and increase the booking percentage. We streamlined the flow into a linear process, removing unnecessary distractions and complexities. The introduction of contextual Calls to Action (CTAs) throughout the journey replaced the overwhelming global CTA at the sticky bottom, offering users a seamless experience with clear direction at every stage.

I iterated a lot of user flows before coming to a linear contextual CTA approach.

Flow with a global CTA

Global CTA Flow

Step 4:

Feedback Loop for User Insights To better understand the pain points that led to drop-offs, we introduced a novel approach — requesting user feedback every time they abandoned the payment process. This invaluable data helped us uncover hidden issues, address user concerns, and refine our design decisions. By actively listening to our users, we transformed their frustrations into opportunities for growth and improvement.

Step 5:

In our quest to enhance the payments experience at Cleartrip, we introduced a new feature along with a clean and functional UI: Scan to Add Card. Understanding the urgency and time sensitivity of flight bookings, we recognised that every second counts. With flight prices fluctuating frequently, users were at risk of missing out on their desired flights due to delays in payment. By enabling users to swiftly add their card details through scanning, we minimised the risk of missed opportunities. This efficient solution empowered users to secure their bookings promptly, ensuring they could take advantage of the best available fares.

Fresh UI and Scan to add card with external Nudge

Step 6:

Triggering Payments with Irresistible Offers Understanding the psychological triggers that influence user behaviour, we strategically showcased enticing offers at the very first view of the payments page. By creating a sense of urgency and excitement, we motivated users to proceed with their bookings, transforming the payments experience into a delightful opportunity to save and explore more.

Coupon applied confirmation and External trigger as “Instant Cashback”

Metrics tracked

While we created this journey after a lot of research and user insights, we also wanted to test our design hypothesis and so did a User Testing for certain metrics such as:

• Conversion Rate
• Abandonment Rate
• Time to Complete Payment
• Coupon Redemption Rate

Conclusion:

Through a journey of in-depth research, innovative design thinking, and constant user feedback, we revolutionised the payments experience at Cleartrip. By confirming coupons, enhancing information hierarchy, instilling trust, providing fare breakup visibility, simplifying decision-making, and introducing convenient features like Scan to Add Card, we crafted an experience that captivates users and boosts conversion rates. The power of user-centric design lies not only in its ability to solve problems but also in its capacity to delight and inspire. Together, we can shape the future of online travel, one joyful payment at a time.