The Marbella Hospitality website + booking

Every page leadsto one booking flow.Every pageleads to onebooking flow.

Collins Creative designed and built The Marbella's direct-booking website: room pages on one shared template, a three-step booking popup designed separately for desktop and phone, and a confirmation email that matches the site.

View the website Try the preview

The Marbella homepage: an aerial ocean view over the property, the headline The Marbella, and a check-in, check-out, and guests bar

PropertyThe Marbella

LocationOceanside, California

ProjectWebsite · booking flow · email

Our roleStrategy, UX/UI design, front-end development, email design

The website, interactive

Choose a room.
Pick your dates.

Scroll the homepage, open a room, and start a booking on desktop or on a phone. The calendar and steps work; the final booking step is switched off in this preview, so no reservation is ever made.

The challenge

Six stays, one template, one path.

The Marbella rents six different places to stay. Each needed its own page, but a guest comparing them should not have to relearn the layout every time.

We put all six on one room template, kept a dates bar and Book a room within reach on every page, and routed all of it into a single booking popup.

Shared room templatePersistent booking pathOne popup

The booking journey

Three steps,
every screen.

The same three steps run on every screen. On a phone the menu takes over the screen with Book a room at the bottom, and the popup stacks its months into one scrolling column instead of shrinking them. Past dates are greyed out on both.

DatesCheck-in and check-out on a two-month calendar
DetailsGuests and trip details
ReviewEverything confirmed before booking

The Marbella mobile menu: Home, Gallery, Rooms, Amenities, Local, and Connect, with a Book a room button — The menu fills the screen with Book a room at the bottom; the booking popup stacks its months into one column instead of shrinking them.

After the booking

The stay continues in the inbox.

We designed a confirmation email in the same type and colors as the site. Dates come first, then the room, house details, directions, and how to reach the property.

A guest who opens it a week later should not have to search for anything.

The Marbella booking confirmation email: a property photo, See you on the sand, check-in and check-out dates, room details, house notes, directions, and contact information — **Booking confirmation email.** One long, scannable page that follows the order a guest needs it in.

What we made

The full path,
before and after.

Homepage and room pages
A homepage that leads with the location and a dates bar, and six room pages built on the same structure so they compare easily.
Supporting pages
Gallery, rooms overview, amenities, local guide with a map, and contact, each with the booking path close by.
Booking popups
A three-step flow designed separately for desktop and phone screens, opened from any page.
Confirmation email
A matching email with stay dates, room details, directions, and contact information.

One job per page.
One way to book.

Project lead

Brendan Collins

Brendan led the strategy, UX/UI design, front-end development, and email design for The Marbella.

The judgment that mattered was restraint: give every page one small job and one route into booking, and design the phone flow on its own instead of shrinking the desktop popup.

Meet the studio

Your next chapter