ONSENHot Pools & Day SpaWireframe

Onsen booking UX

Audit, new flow and handoff

Everything in the prototype was read from the live IBIS booking iframe (book.onsen.co.nz) and the onsen.co.nz experience pages on 4 November 2026, using code only. No bookings were made and nothing was added to a cart.

What gets in the way today

1
Seven separate booking widgets. Each experience page embeds its own IBIS iframe (filters prodgroup-ultimate, prodgroup-original, prodgroup-serenity, prodgroup-oval, TriExp, prodgroup-treat, prodgroup-charity). Comparing options or switching when a time is full means leaving and loading another page.
2
Price arrives last. Nothing is priced until a time is picked. On soak-only bookings a custom script hides the unit price, so the per hot pool tiers ($122, $180, $225, $260) are never explained inside the flow.
3
Treatment length is hidden, then mixed. The product dropdown is hidden with CSS (.departures-selector-product { display: none }). The grid then mixes 60, 90 and 120 minute sessions, distinguished only by a small "60mins / 90mins / 120mins" label in each cell. Soak cells just say "Book now".
4
Labels rewritten after load. The guest selector is built as "Number of Pools" and relabelled by script per page ("Number of Experiences (based on twin share)", "Number of Guests", "Number of Pool Rooms"). The shuttle then asks for a number of people again, 0 to 9.
5
Treatments as quantity maths. Each room shows 6 to 13 dropdowns (0, 1, 2) that must add up to exactly 2 for twin share. If they do not, Add to cart is silently disabled.
6
Add-ons look broken. Platters show a quantity of only 0 until a treatment is chosen, with no explanation.
7
A grid of "Fully booked". A 5-day table navigated with arrows. Across 9 scanned windows: Oval Onsen Soak Only had 73 bookable cells against 382 full, Pool for Charity 0 of 315. There is no next-available jump.
8
Rules live outside the widget. Age limits (16+, 18+, evenings 12+) and child pricing hours (5–11, 9am to 4:45pm) sit on the WordPress page. The widget relies on guests having read them.
9
Fixed-height iframe. The iframe is 1000px tall (600px on Treatment only and Pool for Charity) inside a scrolling page, giving double scroll on mobile and clipped content.
10
One slot at a time. Combining experiences (Tri-Bathe then a treatment, or a group across an Original and an Oval hot pool) means repeating the whole flow on each page, and the shuttle is requested per booking.

The new flow

Today

  1. Pick one of 7 experience pages
  2. Read the rules on the page
  3. Set "Number of Pools" and shuttle people
  4. Scan a 5-day grid for a cell that is not full
  5. Pick quantities from up to 13 dropdowns
  6. See a price for the first time
  7. Add to cart, repeat on another page for anything else

Proposed

  1. Say who is coming. Every option shows its price and fit for this group
  2. Choose an experience, or a suggested combination
  3. Confirm guests and treatment length
  4. Pick a day from an availability calendar, then a time
  5. Choose a treatment per guest from cards
  6. Add platters and notes
  7. Review the visit, add more, add the shuttle once
  8. One checkout screen

Design notes

Switch on "UX notes" in the prototype to see these in place.

  1. Ask who is coming, once, up front. Group size and whether children are coming are captured before anything else. Every experience card then shows the price for this group and whether it fits, instead of guests finding the limits after they pick a time.
  2. Show the price for this party. Totals use the real tiers (an Original hot pool is $122 for 1, $180 for 2, $225 for 3, $260 for 4). Today the widget hides the unit price for soak-only bookings and only shows a total after a time is chosen.
  3. No dead ends. When an experience cannot take the group, the card says why and offers a combination that works, in one tap. Example: 3 guests on Original Onsen + Treatment becomes twin share for 2 plus Oval Onsen + Treatment for 1.
  4. Rules where the decision is made. Age limits, twin share, child hours and evening rules sit on the card. Today they only appear on the WordPress page, and the widget enforces twin share by silently disabling Add to cart.
  5. Choose the treatment length before the time. Guests pick 1, 1.5 or 2 hours first, so every time shown is bookable for them. The live grid mixes 60, 90 and 120 minute sessions in one table and the length selector is hidden with CSS.
  6. A calendar that shows availability. Each day is marked open, limited or full, with a jump to the next available date. This replaces a 5-day grid where most cells read "Fully booked".
  7. Times grouped by part of day. Morning, afternoon and evening (lantern light from sunset). Low stock is shown honestly. Evening sessions are locked with a clear reason when children 5–11 are booked, instead of failing later.
  8. Full day? Waitlist plus alternatives. If nothing is left, offer the waitlist and the other experiences that still have times on that date, keeping the date and group.
  9. One treatment card per guest. Each guest picks from cards showing price, length and nut and pregnancy notes. This replaces 6 to 13 quantity dropdowns (0, 1, 2) that had to add up to exactly 2.
  10. Add-ons after the main choice. Platters use steppers capped at the number of guests (the same limit IBIS enforces) with a running total. Today they show a quantity of 0 until a treatment is chosen, with no explanation.
  11. Book a visit, not a single slot. Guests can add more experiences to the same visit (Tri-Bathe then Treatment Only, or an Original and an Oval hot pool side by side for a group), see the day as a timeline, and book the complimentary shuttle once for everyone.
  12. One short checkout screen. Contact details, gift voucher or promo code and payment on one screen, with the hold time visible. Mobile is required only when the shuttle is booked, as the driver may call.
  13. A confirmation that helps people arrive. Itinerary, add to calendar, shuttle pick-up point, address and what to bring.
  14. The total is always visible. A running summary sits beside every step on desktop and as a bottom bar on mobile, so the next action and the cost are never off screen.

What the booking system contains

ExperienceIBIS filter / codesGuestsAgesPriceStart times seen
Original Onsen + Treatmentprodgroup-ultimate
URE2P1HURE2P90URE2P2H
2 guests per experience16+Per person, set by the treatment you choose16 / 6 / 8
Original Onsen Soak Onlyprodgroup-original
ORIGINAL
1–4 guests per hot pool5+ (evenings 12+)$122 / $180 / $225 / $26046
Oval Onsen + Treatmentprodgroup-serenity
SS1P1HSS1P2H
1–2 guests16+Per person, set by the treatment you choose8 / 4
Oval Onsen Soak Onlyprodgroup-oval
SP
1–2 guests16+$127 / $18520
Tri-Bathe OnlyTriExp
TriExp
1–2 guests18+$137 / $19534
Treatment Onlyprodgroup-treat
TREATTREAT2H
2 guests16+Per person, set by the treatment you choose8 / 4
Pool for Charityprodgroup-charity
CHARITY
1–4 guests5+$75 per hot pool, 1–4 guests1
TreatmentLengthOriginal + TreatmentOval + TreatmentTreatment Only
Aotearoa Escape ESCAPE60 min$265$285$170
Onsen Revival Skiers60 min$280$300$185
Paradise Bespoke Massage PARA60 min$270$290$175
Hanakasumi by Sothys HANAKASUMI60 min$295$315$195
Seasonal Care Facial by Sothys SEASONAL60 min$270$290$175
Organics Radiance Treatment by Sothys ORGANICS60 min$285$305$195
Aotearoa Oasis OASIS90 min$340––
Onsen Revival 90 Skiers90 min$360––
Pure Fiji Hot Stone Massage HOTSTONE90 min$345––
Seasonal Treatment by Sothys (90) SEASONAL290 min$350––
Aotearoa Journey JOURNEY120 min$400$420$305
Ultimate Paradise Hot Stone Experience ULTIMATE120 min$410$430$315
Seasonal Treatment by Sothys (120) SEASONAL2120 min$430$450$335

Add-ons on every experience except Pool for Charity: Antipasto Platter $26, Cheese Platter $26, Vegan Crudites $22, Seasonal Fruit Platter $20, Salmon Bagel $22, Chicken Bagel $22. Maximum one of each per guest.

Developer handoff: IBIS endpoints

MethodPathWhat it does
GET/hire/selection?filter={filter}Selection page for one product group. Hidden field SinglePageGroupCode (ULTIMATE, SERENITY, TREAT).
POST/hire/Method_RefreshSelectionForm: SinglePageGroupCode, WorkingDate ("12 Nov 2026"), ProductCode, ResourceCount, Transport. Returns a 5-day HTML grid. Each open cell links to a departure code hire.YYYYMMDDTHHMM.{CODE}.. with "Avail: n".
GET/hire/add?departureCode=…&resourceCount=n&transport=nUnit options for that session: adult and child rates, or the treatment menu with per-person prices, plus the six platters. Read only.
POST/hire/Method_RefreshEditRecalculates totals for chosen units (Resources[i].Options[j].Units). Read only. Used here to confirm the tiered pricing.
POST/hire/addeditAdds to cart and holds stock. Not called during research.
POST/cart/Method_SetPromoOrVoucher, /cart/Method_CheckoutVoucher and checkout.

Rules found in Onsen's custom IBIS script: twin share forced to 2 guests per room on Original + Treatment and Treatment Only; Original + Treatment capped at 5 experiences (10 guests); Oval + Treatment capped at 2 guests; Treatment Only limited to one room; Original Onsen capped at 6 hot pools; Tri-Bathe and Oval soak capped at 2 per selection. The prototype caps Original + Treatment at 8 guests because no session showed more than 4 rooms available.

Questions for Onsen and IBIS

  • Can IBIS expose availability as JSON, or do we build a thin server adapter that parses Method_RefreshSelection?
  • How long does IBIS hold a cart, so the timer on the details screen is accurate?
  • What are the Oval Onsen bath scent and soak options, and should guests choose online?
  • Can one shuttle booking cover several experiences in the same visit?
  • Guests aged 12–15 book at the adult rate in the Original Onsen (IBIS only has Adult and Child 5–11). Confirm this is intended.
  • Does the current payment provider support Apple Pay and Google Pay?
  • Should Pool for Charity offer platters online? IBIS did not show add-ons for it.