Concept Project·Hospitality & tourism

Boutique stay

A direct-booking web experience for a calm coastal boutique hotel. Room types, availability, and contact flows are interfaces designed for direct booking and brand storytelling.

Technology

Next.js
TypeScript
Tailwind CSS
Headless CMS
Form API

Start a similar project Read the story

Dates

12 — 15 Oct

Hospitality

Harbor Stay

Problem

Boutique hotels often take bookings across fragmented channels (OTAs, phone, social), splitting the brand experience and limiting direct reservations.

▸Increase direct booking inquiries
▸Tell the room and experience story clearly
▸Enable fast mobile decisions and contact

Research

We reviewed OTA visual patterns, boutique pricing transparency expectations, and mobile preference for quick contact (WhatsApp / form). No real user data was used in this project scope.

Wireframes & flows

Home → room discovery → availability / inquiry form → thank you. Alternate: experiences → package request → contact. Each step defines a clear CTA and return path.

UI & design system

Calm teal and sand tones, generous spacing, soft corners, and photo-led grids. Typography: Plus Jakarta Sans display, Geist body. Motion stays minimal — card hover and page transitions only.

· Hero: scenery and direct booking CTA
· Room listing: filters, price range, capacity
· Room detail: gallery, amenities, availability form
· Experiences: local activity cards
· Contact: map, form, and quick message channels

Development

Static + ISR pages, room and experience content from CMS, form submissions with server-side validation. Image optimization and locale support (TR/EN) planned.

Results

Direct booking channel, mobile experience, and content structure built to support the brand story.

Technology

Next.js
TypeScript
Tailwind CSS
Headless CMS
Form API

Responsive breakpoints, form validation, accessibility checks (contrast, keyboard), and Core Web Vitals targets defined for the project scope. No live traffic testing performed.

Next project

Finance dashboard →

Start a project

Next step

Have an idea? Let’s turn it into a product.

Tell us about your project in a few steps — we’ll clarify scope together.

Start a project Book a meeting