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.
Replaced rigid iframe widgets with a custom React frontend on top of the legacy backend — premium, theatre-ready feel on a lean timeline.
Mobile-first headless UI with bespoke swipe interactions and a dark, cinema-appropriate surface, sitting on a custom-parsed layer over the legacy feed.
A messy legacy API became a clean, queryable internal model — so updates, filters and 'No Results' edge cases are handled in the frontend instead of fought against it.
You don't always get to replace the backend. The leverage is in the integration layer — where a small API parser is what actually unlocks a modern UX.
Next Project
