Hospitality · Web Redesign · Booking Engine · Payment Gateway

Heaven Hotel —
Full Digital Overhaul

Complete website revamp, mobile optimisation, 360° tour integration, and a full booking engine with live payment gateway — from brief to production deployment for a hospitality client.

ClientHeaven Hotel
ScopeFull-Stack Web + 360°
StackHTML · CSS · JS · DB
StatusLive · Production
Heaven Hotel website homepage
Heaven Hotel — redesigned homepage, live in production
Overview

Brief to Production. Everything.

Heaven Hotel came to me with an outdated website that wasn't converting visitors into bookings. The brief was comprehensive: redesign the entire digital presence, build a real booking engine that processes payments, integrate 360° virtual tours of the property, and make it all work flawlessly on mobile.

This was a full-stack project — from initial UX research and Figma wireframes through to database design, backend development, payment gateway integration, and final deployment. Every component was built from scratch and tested on real devices before going live.

100%Custom Build
LivePayment Processing
360°Tours Integrated
MobileFirst Design
Website Design

A Site That Converts

The redesign focused on one goal: get visitors to book. Every page was designed with that conversion funnel in mind — clear room showcases, prominent booking CTAs, trust signals, and a frictionless checkout flow.

Rooms page
Rooms & suites page — clear pricing, direct booking
Booking flow
Booking flow — date selection to payment in 3 steps
Mobile view
Mobile-optimised — tested on real devices
Gallery page
Photo gallery with 360° tour integration

Booking Engine

Real Payments. Real Bookings.

The booking engine was built from scratch — no off-the-shelf plugins. It handles real-time availability checking, room selection, guest details, and live payment processing through an integrated payment gateway. Bookings are stored in a custom database and trigger automated confirmation emails.

Booking engine UI
Booking engine — availability calendar
Payment flow
Payment gateway integration — live processing

Build Process

From Brief to Live

01 · Research

UX Audit & Competitor Analysis

Audited the existing site for conversion blockers. Analysed competitor hotel sites. Defined the information architecture and user journey from landing to booking confirmation.

02 · Design

Figma Wireframes & Visual Design

Built full wireframes in Figma for all key pages. Designed the visual system — typography, colour palette, component library. Client approved designs before any code was written.

03 · Build

Full-Stack Development

Built the frontend in HTML/CSS/JavaScript. Designed and implemented the database schema for bookings, rooms, and availability. Integrated the payment gateway API. Built the admin dashboard for managing bookings.

04 · 360°

Virtual Tour Integration

Shot the property with the Insta360 X3. Edited panoramas, added hotspots, and embedded the tour suite directly into the website's gallery and room pages.

05 · Deploy

Testing & Live Deployment

Tested the full booking flow end-to-end with real payment transactions. Cross-device testing on iOS, Android, and desktop. Deployed to production with SSL, performance optimisation, and monitoring.


Tech Stack

Tools & Technologies

HTML5 CSS3 JavaScript Database Design Payment Gateway API Figma Insta360 X3 360° Tour Embed Mobile Responsive

Need a Full Digital Overhaul?

I design and build complete hospitality web systems — from UX research to live payment processing.