Marbella / Luxury yacht charters · Miami
The city looks
different from here.
A cinematic, self-initiated charter experience.
Experience the interactive site →
Marbella / Luxury yacht charters
A luxury Miami yacht-charter experience with a scroll-piloted 3D vessel, transparent selection and a human-approved itinerary concierge.
The problem
Charter websites often alternate glamour shots with fragmented fleet details, unclear inclusions and inquiry forms. Visitors struggle to visualize the experience and compare the practical terms of a charter.
Product strategy
The landing page turns scrolling into a cinematic guided voyage: a genuine WebGL yacht moves through changing viewpoints as copy reveals the fleet, route and inquiry experience. Provide a reduced-motion fallback, accessible controls and explicit quote-only pricing.
Design decisions
Airy high-end art direction / sea, light and warm cream. Make the yacht itself the scroll guide while keeping inclusions, duration and the human-confirmed quote boundary legible.
UX research approach
Synthetic research: 8 fictional traveler profiles and 12 modeled charter-comparison tasks. This is a fictional scenario: no real interviews or measured outcomes are claimed.
Accessibility & responsive design
Keyboard-operable controls, visible focus, readable content and responsive reflow support this concept. Reduced-motion preferences remove animated scrolling. Physical-device and assistive-technology validation remain future work.
AI-assisted workflow
Prototype the emotional journey from cinematic discovery to functional selection; keep 3D responsive and lightweight; let visitors compare inclusions and request a proposed itinerary without creating a booking. AI-assisted implementation is used for prototyping and iteration; product recommendations here are deterministic local simulations.
Proposed technical architecture
Next.js, TypeScript, Three.js / WebGL, scroll-linked scene controller, React Three Fiber for production, motion-safe fallbacks, PostgreSQL, availability-provider API and human-reviewed concierge orchestration. Procedural demonstration yacht, fictional vessels/terms and sample Miami route; no real booking inventory, supplier prices or navigation data. This architecture is a proposal, not a deployed backend.
Limitations & lessons
If pricing, availability or conditions are unknown, show “request a quote” and encourage captain/operator verification. No yacht availability, prices or confirmed bookings are represented as live data. The prototype does not send inquiries or reserve anything. The next step is real user research, production data validation and accessibility testing before any launch.
Information architecture & user flow
- Guest selects a charter duration and experience style
- Assistant drafts a sample route and timing assumptions
- Guest reviews the itinerary and can change every stop
- A quote request requires explicit guest submission and operator confirmation
Core views: Scroll-synced 3D yacht landing experience → Yacht selection, inclusions and charter duration → AI itinerary concierge and quote review