A Gaming & Entertainment Sanctuary
Malibu Club Cafe is Trivandrum's premier club cafe catering specifically to youth and gaming enthusiasts. Known for its private theatre spaces equipped for multiplayer console gaming, immersive movie screenings, and casual hanging out, the venue represents the intersection of digital entertainment and local youth culture.
The challenge was to build an immersive digital storefront that captures the high-energy vibe of the cafe, while introducing a seamless reservation engine for their private theatres and gaming lounges. To connect with the core demographic, the design strategy drew direct inspiration from the neon-soaked, retro-modern look of the upcoming game **GTA 6 (Vice City style)**.
The Pain Points
Through user interviews and cafe observation sessions, two massive user friction points were discovered:
⚠ Manual Booking Bottlenecks
The private theatre reservation was handled entirely via Instagram DMs or phone calls. This led to double-bookings, delayed replies, and drop-offs during peak weekend slots.
⚠ Friction in Checkout Flows
Young gamers wanted fast, native mobile checkout. Forcing a standard credit card entry form was a major conversion barrier compared to instant Razorpay UPI deep-linking or direct WhatsApp inquiries.
Design Strategy & GTA 6 Theme
The strategy focused on a visually loud, gaming-first aesthetic to connect instantly with youth. Drawing heavily from the **GTA 6 / Vice City aesthetic**, we established a theme built on high contrast, deep neon pink and cyan glows, dark backdrop canvases, and modern typography.
Immersive UI: Incorporating glassmorphism panels, glowing outlines, and fluid animation blocks to give the interface a gaming cockpit feel.
Frictionless Transaction Engine: The reservation page provides a visual grid selector for private theatre sessions, followed by a streamlined payment screen offering Razorpay, copy-UPI links for instant payment app redirect, and a fallback WhatsApp inquiry button containing pre-filled booking details.
The Design System
Visual styles were systemized into a clean component library that reflects the energetic neon tone of Vice City.
GTA 6 Inspired Color Tokens
#ff007f
#00f0ff
#120e2e
#ff9f00
#ffffff
Booking & Checkout Architecture
The private theatre booking workflow was engineered around a simple 3-step checkout sequence:
1. Select Room & Slot: A visual grid displaying the theatre occupancy in real-time, categorized by time slot and console setup (PS5, Xbox Series X, or Movie Screening).
2. Choose Payment Mode: Integrated with Razorpay for native credit/debit/net-banking, a fast UPI deep-link redirect to user apps, and direct WhatsApp inquiry integration which generates a booking card and drops it directly into the cafe's chat interface.
Implementation Roadmap
The project execution followed a focused path from aesthetic discovery to live production booking engine:
Phase 1 — GTA 6 Themed Brand Asset Creation
Establishing the Vice City palette, custom neon iconography, typography stack, and wireframes mapping the customer booking flows.
Phase 2 — High-Fidelity Figma Prototyping
Designing interactive prototypes for the private theatre seat selector, visual slot booker, and Razorpay/UPI unified payment screens.
Phase 3 — Frontend Development
Building high-fidelity responsive markup using CSS animations and glow effects to capture the true neon gaming vibe on both mobile and desktop views.
Phase 4 — Razorpay & WhatsApp API Integration
Integrating Razorpay checkout SDK, configuring the UPI app-redirect triggers, and engineering the pre-filled WhatsApp booking data wrapper.
Phase 5 — Launch & Usability Sprints
Beta testing the system with 15 regular cafe visitors, optimizing checkout speed, and launching the portal live for seat bookings.
