Streamlining Trip Bookings: Enhanced Payment Communication and 'My Bookings' Clarity

Ever booked a trip and then wondered if your payment went through, especially for offline methods like cash? In the Estrella Tour project, we've tackled this common user frustration head-on by refining our booking confirmation flow and enhancing the 'My Bookings' section for better clarity.

The Challenge

Our existing system for trip bookings presented two primary user experience challenges:

1. Ambiguous Cash Payment Status: When users selected cash payment, there was no immediate, clear communication about the status of their booking. They might receive a seat reservation, but the final payment confirmation was delayed, leading to uncertainty.
2. Cluttered Booking History: The 'My Bookings' section displayed all past and upcoming trips without distinction, making it cumbersome for users to quickly find their relevant future travel plans.

The Solution

We implemented a two-pronged approach to address these issues, focusing on transparent communication and intelligent data presentation.

Two-Stage Email Confirmation for Cash Payments

For bookings made with cash payment, we introduced a two-stage email notification system:

1. Initial Pending Payment Email: Immediately after booking with a cash payment option, the user receives an email confirming their seat reservation and explicitly stating that payment is pending.
2. Final Confirmation Email: Once an administrator manually marks the payment as received, a separate, definitive confirmation email is dispatched, reassuring the user that their booking is fully paid and confirmed.

This separation ensures users are always aware of their booking status, reducing anxiety and support queries. Here's a simplified illustration of how a payment status might trigger different email types:

enum PaymentStatus { PENDING_CASH, PAID_CONFIRMED, ONLINE_PAID }

function sendBookingEmails(booking: { userId: string, tripId: string, status: PaymentStatus }) {
  switch (booking.status) {
    case PaymentStatus.PENDING_CASH:
      sendEmail(booking.userId, 'Your Seat is Reserved – Payment Pending', '...');
      break;
    case PaymentStatus.PAID_CONFIRMED:
      sendEmail(booking.userId, 'Your Booking is Confirmed!', '...');
      break;
    case PaymentStatus.ONLINE_PAID:
      sendEmail(booking.userId, 'Your Booking is Confirmed!', '...'); // Similar for online
      break;
    default:
      console.log('No email needed for this status.');
  }
}

Intelligent 'My Bookings' Display

To declutter the 'My Bookings' section, we refined the data retrieval and presentation logic:

1. Filtering Past Trips: Only upcoming or currently active trips are displayed by default, giving users a clear view of what's relevant to them now.
2. Ascending Order by Departure Time: The remaining upcoming trips are sorted by their departure time in ascending order, ensuring the most imminent trips are always at the top.

This simple refinement significantly improves usability. Conceptually, the logic for filtering and sorting might look like this:

alert("Hello, World!");
interface Trip {
  id: string;
  name: string;
  departureTime: Date;
  isPast: boolean; // Derived or explicitly stored
}

function getUpcomingTrips(allTrips: Trip[]): Trip[] {
  const now = new Date();
  return allTrips
    .filter(trip => trip.departureTime > now) // Filter out past trips
    .sort((a, b) => a.departureTime.getTime() - b.departureTime.getTime()); // Sort by time
}

Key Decisions

• Granular Communication: Opting for a staged email process for cash payments provides users with timely and accurate updates, managing expectations effectively.
• User-Centric Display: Prioritizing upcoming and relevant information in 'My Bookings' directly addresses user pain points regarding information overload and improves navigation.

Results

These updates have led to a more confident and streamlined booking experience for users. The clear communication reduces follow-up inquiries, and the intuitive 'My Bookings' section makes managing upcoming travel plans effortless.

Lessons Learned

When designing user flows, especially those involving financial transactions or personal schedules, clarity and timely feedback are paramount. Analogous to a clear flight status board at an airport, presenting information precisely when and how a user needs it can dramatically improve their overall experience and trust in the system. Always prioritize clear communication and intuitive data presentation in your applications. A little clarity goes a long way in building user trust and improving the overall experience.

Generated with Gitvlg.com