Skip to content / İçeriğe geç
NISCRAFT

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

Dates

12 — 15 Oct

Hospitality

Harbor Stay

01

The Context

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

02

The Idea

A direct-booking web experience.

03

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.

04

Wireframes & flows

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

05

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

06

Development

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

07

The Result

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

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.

NISCRAFT

Let’s talk about your project.

We want clarity, not empty promises. In a short call we discuss scope, timeline, and approximate cost.