Skip to main content

KONA Website Booking Process – New Design

I’m thrilled to share my new design for the KONA website’s booking process! 🚀 I’ve divided it into four clear stages:

  1. Select Date
  2. Choose Tickets
  3. Booking Information
  4. Review & Pay

My goal was to make it clean, user-friendly, and visually appealing while maintaining a seamless user experience.

📌 Step-by-Step Breakdown​

Below, I’ve broken down each step and included a text-based mock-up to help visualize it.

💡 Why This Change?​

I believe that switching from a single-page format to a step-by-step booking process will:

  • Enhance user experience
  • Reduce cognitive load (fewer fields at once = easier booking)
  • Boost conversion rates

This new approach will make booking smoother, faster, and more intuitive for our users. 🎟️✨

Step 1: Select Your Visit Day​

🔹 Purpose: I want users to pick their visit day using a calendar that shows availability with color coding (red for fully booked, green for available, etc.), just like we have now.

Layout:​

  • Top: A progress bar showing "1. Select Date" highlighted, with "2. Choose Tickets," "3. Booking Information," and "4. Review & Pay" grayed out.
  • Middle: A calendar grid displaying dates (green = available, red = fully booked).
  • Bottom: A green "Next" button to proceed.

Styling:​

  • White background
  • Green for available dates and the "Next" button
  • Yellow accents in the progress bar for the active step

Text-Based Mockup:​

[✅ 1. Select Date] --- [2. Choose Tickets] --- [3. Booking Information] --- [4. Review & Pay]

| March 2025 |

SunMonTueWedThuFriSat
12
3456789
10111213141516
17181920212223
24252627282930
31

[Next]

Step 2: Choose Tickets​

🔹 Purpose: Here, I want users to select ticket types (Family, Couple, Individual) and specify the number of guests (Male, Female, Junior, Kid), with a live price update as they go. (Same As We Currently Have).

Layout:​

  • Top: Progress bar with "1. Select Date" marked complete (✅) and "2. Choose Tickets" highlighted.
  • Middle:
    • Three ticket options as radio buttons/cards (Family, Couple, Individual).
    • Guest selection with plus (+) and minus (-) buttons.
  • Bottom: A "Back" button (yellow outline) and a green "Next" button.

Styling:​

  • Green buttons
  • Yellow highlights for selected options
  • White background

Text-Based Mockup:​

[✅ 1. Select Date] --- [✅ 2. Choose Tickets] --- [3. Booking Information] --- [4. Review & Pay]

Choose Ticket Type:
[ ] Family [ ] Couple [✅] Individual

Number of Guests:
Male: [-] 1 [+]
Female: [-] 0 [+]
Junior: [-] 0 [+]
Kid: [-] 0 [+]

[Back] [Next]

Step 3: Booking Information​

Layout:​

  • Top: Progress bar with "1. Select Date" and "2. Choose Tickets" marked complete (✅) and "3. Booking Information" highlighted.
  • Middle: A form to collect guest details.
  • Bottom: A "Back" button (yellow outline) and a green "Next" button.

Text-Based Mockup:​

# Booking Information

## 🏅 **ahmad Dalao (You)**

### Personal Information

- **First Name:** `ahmad`
- **Last Name:** `Dalao`
- **Email:** `ahmodmyd@gmail.com`
- **WhatsApp Number:** 🇸🇦 `+966 55 352 7880`

---

## 👩 **Woman 1**

### Personal Information

- **First Name:** _(Enter your first name)_
- **Last Name:** _(Enter your last name)_
- **Email:** _(Enter your email address)_
- **WhatsApp Number:** 🇸🇦 _(Enter your number)_

[Back] [Next]

Step 4: Review & Payment​

🔹 Purpose: Display a summary of the booking and finalize payment.

Layout:​

  • Top: Progress bar with all steps ("1. Select Date," "2. Choose Tickets," "3. Booking Information," "4. Review & Pay") marked complete or highlighted.
  • Middle: A summary of booking details, including:
    • Selected Date (e.g., March 15, 2025)
    • Ticket Type (e.g., Individual)
    • Guests (e.g., Male 1, Female 0, Junior 0)
    • Total Cost (e.g., $550)
  • Bottom: A "Back" button (yellow outline) and a green "Proceed to Pay" button.

Text-Based Mockup:​

[✅ 1. Select Date] --- [✅ 2. Choose Tickets] --- [✅ 3. Booking Information] --- [✅ 4. Review & Pay]

Review Your Booking:
Selected Date: March 15, 2025  
Ticket Type: Individual  
Guests: Male 1, Female 0, Junior 0, Junior 0, Kid 0  
Total Cost: $550

[Back] [Proceed to Pay]

Expected Impact​

Lower Bounce Rate: From ~55-60% → 35-40%
Faster Booking Time: From ~3-4 mins → 2-3 mins
Higher Completion Rate: ~20-30% increase in bookings

Why I’m Excited About This​

I think this step-by-step approach will make the booking process feel less overwhelming, keep users engaged, and hopefully lead to more completed bookings.

💡 What do you think—any tweaks you’d suggest? 🤔