Match report · Season 2026

Villa Direct Booking

Balimmo

Team sheet

Full-time stats

The booking fee compares a typical booking platform service fee (an estimate) with the Rp 0 fee in the Courtyard summary. Flows, screens and states, and components are counted from the Template F frames in the pen.dev design file. The template is designed, not live, so there are no booking figures yet.

Match facts

Role: UI/UX designer
Platform: Website, desktop 1440, tablet 768 and mobile 375
Discipline: Product Design
Industry: Hospitality · Villa rentals
Tools: pen.dev

Before → after

Booking fee for the guest: 14% to 0%
Flows designed, from home to booking status: 0 to 7
Screens and states across 1440, 768 and 375: 0 to 87
Template components: 0 to 58

Minute by minute

How the match went

From the brief at kick-off to the result at full time.

Minute 0, Kick-off
The brief
Courtyard, a direct booking website template for villa hosts on Balimmo. Guests browse the villas, check live prices on a calendar and pay on the provider's secure page, without a booking platform in between.
Designed in pen.dev: seven flows from the home page to the booking status, 87 screens and states across three sizes, and 58 template components.
15’
Minute 15, The opposition
The problem
Villa hosts in Bali rely on booking platforms that take a fee on every stay and keep the guest relationship. Balimmo gives each host their own booking site, with one booking engine and a choice of templates.
- Trusta guest paying a small host directly needs the same certainty as on a big platform: the right price, a clear reference and a confirmation they can believe.
- Pricenightly prices change by date, so a "from" price on a card is never the final amount.
- Phone firstmost guests plan on a phone, where a long villa page, a calendar and a payment step have to fit one hand.
The question
How might we make booking direct feel as safe as a big platform, while every host keeps their own look?
35’
Minute 35, Game plan
Goals and key features
Before
Before, guests found the villas on a booking platform, paid a service fee and talked to the host through it.
After
After, the host's own site takes the guest from the home page to a confirmed stay in seven flows, with no booking fee and the same booking rules on every template.
1. Home with a villa, dates and guests search bar and an editorial villa list
2. All villas with filters, search results, flexible dates and no-match states
3. Villa page with a priced calendar and a booking card that checks the price before Reserve
4. All photos laid out as the villa's plan around the courtyard, with a full screen viewer
5. Confirm and pay with a ticket-style summary and inline form errors
6. Payment hand-off to the provider's secure page with a reference and a hold timer
7. Booking status: confirmed, still waiting, payment failed and not active
8. Desktop 1440, tablet 768 and mobile 375 layouts
60’
Minute 60, The play
How it was solved
- One engine, many looksCourtyard is one of several templates that share the same data, funnel and rules. Only the visual system changes, so a host can switch looks without touching how booking works.
- A template with its own languagea stone page, white paper cards, Fraunces for titles and Manrope for the interface, and one deep lava blue for the search bar and every booking summary.
- Photos as a floor planthe All photos page lays the villa out around its courtyard, the pool in the middle and the rooms around it. Tapping a room opens the full screen viewer, in the same order as the plan.
- Every state designedloading, empty and error lists, booked nights, no calendar price, price changed, payment hold, still waiting, payment failed and booking not active, at 1440, 768 and 375, with a note for developers on every flow.
Minute 90, Full time
The result
Courtyard covers the whole direct booking journey, from the home page to a confirmed stay, at three sizes and with every state drawn. It shows how one shared booking engine can carry a template with its own character: the ticket summaries and the courtyard photo plan make it feel like the host's place, while the rules that make paying direct safe stay the same.

Tactical calls

Key decisions

The choices that shaped the project, the reasoning behind them, and what they cost.

One booking engine, many looks
The problem
Every host wants a site that feels like their brand, but booking and payment must work the same way for everyone.
The call
Templates share the data, the funnel and the rules; a template only changes the visual system. Courtyard's identity comes from type, color, the ticket summaries and the photo plan, not from a different flow.
Why
Hosts can change their look without risk, and every fix to booking reaches every template at once.
Trade-off
A template cannot reorder or skip booking steps, even when a layout would look better that way.
The calendar is the date picker
The problem
Native date inputs hide which nights are free and what they cost, so guests guess and get refused.
The call
Guests tap check-in and check-out on the calendar itself. Each night shows its price, booked nights are struck through and cannot be picked, and day cells are 44 px.
Why
Seeing free nights and prices at the moment of choosing removes most of the refusals.
Trade-off
The calendar takes more space, so 375 shows one month at a time.
Check the price before Reserve
The problem
A "from" price on a card is not the real total, and a guest should never discover the real amount at payment.
The call
Reserve only works after a live price check for those exact dates and guests; the summary shows that checked quote, not a sum made in the browser. Refusals always come with a way out, such as other dates.
Why
The number on the button is the number the guest pays.
Trade-off
A short "checking" moment before Reserve, designed as its own state.
Confirmed means paid
The problem
Guests return from the payment page before the payment is settled, and a premature "confirmed" breaks trust.
The call
"Your stay is confirmed" only appears once the payment provider confirms the payment. Until then the page waits and says so, then offers clear next steps if it takes too long or fails.
Why
Booking direct only works if the confirmation can be believed.
Trade-off
Some guests see a waiting state for a few seconds instead of an instant success.
Browse at home, filter on All villas
The problem
Filters on the home page crowd the host's front door and make eleven villas feel like a catalogue.
The call
The home page is an editorial list for browsing. Searching or filtering opens All villas, the one place for filters and results.
Why
The front door stays calm and personal; guests who want to narrow down still get full filters one step away.
Trade-off
One more page for guests who want to filter straight away.