Malahi
An immersive booking website uniting four Saudi entertainment brands
Malahi is a Saudi entertainment platform that brings several entertainment brands into one animated website for families, kids, teens and thrill-seekers. We designed and built an experience that combines cinematic storytelling, four interactive brand worlds and a structured ticket booking journey.
- Client
- Malahi
- Industry
- Entertainment
- Project type
- Website and booking platform
- Our role
- UX, UI design and development
- Duration
- Two months
The goal
To create an immersive entertainment platform that brings Malahi's brand worlds into one digital experience. Visitors should find the right destination, engage with each world through motion-led storytelling and move naturally from exploring to booking a ticket.
The challenge
Malahi needed to unite several entertainment brands, each with its own visual world, audience and personality, without the experience feeling fragmented. Every brand needed its own colours, characters and atmosphere, yet visitors still had to know where they were, what each experience offered and how to book. The website also had to stay immersive and animation-driven while keeping the booking journey clear, fast and easy to complete.
The solution
We created one multi-brand experience in which each Malahi world keeps its own personality, colour and storytelling while sharing a single UX system. Motion-led transitions connect the four worlds, and booking is organised into clear, progressive steps, so visitors go from discovery to payment without losing context. Visitors can book from more than one brand in a single basket and pay once, sign in with a code sent by email, and receive a digital ticket with a QR code for entry. The Malahi team manages brands, branches, activities, packages, offers, events, articles and search settings, and follows bookings and corporate requests, from a control panel of 19 sections without needing a developer.
How the work went
- 01
UX strategy
We built the journey around discovery first and structured booking second. Visitors explore each world freely before entering a clear, step-by-step reservation flow.
- 02
Multi-brand experience architecture
Each entertainment brand is treated as its own visual world, on one shared structure across the Malahi ecosystem.
- 03
Motion-led UI design
A dark visual foundation carries bold brand colours, oversized typography, cinematic imagery and character-driven environments. Full-screen video transitions and scroll-based storytelling connect the four worlds.
- 04
Responsive experience
We adapted the experience for desktop, tablet and mobile while keeping each world's visual identity, content priority, motion language and booking clarity.
- 05
Booking flow design
Destination, branch, date, time, guests, contact details and payment are arranged as progressive steps, with the visit summary visible throughout.
Key screens
Design decisions
A world for each brand
Each entertainment brand is its own visual world, while one shared structure holds the Malahi ecosystem together.
Motion as part of the UX
Cinematic video transitions, animated scenes and interactive movement connect the four worlds, so exploring feels immersive and not static.
A simpler booking journey
The booking flow is divided into clear progressive steps. Visit details stay on screen, so visitors remain oriented from choosing a destination to paying.
One ecosystem, four worlds
Each Malahi brand keeps its own identity, characters, colours and atmosphere while sharing one consistent UX structure.
Motion with purpose
Video transitions, animation and interactive movement guide visitors between worlds and deepen immersion. They are not there for visual effect alone.
Keep booking simple
However expressive the experience becomes, the path to choosing a destination, picking a time and completing payment stays clear and easy to follow.
One experience on every screen
Visual direction
- Aesthetic
- Bold, playful and immersive. Dynamic, cinematic, energetic, modern and expressive, on a dark foundation with a strong colour for each brand.
- Imagery
- Cinematic entertainment photography, character-led visuals, branded 3D environments, racing scenes, arcade worlds, family activities and high-energy shots of the experiences. The mood is energetic, playful and vibrant, with strong contrast, dramatic lighting, bold colours and a clear sense of excitement.
- Motion
- Full-screen video transitions, scene changes between worlds, animated masks, parallax and brand-coloured transitions link the four worlds, and the home page uses scrolling as part of the story. Hover states, animated cards, button feedback, progress indicators and booking interactions respond immediately to the visitor. Motion is expressive during discovery and more controlled and functional during booking.
Under the hood
Technology
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- GSAP
- Framer Motion
- Lenis
- Three.js
- PixiJS
- Rive
- Lottie
- Supabase (PostgreSQL)
- Vercel
Integrations
- Moyasar
- Supabase
- Resend
- Vercel Blob
The technical challenge
The home page is a cinematic journey that the visitor controls by scrolling, and on some devices, ordinary laptops in particular, the scene slowed down or stopped. The site now asks each device which video format it can play smoothly and sends the matching version, and it keeps in memory only the part of the scene near the visitor, so the journey runs smoothly on weak and powerful devices alike. For a basket that spans several brands, all bookings are grouped under one order, prices and discounts are recalculated on the server at payment time, and the amount paid is checked again before a booking is confirmed.
Performance and quality
The 3D models and large images, about 90 MB of models, are served from the content delivery network and kept apart from the server so they do not slow the site, and heavy effects run only in the part of the page the visitor can see. Each customer sees only their own bookings, the database rejects a booking with no guests or for a brand the chosen branch does not offer, and the booking and contact forms limit repeated requests to keep out spam. The site runs in Arabic and English with full right-to-left support, in light and dark modes, with a sitemap, structured data for articles and search settings that are edited from the control panel.
What changed
Unified multi-brand experience
Four distinct entertainment worlds now sit under one consistent digital system, without losing the personality of each brand.
More immersive visitor journey
Full-screen video transitions, animation and world-based storytelling turned the website from a static interface into an experience closer to the entertainment itself.
Clearer booking flow
Destination, branch, date, time, guests, contact details and payment are organised into progressive steps that are easier to follow.
Clearer information before booking
Availability states, visit summaries, payment methods and calls to action in context give visitors what they need before they complete a booking.
Distinct multi-brand experience
Each Malahi world feels different through its own colours, characters, environments and energy, and still belongs to one platform.
Motion-led storytelling
Full-screen video transitions, animation and interactive movement make the website feel like part of the entertainment itself.
Clear path to booking
A structured booking flow, a visible visit summary, availability states and clear calls to action make it easier to move from exploring to payment.
What we delivered
- Immersive website UI
- Responsive desktop, tablet and mobile screens
- Multi-brand experience pages
- Motion and transition direction
- Booking flow design
- Ticket selection and checkout experience
- Reusable UI components
- Visual design system
- Developer-ready handoff
Have a project like this one?
Tell us what you need and get a detailed quote within 24 hours: scope, cost and timeline.
Request a quote
