The Ibiza you came for. 320,000+ GUESTS · TRIPADVISOR 2023 / 2024 / 2025 Book a route → Watch the trip [ hero placeholder, replace with assets/videos/oceanbeat-hero.mp4 ]
Client
Oceanbeat Ibiza
Year
2025, 2026
Role
Design + Built with AI
Live URL
The brief

A premium production site, no dev team.

Overview

Oceanbeat runs four flagship boat experiences in Ibiza, Day Party, Sunset, Formentera 12H, and a private charter route. They needed a brand site that could carry their cinematic energy, surface live pricing, and convert into a step-by-step booking, all without leaning on a developer.

The site had to feel like the actual product: warm, sunlit, premium. Not a typical "boat tour" template. And it had to actually book, take payment, and not break on a phone in Spanish 3G.

The problem

A premium product trapped in a cheap-looking funnel.

What was breaking

The existing site was a third-party booking widget bolted onto a generic theme. Three problems compounded:

1. Conversion leaked early. Pricing lived behind a calendar widget. Users who landed via Google bounced before seeing a price.

2. Trust was buried. 320,000+ guests, TripAdvisor Travellers' Choice awards from 2023, 2024 and 2025, none of it surfaced above the fold.

3. Mobile was unusable. The booking widget broke on Spanish carriers and Apple Pay didn't work at all.

The process

Six weeks. Solo loop.

w1.
Discovery + structure

Stakeholder workshop, three competitor audits, journey maps for four routes. Locked the structure on day three.

w2.
Wireframes + booking flow

Sketched the booking flow before any pixel. Five steps: route, date, group size, extras, then payment. No back-and-forth.

w3-4.
Visual design + system

Built the design system in Figma, type scale, color, components. Designed every screen, mobile-first, then desktop.

w5-6.
Vibe-coded build

Prompted Claude with the design system + clear requirements. Reviewed in Cursor, committed to GitHub, deployed. Iterated against real bookings.

oceanbeat.piyushuiux.com
Oceanbeat Routes Gallery Reviews FAQ Book now → The Ibiza you came for. Day, sunset and 12-hour Formentera boat experiences. 320,000+ guests since 2018. Book a route → Watch the trip DAY PARTY €55 · SUNSET €65 · FORMENTERA 12H €129
The solution

Five decisions that made the difference.

01 · Price up front

Each route surfaces its starting price within two scrolls of landing. Day from €55, Sunset from €65, Formentera 12H from €129. No "request a quote" friction.

02 · Trust above the fold

An animated counter shows guest count climbing past 320,000 on first scroll. A small TripAdvisor strip, 2023, 2024, 2025 Travellers' Choice, sits below. Trust is doing work before the price does.

03 · Five-step booking

Route, date, group, extras, then payment. Each step shows total + free-cancellation reminder. Payment supports Visa, Mastercard, AMEX, PayPal and Apple Pay. Group discounts apply automatically at six+ guests.

04 · Mobile is the default

Designed mobile-first because 70%+ traffic is Spanish carriers on phones. The whole page is under 180 KB transferred, no slow scripts, Apple Pay button native.

05 · Support at one tap

A persistent WhatsApp button stays bottom-right on mobile. Pre-filled message includes the route they were looking at. Real humans, real-time, in Spanish or English.

oceanbeat.piyushuiux.com/book · step 1 of 5
01 ROUTE 02 DATE 03 GROUP 04 EXTRAS 05 PAYMENT Pick your route All routes leave from Playa d'en Bossa pier. Free cancellation up to 24h before. DAY PARTY €55 5 hours · drinks & DJ SUNSET €65 3 hours · golden hour FORMENTERA 12H €129 all-day island hop PRIVATE CHARTER On request up to 80 guests Continue →
The build

How building with AI actually works.

How it works

I treat the AI like a very fast junior developer. The thinking, what to build, how it should work, and the tricky cases, stays with me. The AI turns my plan into code, and I check every change.

For Oceanbeat, that meant a Figma file with every screen, a short style guide for fonts, colors and spacing, a clear list of what each page should do, and step-by-step instructions to Claude. I made edits in Cursor and saved everything in GitHub.

The result is clean, hand-checked code, with no heavy frameworks. Just simple files on a server, fast to load and easy to update.

What I built

Event listings with live prices, a video header, a guest counter, a photo gallery, an FAQ section, a step-by-step booking flow with Visa, Mastercard, PayPal, AMEX and Apple Pay, free-cancellation rules, group discounts, pick-up location details, a WhatsApp button, a TripAdvisor 2023-2025 award section, guest reviews, and a layout that works on every screen size from small phones up.

Results

What it moved.

320k+
Guests served by Oceanbeat since 2018, now front and centre on the homepage.
5 steps
From landing to paid booking, no third-party widget, no broken iframes.
6 wks
Discovery to live URL, solo, with AI as the engine.
0 devs
External developers involved. Every line of production code reviewed and committed by me.
5 pay
Methods supported, Visa, Mastercard, AMEX, PayPal, Apple Pay, all live on day one.
3 ×
TripAdvisor Travellers' Choice awards (2023, 2024, 2025) surfaced above the fold.
What it taught me

Three takeaways for any solo product loop.

1, Design first, prompt second

The AI is only as good as the artefact you point it at. With every Figma screen and a written spec, the code came out coherent. Without them, it drifted within an afternoon.

2, Review every diff

Most "AI bugs" are prompt bugs, wrong assumptions or missing constraints. Read the diff, find the gap, re-prompt with the missing piece. Twice as fast as debugging after the fact.

3, Ship narrow, iterate live

Day-party + booking went live in week four. Sunset and Formentera went live in week six. Iterating against real bookings beat any synthetic test plan.

Up next

Got a product like this in your head?