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.
Next project
Finance dashboard →NISCRAFT
Let’s talk about your project.
We want clarity, not empty promises. In a short call we discuss scope, timeline, and approximate cost.