Role
Art Direction + UX + Frontend
Timeline
Lean Sprint
team
Solo
platform
Astro / React / Supabase
The Challenge
The Strategic Pivot
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. 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.
Backend Logic
Engineering the Filter
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.
Mobile Interaction
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" 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.
Outcome
Premium, big-budget feel on a lean timeline. Custom API parsing turned a messy legacy feed into a clean, queryable internal layer.
What shipped
Mobile-first headless UI with bespoke swipe interactions and a dark, cinema-appropriate surface, sitting on a custom-parsed layer over the legacy feed.
What improved
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.
What I learned
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.