Case study · Boutique hotel

Boutique Hotel Website Design That Gives Every Room a Section of Its Own

In a boutique hotel, guests choose a room before they choose a date. Calvara’s rooms are all different, a small sea room, a family suite, apartments, so we gave each one a full section with its own photo, price and features. The rate check still sits on the first screen for anyone who already knows.

Client
Calvara
Industry
Hospitality, boutique hotel
Audience
Couples, families and business travellers
Scope
Hotel website UX and UI design
The brief

A Sea Room and a Family Suite Should Never Share the Same Small Card.

The Problem

Boutique hotels compete on character, then hide it. Most sites squeeze every room into the same card with a thumbnail and a price, so a guest choosing between a sea view and space for the children sees two near-identical boxes. Faced with that, they choose on price, and they can do that anywhere.

The Goal

Give every room type a section of its own, alternating left and right, each with a large photo, the nightly price, six features and two buttons. Keep a rate check on the first screen and answer the five questions guests ask before the footer.

Who it’s for

Couples, families and business travellers staying in Geneva for a short break or a work trip. They pick the room first, then check what’s included and what happens if their plans change.

The visual system

The Palette Comes From the Photos, Taken at Dusk.

Every room is shot in evening light, so the palette follows it. A slate teal band carries the services and the book now buttons, a deep brown marks each details button, and a single pale aqua circle shouts the 70% offer. White grounds keep the long run of rooms from feeling heavy.

  • Slate teal#45686EBook buttons, the services band and the contact panel
  • Deep teal#2C4549Services band and footer
  • Cocoa#49302CDetails buttons
  • Aqua#98DFEAOffer badge and subscribe button
  • Mist#F0F1F1FAQ ground
  • White#FFFFFFMain ground and cards
Typeface

Gilda Display

Gilda Display, a light serif, sets every room name, so each one reads like the sign on its own door.

Rooms we recommend for our customers.

The headline over the recommended rooms.

The decisions

How the Design Solves It

What we decided, and what each decision saves the guest from doing.

A Dusk Hero With the Rate Check Below

The hero is a bedroom at dusk with the city behind it and a starting price of $50 a night. A rounded bar for dates, guests and children overlaps the bottom of the photo, with a check rates button. Mood and price arrive together.

Each Room Told in Full

The small sea room, the family suite and the apartments each get a large photo, the nightly price, a short description and six features, from bed size to air conditioning. Sections alternate left and right, so the eye keeps moving. A guest can tell the rooms apart without opening one.

Two Buttons, Two Speeds

Every room has a brown details button for guests still deciding and a teal book now button for guests who are ready. The browser isn’t rushed, and the guest who’s ready finds the button in the same place every time.

Five Questions Before the Footer

Check-in times, airport transport, cancellation, pets and the beach shuttle sit in an accordion at the end of the page. A reception desk answers these by phone every day. Here they’re settled before the guest leaves.

The walkthrough

Ten Sections, Rooms First, Questions Last

Select a section to see it in the design and the reason for its place in the order.

  1. A bedroom at dusk with the city behind it, a light serif headline, a price per night and a rounded bar for dates, guests and children.

  2. Three room cards with photos, size, guests, breakfast, the starting price and a book now button.

  3. Swimming pool, parking, unlimited tea and free wi-fi with line icons on a slate teal band.

  4. Small sea room, family suite and apartments, each with a large photo, the price, a description, six features and details and book now buttons.

  5. A promise of refined elegance over a dim room photo, with an aqua badge for up to 70% off selected rooms.

  6. Three reasons, from the best choice to a full refund, beside a room photo with a play button.

  7. A five-star review from a travel site on a dark teal panel beside a bright bedroom photo.

  8. Three news cards with photos, dates and categories, the middle one in slate teal.

  9. Five common questions in an accordion, from check-in times to the beach shuttle, with one open beside a photo.

  10. A newsletter, links, a gallery and the contact details in a teal panel.

Hero — The mood and the dates

Want each of your rooms sold on its own merits?

Start a Project Like This
Your project

Two Ways We Can Build One Like This for You

For your client or for your own business, the thinking is the same. The route in is different.

For agencies

Pages Like This, Under Your Brand

We design and build to your client’s brief and hand it over as your work. Your client never hears our name.

  • Planned around your client’s buyer, section by section
  • Built in WordPress, ready for you to present
  • NDA on request, no contact with your client
For business owners

A Site Planned Around Your Buyer

We map the questions your customers ask before they buy, then design and build a WordPress site that answers them in order.

  • One clear action, in view from the first screen to the last
  • Proof and pricing placed where doubts arise
  • A site your team can update without us

Let’s Talk About Your Project

We book a call to scope the work. You get a proposal to approve, and we begin.

Hafijur R, founder of Coderlift
Hafijur R Founder, Coderlift
Contact Form