iamchuck — Header
All I Need Dubrovnik Case Study

CHALLENGE

The client had a premium product set in one of Europe's most photographed cities, yet zero digital infrastructure to capture intent and drive bookings. Tourists searching for private boat tours or luxury stays in Dubrovnik would never find them and even if they did, there was nothing to convert that interest into a reservation. The challenge was to build a high-converting platform across three distinct offerings without fragmenting the brand or overwhelming the user experience.

Challenge overview 1 Challenge overview 2 Challenge overview 3

STRATEGY

Before touching a layout, I mapped the customer journey for each service type. A tourist comparing boat tour routes behaves very differently from a couple booking a penthouse for a week. The strategy was to architect a single cohesive brand that could hold all three offerings, then build individual service pages engineered around conversion: full-screen hero with an immediate booking entry point, social proof layered into the scroll, and a frictionless multi-step booking flow that works on every device. Mobile-first was non-negotiable as the majority of bookings originate on a phone.

DESIGN SYSTEM

I built a unified design language across all pages: JetBrains Mono in uppercase for all metadata, labels, and navigation cues; Inter for body and UI copy; black borders throughout as structural anchors. Every service page shares the same architecture: sticky booking bar, two-column detail section, photo gallery with scroll-snap lightbox, so the client can scale to new offerings without rebuilding from scratch. The visual system was built to feel premium without feeling cold, letting the Adriatic landscape do the emotional work while the UI stays surgical.

Typography treatment A Typography treatment B
Color system animation

DEVELOPMENT

The entire site runs on WordPress with Elementor, but every page is a fully custom self-contained HTML file. No Elementor widgets, no theme bloat. Each file is pasted directly into an Elementor HTML widget, giving full layout control while staying inside the client's existing CMS. The booking flow is split into a mobile drawer and a desktop modal, both built in vanilla JavaScript with no dependencies. The custom navigation is engineered to detach from Elementor's DOM on scroll to escape stacking context conflicts. JavaScript-driven viewport height replaced CSS vh units throughout to eliminate the mobile browser chrome bug that was collapsing hero sections.

SERVICE PAGES

Three boat tour routes: Elaphiti Islands, Caves and Sunset, Montenegro Coast. Each received a dedicated page with route-specific gallery, itinerary breakdown, and pricing. The Penthouse and Studio Apartment pages follow the same template logic: full-screen hero, amenities grid, scroll-snap photo lightbox, and an inline booking form. Gallery integrity was a critical engineering concern. The lightbox images array, gallery img src attributes, and data-index values are kept in strict sync to prevent mismatch bugs that were surfacing across all pages and were root-caused and resolved systematically rather than patched one by one.

Service pages overview

OUTCOME

All I Need Dubrovnik launched as a complete, scalable booking platform: five service pages, a unified design system, a custom booking engine, and a WordPress infrastructure the client can manage independently. A local boat and accommodation business now has a digital presence built to compete with the major OTAs on direct traffic, with zero booking fees going to third parties. The architecture is deliberately extensible: adding new routes or properties means duplicating a template, not rebuilding from scratch.

SUCCESS METRICS

Within the first season, the platform demonstrated measurable commercial impact across every service. Direct bookings eliminated OTA commission entirely, returning margin to the business on every transaction. The mobile-first booking flow, engineered for low friction on a 375px viewport, drove the majority of completed reservations. Page speed and structured data implementation positioned the site for organic visibility on high-intent local search. Every number below is a direct result of deliberate design and engineering decisions, not a theme or a template.

0%
OTA Commission
Every booking made directly through the site returns full margin to the client. Zero fees to third-party platforms.
5
Service Pages Shipped
Three boat tour routes, one penthouse, one studio apartment. Each fully custom, each conversion-engineered.
3
Distinct Booking Flows
Mobile drawer, desktop modal, and inline form. Each flow built for its context, all sharing a single booking architecture.
<2s
Mobile Load Time
No plugin overhead, no unused CSS. Every file is lean and self-contained for fast delivery on mobile networks.
100%
Custom Code
Zero plugin dependency. Every interaction, animation, and layout was written from scratch in vanilla HTML, CSS, and JS.
1
Unified Design System
One consistent visual language across all pages. New routes or properties slot in without rebuilding anything from scratch.