Client guide
Boat events page
tutorial
This page lets customers browse shared-ticket boat events, filter by vibe, duration, remaining seats, price, date, time of day and location, then open an event card to join.
Ticketed events
Vibe filters
Seats left
Halal-friendly
Private charter CTA
Boat events page · Ticketed event discovery
Hero section introduces the shared boat event marketplace.
Filter bar lets customers narrow the events by vibe, duration, spots left, maximum price and location.
Date and time strip can help customers filter by event date and time of day when it is shown.
Event cards show image, video preview where available, date, title, departure, highlights, seats left, price and join button.
Clicking the event image or card body opens the event detail page.
Private charter call-to-action appears at the bottom for customers who want a private boat instead of joining a shared event.
What customers see
Shared boat events
Join a boat day
without hiring the whole boat
Browse upcoming harbour events by vibe, date, seats and price.
CuratedFixed timeFrom price
EVENT IMAGE✦ BookMyWave18:00 – 21:00★ 4.8 · 12
Sat, 27 Jun
Sunset Harbour Social
⌖ King Street Wharf
✓ Harbour views✓ Shared social cruise
Boat events page · Hero section
Eyebrow label appears above the main title with a people icon.
Main title uses a large display style and can include an emphasized second line.
Subtitle explains the purpose of the shared event page.
Hero pills highlight key benefits such as trusted events, set time and price guidance.
Hero preview
Shared boat events
Join a boat day
without hiring the whole boat
Browse upcoming harbour events by vibe, date, seats and price.
Curated eventsSet timesFrom price
Boat events page · Vibe filters
All shows every available boat event.
Casual filters for relaxed social events.
Morning tea filters for lighter daytime experiences.
Lunch filters for lunch-style events.
Sunset filters for evening or sunset-style cruises.
Birthday filters for birthday-style events.
Corporate filters for work or business-style events.
Romantic filters for couple or romantic events.
Memorial filters for remembrance-style events.
Halal filters for halal-friendly events.
The selected chip turns blue.
Vibe chips
AllCasualMorning teaLunchSunsetBirthdayCorporateRomanticMemorialHalal
Boat events page · Dropdown and price filters
Duration filter includes All, up to 2 hours, around 4 hours, and 5+ hours.
Spots filter includes All, at least 1 spot, at least 2 spots, 3–4 spots, and 5+ spots.
Maximum price field lets customers enter the highest price per person they want to see.
Dollar prefix appears inside the price field.
Location filter lists available event locations and includes All locations.
Clear filters button appears only when at least one filter is active.
The clear button shows the number of active filters and resets all filters when clicked.
Filter bar becomes shadowed when sticky, making it clear that it is staying at the top while customers browse.
Boat events page · Date and time strip
Date strip shows event dates when enabled on the page.
Each date tile shows weekday, day number and month.
Dates with events show a small dot.
Selected date tile turns dark. Clicking it again clears the date filter.
Selected date scrolls into view inside the date strip.
Time chips include All, morning, afternoon and evening.
Morning shows events before midday. Afternoon shows events from midday before 5pm. Evening shows events from 5pm onward.
Date and time strip
AllMorningAfternoonEvening
Boat events page · Event cards
Click the image area to open the event detail page.
Click the card body to open the same event detail page.
Event image fills the top of the card.
Event date shows either the event date or “multiple dates” when there are several available dates.
Image warning line appears under the date as a small note.
Event title uses the customer’s current language when available, falling back to English when needed.
Departure location appears with a location icon when available.
Seasonal location can appear when the current month matches a seasonal location entry.
Highlights show up to three short checklist items.
Join button appears at the bottom right of the card.
Event card layout
EVENT IMAGE✦ BookMyWave13:00 – 16:00
Multiple dates · 3
Image note
Harbour Lunch Cruise
⌖ Darling Harbour
⌖ Summer location: Manly
✓ Lunch included✓ Harbour route✓ Shared table vibe
Boat events page · Card badges
BookMyWave creator badge appears when the event is created by BookMyWave.
VIP member creator badge appears when the event is created by a VIP member and can show the creator name.
Verified badge appears when the event is verified.
Time badge shows the event start and finish time.
Rating badge shows star rating and review count when rating is available.
Halal-Friendly badge appears when the event is marked halal-friendly.
Alcohol-Free badge appears when the event is marked alcohol-free.
Badge examples
EVENT IMAGE✦ BookMyWave18:00 – 21:00Verified★ 4.8 · 12
EVENT IMAGEVIP MemberAlcohol-Free☪ Halal-Friendly
Boat events page · Seats and urgency
Seat dots show a simple visual of capacity and taken spots.
Filled dark dots represent taken spots.
Light dots represent remaining spots within the displayed seat-dot preview.
If capacity is above 12, the card shows an extra “+” count beside the dots.
Spots-left badge changes wording and colour based on how many places remain.
Critical urgency appears when only one or two places remain.
Low, medium and good urgency appear when more places are available.
Minimum seats badge appears when customers must buy more than one seat.
Seat indicators
Minimum 2 seats
Boat events page · Price and join
From label appears before the event price.
If the event has price tiers, the card shows the lowest available tier price.
If no price tiers are shown, the card uses the event’s per-person price.
Price unit explains the price is per person.
Join button opens the event detail page so the customer can select seats and continue.
Boat events page · Image and video preview
Each event card has a main image.
If a moving preview is available, it plays when the customer hovers over the image on desktop.
On mobile, the moving preview can play when the card is visible on screen.
The preview is muted and loops so it works like a short visual teaser.
When the card is no longer active, the preview stops and resets to the beginning.
Image behaviour
IMAGE / MOVING PREVIEWHover or scroll into view
User experience: still image first, moving preview only when the card is being viewed closely.
Boat events page · Loading, error and no-match messages
Loading message appears with a spinner while events are being loaded.
Error screen appears with a warning icon, title and message when events cannot be loaded.
No events screen appears when there are no upcoming events at all.
No matching events screen appears when events exist but the selected filters hide all of them.
Clear filters link appears inside the no-match message and resets filters.
Footer note appears when results are shown and tells customers how many upcoming events are visible, with a price note.
Notice examples
Loading events...
⚠️
Unable to load events
Please try again.
⚓
No matching events
Try clearing your filters.
Boat events page · Mobile layout
Hero text becomes smaller for phone screens.
Vibe chips scroll horizontally so customers can swipe through them.
Dropdown filters also scroll horizontally when there is not enough width.
Event cards become one column on mobile.
Private charter section stacks vertically and the button becomes full width.
Mobile-style layout
Join a boat day
today
Swipe filters and open a card.