Overview

The latest enhancements to the Online Booking Engine (OBE) bring significant improvements to the booking experience for both customers and operators. Designed with a mobile-first approach, the updated OBE ensures a seamless and intuitive booking process across all devices—whether on a desktop, tablet, or smartphone.

With a modernized design, improved navigation, and enhanced functionality, the OBE simplifies the booking journey while maintaining a clean and user-friendly interface.

This article will guide you through the key changes and improvements we've been working on behind the scenes for the booking engine.

What’s Covered in This Article:

(Click a topic to jump to that section.)

• User Interface Updates
• Calendar Enhancements
• Passenger Selection Updates
• Streamlined Addons Screen 
• Shopping Cart Improvements
• Checkout Enhancements
• Customer Profile 
• Transportation Booking Flow Upgrades

Why We Upgraded the Online Booking Engine

At Zaui, we’re always looking for ways to enhance the booking experience for both operators and customers. With more travelers booking on the go, we prioritized a mobile-first redesign, ensuring a smooth and effortless experience on any device.

The upgraded OBE delivers:
✅ A refreshed, intuitive interface
✅ Better usability across mobile, tablet, and desktop
✅ Faster, more efficient booking flows

Whether customers book from their phone or desktop, the experience remains consistent, optimized, and hassle-free.

Key Enhancements 

Here are some of the most exciting upgrades you’ll experience in the new OBE:

• A Sleeker, More Consistent Design – The interface now has a cleaner layout, rounded edges, and a fluid design that adapts seamlessly to any screen size.
• Smarter Date Selection & Pricing Visibility – Customers can now see pricing per day directly in the calendar, making it easier to compare dates and choose the best option.
• Streamlined Shopping Cart & Checkout – Promo codes and gift certificate fields are now always visible, reducing friction in the checkout process.
• Enhanced Transportation Booking Flow – The new "+Add Return" button simplifies round-trip selections, and an improved results view helps customers make informed travel decisions.
• Customer Accounts for Faster Booking – Customers can now create and log into accounts, making repeat bookings easier and allowing them to manage their reservations more efficiently.

User Interface Updates

• Mobile-First Responsive Design – The OBE is optimized for all devices, ensuring a seamless experience whether customers book from their phone, tablet, or desktop.
• Rounded Image Corners – All images now have rounded corners for a sleek, modern look.
• Fluid Layout – The activity selection page now features a unified background, replacing the previous separate grey sidebar for the calendar and passenger selection. This creates a more consistent and visually appealing interface.

Calendar Enhancements (for Standard, Interval, Ticket & Rental Activities)

The upgraded calendar introduces several usability and clarity improvements:

• The current date is always highlighted for easy reference.
• Sold-out and past dates are now marked with a slash instead of just a greyed-out number, making it clearer that they are unavailable.
• The calendar automatically updates the displayed price based on the number of selected passengers. For example, if one adult costs $100, selecting two adults will adjust the price to $200. This real-time pricing visibility helps users compare costs across different dates without extra clicks.

Passenger Selection Updates

The passenger selection interface now features a more rounded and visually appealing design.

Streamlined Addons Screen 

Meal preferences, pricing options, and additional products now appear on a separate page after selecting the date and passenger count and clicking "Add to Cart." This change reduces visual clutter and keeps the booking page clean and focused

Shopping Cart Improvements

• The Promo Codes box is now always visible in the shopping cart view, eliminating the need to expand it. This allows customers to enter a promo code and immediately see the adjusted price before proceeding to checkout.
  
• To make it easier to browse and add more activities, we’ve moved the ‘Continue Shopping’ button to the top and given it a standout colour.
  
  

Checkout Enhancements

• Promo Codes and Gift Certificates are now clearly visible as text fields rather than being hidden behind expandable sections.
• The "Review Your Booking" section allows customers to edit individual activities before finalizing their purchase. Customers will be guided to the specific activity they want to change. Once a change is made, the "Continue" button changes to "Update Cart" instead of "Add to Cart," ensuring a smooth checkout experience even when revisions are needed.
• If multiple activities are in the cart, the most recently added one is expanded by default, while others remain collapsed.
  

New! Customer Profiles & Login

• Customers can now log in during checkout. If they don’t have an account, they can create one by checking the "Create Account" box after entering their details.
• This allows customers to save time on future bookings and manage reservations more easily.

Transportation Booking Flow

Round Trip vs. One-Way Selection

• • By default, all transportation bookings are set to one-way.
  • Customers can easily book a round trip by selecting the "+Add Return" button next to the travel date.
  • Clicking this button will open a mobile-friendly calendar, allowing users to choose their return trip date seamlessly.

New! Calendar Bar 

A new date selection calendar has been added for easier date selection. 

At a glance, customers can see:

• • One day before and after the selected date on mobile and three days before and after for desktop.
  • The lowest price available per day.

Expanded Travel Details

We’ve also enhanced how travel details are displayed for better decision-making.

• Clicking a route expands the travel details, showing:
  • The complete route with stops (if enabled).
  • Any available amenities.
• Users can add a route to the cart by clicking the shopping cart icon (visible whether route details are expanded or collapsed) or the Select button when details are expanded depending on your desired booking flow.

Booking Summary & Modifying Search Results

Customers can adjust their search criteria anytime by clicking the Modify Search button at the top of the results page.

This returns them to the input fields where they can update their: 

• Starting point
• Destination
• Travel date

Clicking Continue takes customers to the Additional Products page, where they can select any connected products linked to the chosen route(s).

1. Do I need to make any changes to enable the new Online Booking Engine?

No, the upgraded Online Booking Engine will be applied automatically. You don’t need to take any action to enable the new features. However, we recommend reviewing the updates to familiarize yourself with the changes.

2. Will my customers need to create an account to book online?

No, customers can still complete a booking without creating an account. However, logging in allows them to save their information for faster checkouts and manage their reservations more easily.

3. How does the new pricing display on the calendar work?

The calendar now shows pricing per day, and it updates dynamically based on the number of passengers selected. This helps customers compare rates across different dates without extra clicks.

4. What if a customer wants to modify their booking after checkout?

Customers with an account can log in to view and manage their existing bookings. Guests who do not have an account can select the three dots and choose "My Bookings." By entering their booking reference and last name, they can edit their bookings. Edits can only be made within the threshold rules set in your system and in accordance with your cancellation policy.

5. Can I customize the appearance of the new Online Booking Engine?

Yes, the OBE still supports branding customization, including colours and font which can be found in the portal settings. If you have specific customization needs, contact support for assistance.