2026
Drop In Costa Rica
Turning a paradise rental portfolio into a direct-booking machine.
Brand
Web
Front-end
Role
Brand, Design + Fullstack Engineering
Timeline
2025–2026
team
Solo
platform
Framer / React / Smoobu
Context
Trapped inside the platform's economics.
Drop In Costa Rica is a portfolio of four distinct houses sharing one private compound in northern Santa Teresa — Casa Drop In, Casa Verde y Azul, Casa El Camino and Simsalabim — plus a shared yoga shala in traditional Tico palm-leaf construction. Guests weren't booking a room. They were booking an experience: barefoot, off-grid-feeling, jungle-immersive.
The business problem wasn't visibility. The properties already performed well on Airbnb with strong ratings and Superhost status. The problem was margin and ownership. Every booking carried a platform fee, every guest relationship was mediated by a third party, and the brand had no surface of its own. Airbnb sells a listing. It can't sell this place.
The strategic question I had to answer with design: how do you convince someone who already trusts Airbnb to book directly with a brand they've never heard of?
The Core Insight
Out-design the platform. Inherit its trust.
Most direct-booking sites fail because they ask the guest to give up something — the safety of a familiar platform — in exchange for nothing visible. The savings go to the owner, not the guest. So I reframed the entire site around a single idea: make the direct channel the obviously better experience, and make the platform feel like the lesser, more expensive copy of it. Not by hiding Airbnb — by out-designing it.
Three Connected Decisions
How the insight became an interface.
Decision 01 — Photography is the product
The interface gets out of the way.
The one thing a listing grid can't do is give a place atmosphere. So the site is built around large, full-bleed photography with a deliberately minimal interface layer over it. Type and chrome stay out of the way so the place itself does the convincing — the photography is the product, not the wrapper around it.
Full-bleed photography · property page
Three-button hierarchy · house page
Decision 02 — Three buttons, one obvious winner
The deterrent is the design, not a wall.
Every house page gives the guest three ways forward — Check availability, Book now, and Book on Airbnb. They're not equal. Check availability and Book now own the visual hierarchy and lead directly into the branded flow. Book on Airbnb stays present, but visibly demoted to a secondary style. Clicking it triggers a popup that reframes the choice — same place, same hosts, better price here. The platform link isn't hidden, which would feel like a trick. It's just clearly the worse-looking option, and that's enough.
Decision 03 — A gallery that respects the photo
Lay the grid out around the image. Don't crop the image into the grid.
Most gallery components decide their layout first and then cram photos into it — every image gets the same crop whether it's a landscape drone shot or a vertical bedroom portrait. I built the gallery the other way around: it reads each image's orientation and lays the grid around the photograph, so portraits stay tall and landscapes stay wide. Clicking opens a full-screen modal with a scroll-synced sidebar that lets a guest move through a property the way they'd walk through it. The interface earns its keep by disappearing — the place looks like itself, not like a thumbnail of itself.
Orientation-aware gallery grid
Outcome
A property portfolio that finally reads as a destination rather than four listings.
A brand surface
A surface that matches the quality of the place — atmosphere the platform's card grid could never carry.
Margin kept home
A booking path that keeps margin with the owners instead of routing it to a third-party fee.
Trust without the toll
A guest journey that carries platform-level trust without the platform-level fee — the complete loop, solo, including the unglamorous parts.
Beneath the Surface
The details that don't show up in a screenshot.
The loading screen earns its existence
A canvas-based intro animation — border frame draw, a liquid wave filling a drop, a circle reveal — plays only on first visit, gated through localStorage. One that plays every time is an annoyance. One that plays once is an entrance.
The migration was a design problem
Moving off the old Wix site meant existing search equity could evaporate. I mapped redirects from the old URLs and monitored the transition in Search Console so the brand didn't restart from zero on Google.
The Backstage Tool
The offer generator that quietly runs this business lives over on the coding case study — built end-to-end, in real daily use.
The Sister Property
One brand, two completely different booking realities.
Drop In Mountain Chalet in Switzerland isn't on Smoobu, so it couldn't share the Costa Rica booking flow. Rather than bolt on a second third-party widget and break the brand, I built it its own engine from scratch.
A custom Smart Calendar pulls live Airbnb iCal availability through a Cloudflare Worker proxy to handle CORS, with a three-night minimum, a six-month booking window, CHF pricing with cleaning fees, and Formspark submission. Same brand, completely different booking reality — no visible seam.
Availability
Live Airbnb iCal via Cloudflare Worker proxy (CORS-safe)
Booking Rules
3-night minimum · 6-month window · CHF pricing with cleaning fees
Submission
Formspark — no booking platform, fully owned flow