A lean, visual-first redesign replacing rigid 3rd-party implementations with a custom React/Serverless architecture.
Movieworld Spiez
The existing digital presence for Movieworld Spiez was held back by a reliance on rigid, third-party iFrame integrations. While the backend accounting system was robust, the “Front-of-House” user experience was disjointed, especially on mobile devices where iFrames struggled to scale.
We needed a solution that preserved the operational integrity of the legacy backend while delivering a modern, high-performance interface. The strategy was a complete “Headless” decouple: using the legacy system purely as a data source and building a bespoke React frontend to handle the presentation.
Desktop Experience • React Frontend
Backend Logic
One of the core technical challenges was dealing with “mushed” API responses where dates, times, and movie categories were returned as combined strings. I engineered a custom string-splitting logic to parse this raw data into structured objects.
Data Parsing
Transforming chaos into order. We strip strict types from the legacy feed to create a clean, queryable internal API.
Exclusive Navigation
To prevent “No Results” states, filters are mutually exclusive: users browse by Date OR Category, never both simultaneously.
01. Nostalgic UI
Custom navigation elements inspired by vintage perforated cinema tickets. This skeuomorphic touch brings a tactile, physical quality to the digital interface, connecting the user to the cinema experience before they even enter the theater.
02. Precision
Designed for the environment. The deep dark mode palette isn’t just aesthetic—it’s functional, preventing screen glare in dimly lit theater lobbies. High-contrast “Cinema Green” (#00FF00) CTAs guide the user effortlessly to checkout.
03. Interactive Hero
A bespoke gesture-based swipe interaction for browsing “Now Playing” movies. On mobile, the interface performs a subtle 3-second auto-nudge on load, intuitively teaching the user that horizontal scrolling is available without using explicit arrows.
Delivered a premium, “big-budget” feel on a lean timeline.
The custom API structure allows for easy scaling and metadata updates.
Next Project
