Mari Luxury Rooms & Suites – Premium Webflow Website & Custom Booking System

Project website:

https://www.twine.net/signin

Project Role:

Webflow Developer & UI/UX Designer

Project Short Description (Brief):

A high-end boutique hospitality website built from scratch in Webflow. The project involved translating a luxury Figma concept into a pixel-perfect, fully responsive digital experience featuring micro-interactions and a sleek, custom-engineered booking form optimized for direct conversions.

Full Project Description:

Overview
Mari Luxury Rooms & Suites is a premium hospitality brand requiring a digital presence that reflects its exclusivity, elegance, and attention to detail. I developed this website using Webflow, ensuring that the high-end visual identity and immersive animations translated flawlessly from the original Figma design to the live web.

The Challenge & Solution
The goal was to create more than just a presentation site; it needed to act as a powerful direct-booking tool. To achieve this, I leveraged the Webflow CMS to structure the luxury rooms and suites dynamically, allowing for easy updates to amenities, image galleries, and pricing tiers.

The Custom Booking Form & UX
A core element of this project was the custom-built booking form. Designed with user psychology and conversion optimization in mind, the form features:

    Sleek Multi-Step UI: A clean, non-intrusive layout that guides guests effortlessly through date selection, room preferences, and guest count without overwhelming them.

    Advanced Webflow Interactions: Smooth micro-interactions and validation states that provide real-time feedback, creating a highly premium, application-like feel.

    Seamless Responsiveness: Meticulously optimized for mobile-first users, ensuring that booking a luxury suite on a smartphone is just as smooth and elegant as on a desktop.

    Clean Data Management: Form data is seamlessly structured to connect with external property management systems (PMS) or booking engines via custom code embeddings.

Technical Stack & Features:

    Full Figma to Webflow development.

    Webflow CMS for dynamic room and suite architecture.

    Advanced custom interactions and scroll-triggered animations.

    SEO-optimized structure with fast loading times for heavy luxury imagery.

    Fully responsive layouts (Desktop, Tablet, Mobile).

Skills Used (Tag/Key Skills):

Webflow, Webflow CMS, UI/UX Design, Figma to Webflow, Responsive Design, Custom Interactions, Form Design, Hospitality Web Design, Conversion Rate Optimization (CRO).