Role
Lead Design and Web Development
Timeline
10 Weeks
Tech Stack
Framer, UX Research, Design System, Responsive UI
Impact Metric
1. Overview & The Brief
To conceptualize and develop a digital flagship that reflects the grandeur and vibrant energy of a premier theatrical venue. The goal was to create a brand-led platform that balances a luxury minimalist aesthetic with the practical functionality needed for browsing and booking a diverse range of shows, from West End hits to Arabic plays and comedy.
2. The Context
The venue is multifaceted, encompassing a theatre, 10 dance and rehearsal studios, a yoga and pilates space, alfresco dining, and a 'black box' performance room. The digital experience needed to organize these distinct pillars seamlessly without overwhelming the visitor, all while maintaining a premium, high-end feel throughout the user journey.
A modular narrative approach was chosen. The user is guided deliberately from a cinematic hero section down to specific partnerships (like the NCG x Pineapple Collaboration), categorized offerings, and VIP experiences. A clear, persistent navigation structure was implemented to ensure users can effortlessly explore shows, classes, and corporate events.
3. Ideation & Architecture
Guided narrative flow and structured informational architecture designed to simplify user discovery and engagement.
Modular Narrative Flow
Designed a modular path guiding visitors from the cinematic hero section to partnerships, classes, and bookings.
Persistent Structure
Implemented an intuitive, persistent menu allowing users to hop between Pineapple Studios classes and show tickets instantly.
Theatrical Canvas
Leveraged dramatic, high-contrast assets and illuminated typography to replicate the physical grandeur of the theatre.
Theatre Seat Selection
Pineapple Outpost Booking EngineSelect seats on the map to begin.
4. Establishing the Visual Language
To ensure scalability, we developed a modular design system. The color palette utilizes semantic signals and distinct status indicators to provide instant feedback for user management. The typography prioritizes readability for high information density.
Semantic Coding System
Click any color block to copy its hex value.
Scale & Alignment
Prioritized text hierarchy for dynamic viewport densities.
Component Library
Atomic components with precise semantic signals.
5. Final UI & Key Features
Responsive Execution
Maintains structural integrity and luxury feel across all breakpoints, transitioning flawlessly from immersive desktop views to streamlined mobile experiences.
Show Categories Grid
A highly visual, image-led grid highlighting genres like Music, Dance, Arabic Theatre, and Ballet, collapsing gracefully into a vertical stack on mobile.
The NCG Experience
Distinct interface cards for 'Theatre Seat Selection', 'VIP & Ambassador Services', and 'Luxury Hospitality' packaging premium offerings.
High-Fidelity Interface Showcase
Interactive screen previews across multiple responsive layout viewports.
NCG HOME LAPTOP
1024w Light
390w Light
6. Project Impact & Reflection
A sophisticated, high-performance website that elevates the brand's digital presence, successfully capturing the essence of a major cultural destination. Built using Framer, its advanced animation capabilities facilitated a cinematic hero section, fluid scroll interactions, and pixel-perfect catalog management.
More Projects
View All Projects →Order Assistant
Streamlining e-commerce operations by transforming chaotic spreadsheet data into an intuitive, scalable dashboard.
