DESIGN QUALITY: CRAFT & EXECUTION
Crafting a seamless booking experience for a boutique cinema
ROLE
Product Design Lead
TEAM
3 Full Stack Developers, 2 Product Managers, In-house Creative Director
KEY SKILLS
Rapid Prototyping, Collaboration, Visual Design, Interaction Design
TOOLS
Figma, Keynote, Adobe Creative Suite, Pen and Paper
Impact
+17% Annual Admissions
50k downloads in first 3 months
+£3.2 million Annual Membership Revenue
+13% Annual In-venue Food & Beverage Revenue
Problem
Problem Statement
To design, build and scale the first iteration of an iOS App for a complex cinema booking platform while maintaining brand integrity for 3m UK users.
Context
Everyman Cinema is a growing independent cinema group in the UK, positioned at the premium end of the cinema market. They focused on providing a high-quality experience with comfortable seating, food and drink service directly to seats, and a curated selection of films.
Why was this important?
Business goal
Support an aggressive growth strategy for Everyman while maintaining a premium brand feel outside of the physical cinema space.
User goal
Create a seamless booking experience from choosing a movie to a booking ticket and visiting a venue.
Process
Discover
We began by immersing ourselves in the Everyman brand and this. This involved stakeholder interviews and customer intercepts, understanding the existing customer journey, and analysing competitor apps (both cinema and luxury service industries) to identify best practices and potential pitfalls.
There was no budget for user research, while not ideal we decided to conducted some quick user intercepts with current Everyman customers patrons to understand their needs, frustrations, and desires for a mobile app. This revealed a strong preference for ease of use, visual appeal, and a desire for exclusive content
“
I want something different from Everyman … I want a complete cinema Experience.
“
Regular Everyman customer
Image credit © Everyman Cinema
“
The Everyman experience should feel simple but incredible.
“
Everyman Senior Stakeholder
Image credit © Everyman Cinema
Define
I consolidated the interviews with the stakeholder group into a set of 4 principles that would guide us through the design process and ensure we would meet the brands requirements.
EVERYMAN PRODUCT PRINCIPLES
01
We are visually appealing, entertaining and fun to engage with.
02
We are inclusive and include everyone from 25 to 125 years old.
03
We are functional we remove all barriers so our customers can enjoy a night out.
04
We leverage the benefits of digital and humans in venue. We don’t just rely on digital channels.
Based on my research, I storyboarded the potential user journey to bring the experience to life. Once we had defined the features that would be in the first release I meticulously mapped out the app's information architecture, ensuring intuitive navigation. I designed user flows for key tasks such as browse films, selecting showtimes, choosing seats, and completing a purchase, prioritising minimal taps and clear feedback.
STORYBOARDING THE EXPERIENCE
DEFINING THE STRATEGY AND FEATURE LIST
SELECTED FEATURES:
🔎 Browse movies
🎟️ Book cinema tickets
📍 Check in to venue
💳 Pay for food and drink in-venue
🎵 View music playlist in venue
Ideate
Low-fidelity designs were created to establish the layout and functionality of each screen. These were then developed into quick mock ups to explore screen composition and how the UI might change between in-venue and out of venue modes. These were shown to the team and users to get feedback.
LOW FIDELITY DESIGNS
Prototype & Test
This was where the Everyman brand truly came alive in the digital space. We focused on:
Visual Aesthetics: Employing a sophisticated colour palette, elegant typography, and high-quality imagery that mirrored the cinema's luxurious interiors.
Intuitive Interactions: Designing smooth transitions, clear calls to action, and delightful micro-interactions to enhance the user experience.
Accessibility: Ensuring the app was accessible to a wide range of users, considering elements like contrast and font sizing.
Component Library: Developing a robust design system and component library to ensure consistency and efficiency in future iterations.
PROTOTYPING ANIMATIONS
Develop
I created a design system from scratch this was an ‘Atomic design system ‘which would mean consistency, scalability and simplicity and would improve collaboration between myself and our developer. Design documentation that was clear and easy to access for the engineering team which would speed up development and save time when answering quesitons about components and padding for example.
ATOMIC DESIGN SYSTEM
DESIGN DOCUMENTATION
Validate
I used quick guerilla testing with the team and users to further stress test the UI. We used QA to find bugs before launching to a small customer base. Two specific elements to call out that I changed based on user feedback:
1 Adding a nudge to the screen seat map to encourage users to scroll
2 Adding a gradient on showtimes list to encourage user to scroll showtimes on movie card
DESIGN CHANGES BASED ON FEEDBACK
Launch
The launch of the Everyman iOS app marked a significant milestone for the brand. Initial Impact & Results:
Enhanced Customer Experience: Users immediately embraced the app's intuitive interface and seamless booking process, leading to overwhelmingly positive feedback and 50,000 downloads in the first 3 months
Increased Engagement: Early analytics showed a significant increase in user sessions and time spent within the app compared to previous mobile web interactions.
Streamlined Operations: The in-app ticketing significantly reduced queues and administrative overhead at the cinema.
Strong Brand Reinforcement: The app successfully extended the premium Everyman experience into the digital realm, solidifying brand loyalty resulting in +17% annual admissions for the following 12 months.
FINAL DESIGNS
Impact
+17% Annual Admissions
50k downloads in first 3 months
+£3.2 million Annual Membership Revenue
+13% Annual In-venue Food & Beverage Revenue
Watch the Everyman App advert
Other projects
-
![Three panels showing different eligibility scenarios for credit cards on uSwitch. Panel A shows 0-10% eligibility titled "Stop and Learn," indicating ineligibility for cards. Panel B shows 11-40% eligibility titled "Pause and Consider," suggesting a low chance of being approved for some cards. Panel C displays 41-100% eligibility titled "Continue and Choose," highlighting a high chance of card approval. Each panel includes a screenshot of the uSwitch website with relevant information.]()
Tailoring the credit card ‘Eligibility Checker’ journey
DESIGN COLLABORATION: AGILE & CROSS-FUNCTIONAL
-
![]()
Building an automated tool to plan store promotions using predictive AI
DESIGN LEADERSHIP: PROCESS & INFLUENCE
-
![Logo reading 'LOOP Cycle Club' with an infinity symbol integrated into the word 'LOOP' against a black background.]()
Designing and building an app to connect cyclists
DESIGN INNOVATION: BUILDING 0-1
