Black cat cinema
TL;DR / Summary.
Black Cat Cinema is an open-air cinema experience in Lisbon, founded in 2021 to serve both tourists and locals. The client needed a website that could showcase films, sell tickets, handle newsletter subscriptions, and allow easy content management, whilst establishing a distinctive brand identity for a unique, atmospheric experience.
I led the project end-to-end; from initial planning and competitor research through user testing, persona development, wire-framing, UI design, development, and post-launch optimisation, with findings from each phase directly shaping the decisions that followed.
The site launched successfully in both English and Portuguese, with post-launch results demonstrating strong performance. Black Cat Cinema ranks on the first page of Google for both "open air cinema Lisbon" and "open air cinema Portugal", the email campaign generated over 500 newsletter subscriptions within the first few weeks of launch, and Instagram became one of the top traffic sources following a strategic repositioning of the social feed. The client expressed great satisfaction with the outcome, and subsequently engaged me as a design consultant to provide direction on a later redesign.
The Brief.
In 2021, the client founded Black Cat Cinema; an open-air cinema experience in Lisbon showing films for tourists and locals alike. To reach potential visitors, a website was needed to clearly communicate what the cinema offers, how to attend, and where it takes place. From our initial meeting, the core requirements were clear:
-
Showcase upcoming films
-
Allow users to book tickets online
-
Enable newsletter subscriptions
-
Provide location and business information
-
Develop the brand identity
-
Give the client the ability to update content independently
According to the Nielsen Norman Group, users typically stay on a webpage for only 10–20 seconds, but pages with a clear value proposition can hold attention for much longer. The site therefore needed to communicate the unique open-air cinema experience quickly and compellingly, turning visitors into customers and subscribers within seconds of landing. The open-air experience itself was the product being sold, so conveying that atmosphere and sense of occasion through the design was as important as the functional requirements. The site also needed to be built in a way that allowed the client to update content independently without compromising the design or user experience.
Project Planning.
Working closely with the client, I developed a project map that outlined the goals, requirements, responsibilities, and key decisions needed for the website. This helped clarify roles from the outset; the client would handle email campaigns, social media, assets, text content, feedback, and the purchasing provider, whilst I took ownership of competitor analysis, usability testing, user journeys, performance analysis, device and localisation testing, link testing, and the user guide. Areas of shared collaboration included reviewing the business case, defining the web platform, hosting, constraints, timescales, wireframing and testing, responsive design, and communication methods.
The objective goals were defined across four key areas; showcasing films with clearly defined display requirements, content needs, and update frequency, the ticket booking experience covering CTA placement, third-party app research, and testing, newsletter and social media subscriptions, and branding encompassing colour scheme, style guide, imagery, tone of voice, logo, and typeface.
Breaking the project into clearly defined responsibilities made it easier to establish realistic workflows and timelines, and ensured both parties understood their commitments from day one.
Competitor Research and Analysis.
After confirming the scope, I researched a range of cinema websites spanning major brands and local venues in Lisbon. By analysing their page structures, information hierarchies, and user flows, clear patterns began to emerge around how films, events, and key details were presented. Common themes included inconsistent placement of film listings and booking CTAs, limited brand personality, and newsletter subscriptions that were difficult to locate. These observations formed the basis for a structured usability test, bringing real users onto the sites to validate the findings and uncover further insights.
Usability Testing.
To validate the findings from the competitor research, I conducted naturalistic observation with a sample of eight participants, deliberately diverse in age, gender, technical ability, and film interest. Participants shared their screens and were asked to complete a series of tasks; finding a film showing, booking a ticket, and subscribing to a newsletter, whilst vocalising their thought process throughout. I analysed their navigation patterns and mouse movements to identify where friction occurred and why.
Follow-up interviews with the same participants explored their experience in more depth, with questions including "What do you like about the site?", "What is a pain point for you?", "What do you feel is the most important function?", and "Does the site feel immersive?" The responses, combined with the observational data, revealed recurring problems across cinema websites; difficulty finding showings (33%), locating subscriptions (49%), booking tickets (35%), dissatisfaction with the booking journey (51%), and a lack of immersive branding (40%).
These findings reinforced the need for a user-centred approach throughout the Black Cat Cinema project; ensuring film listings and booking CTAs were clearly visible, the brand identity was strong enough to create atmosphere, and newsletter sign-ups were accessible but treated as a secondary action rather than a primary goal.
User Personas.
From the research, I developed three user personas to represent the range of visitors Black Cat Cinema could expect. Xavier, a 22-year-old recent graduate, prioritised strong branding, social engagement, and an absorbing experience. Liz, a 67-year-old retiree with limited technical confidence, needed clear navigation, simple interactions, and reassurance that the site wouldn't overwhelm her. Rowan, a busy 32-year-old professional, primarily accessed the web on mobile and valued speed, clarity, and a frictionless purchasing journey.
Together these personas shaped key design decisions; the importance of strong brand identity to engage Xavier, straightforward navigation and clear feedback loops to support Liz, and mobile-first responsive design with a streamlined booking process to serve Rowan. The focus throughout was on creating an experience that worked intuitively for all three, without unnecessary complexity that could deter any of them from returning.
Wireframing.
Drawing on the research and persona insights, I defined the information hierarchy and page structure for the Black Cat Cinema website, combining user expectations with business goals to create a site that was both useful and easy to navigate. Anchor links to specific content sections on the homepage, alongside a persistent header that follows the user as they scroll, were introduced to ensure key information was always accessible without requiring additional page loads. This decision was directly informed by the personas; whilst some users were happy to browse at leisure, others needed to find and act on information quickly, and the persistent header served both behaviours equally well.
Low-fidelity wireframes were produced to illustrate content placement and presented to the client for feedback. In the follow-up meeting, informed by the persona findings, we agreed to add a blog and social media feed to boost engagement, and increase film listings from two to four as the client had acquired additional films. To better serve local users, we also decided to implement a language selector. Returning to the competitor sites researched earlier, I found very few offered a dedicated language selector, with most relying on the browser's built-in language changer as a workaround. This gap reinforced the value of including the feature, and an amended wireframe was produced to incorporate it alongside the other feedback.
Early iteration of the wireframes
Revised versions of the wireframes
User Flows.
With the amended wireframes confirmed, we mapped out the four key user journeys; finding film listings, booking and purchasing a ticket, subscribing to the newsletter, and changing the site's language. The goal was to make each flow as seamless as possible to support good user experience and encourage repeat visits.
A key consideration was the CMS environment and its constraints. The ticket purchasing and newsletter subscription journeys both relied on third-party applications integrated into the site; the ticket purchasing provider handling transactions, and the subscription functionality capturing user details into the CMS back-end to support the client's email campaigns. Both integrations are still actively in use today. Whilst these apps handled the more complex functionality effectively, certain settings were beyond my direct control, which required thorough research into the available options and careful adaptation of the user flows to work within those constraints whilst still delivering a smooth experience.
Iterative Testing and Validation.
With the user flows defined and wireframes refined, a second round of testing was conducted to validate the work and iron out any issues that may have been overlooked during the storyboarding and wireframing process. Using the same sample of eight participants in a focus group format, I presented the updated concepts and asked them to complete the same series of tasks as the first round, vocalising their thought process throughout. Feedback was gathered on information placement, task ease, and overall clarity.
The results were very positive and demonstrated clear improvement from the first round of testing:
-
87.5% found film listings within 10 seconds
-
67.5% found subscribing easy
-
75% found the ticket booking process easier
-
75% were able to change the site's language
Whilst the overall findings were encouraging, one limitation became apparent; the payment system, handled by a third-party app within the CMS, could not be fully tested at this stage. This highlighted the need to research available ticketing solutions thoroughly and conduct further testing once the site was in development, ensuring the purchasing journey would be as smooth as the rest of the experience.
Brand Identity and UI Design.
With the research complete, I began exploring the visual identity for Black Cat Cinema. The client's vision was of a clandestine cinema; a little haven in the heart of Lisbon, a known secret under the stars. To give the client a flavour of how the UI could be approached, an initial design was created drawing inspiration from his cinema, Movie Garden, in Nepal, giving the client a flavour of how colour, typography, and imagery could work together to evoke that atmosphere whilst remaining replicable within the CMS.
Shortly after, the client provided the Black Cat Cinema logo and two sketches from a local graphic designer, which became the visual foundation of the website, applied as background imagery across two distinct sections of the homepage, which also extended to use in social media posts. The heavy use of black reflected the dark, mysterious atmosphere of an evening spent outdoors, with green as an accent colour, carried across from Movie Garden as a connecting thread between the two businesses and a nod to the natural, outdoor settings both shared. The information hierarchy was designed to feel clean, spacious, and expansive, evoking the sense of openness that the cinema experience offered.
The Instagram feed proved to be a particularly effective addition; amongst the sketch-based backgrounds, the real-life photography brought colour, warmth, and authenticity to the page, grounding the atmospheric design in the actual experience of attending. The design also accounted for the natural length of Portuguese text, ensuring readability and sufficient content space across both language versions. A concise brand guide was produced to enforce consistency when the client was updating content independently, whilst also serving as a professional deliverable and reference point for any future design and development work.
In retrospect, knowing what I now know about accessibility, this would be one of the first considerations I would address in a redesign. The contrast between black backgrounds and certain text and UI elements presents challenges that five years of additional experience and learning have given me a much stronger framework to solve.
Movie Garden's UI design
Brand style guide of updated design
Development.
After setting up the client's CMS account, I evaluated the available templates using a SWOT analysis. Wix was selected as the platform of choice based on my prior experience with it and its suitability for a client with limited technical confidence, ensuring the site could be maintained independently without specialist knowledge. A blank template was selected as the starting point, as the frontrunning pre-built templates showed too many inconsistencies in the analysis.
Working through the information hierarchy from the header down, I designed, built, and tested each section of the homepage methodically, adding image and content effects to enhance engagement. Both desktop and mobile versions were built from scratch to provide a fully responsive, professional experience; ensuring the site served the full range of users effectively, from Rowan's on-the-go mobile browsing to Liz's more leisurely desktop experience.
With limited initial content available, stock images were used as temporary placeholders in the Subscribe section until the client could provide originals. The site was also localised into Portuguese, with a native Portuguese speaker engaged to write the translated content, ensuring the language felt natural and culturally appropriate rather than relying on direct translation. Blog pages and the booking system were developed and fully tested in a staging environment alongside the client and three additional testers.
Feedback confirmed the site had clear affordances and intuitive signifiers, though one issue was identified; the fade-in effect applied to content was too slow, causing it to lag behind the user's scrolling speed. This was resolved before launch. Once the remaining minor UI tweaks and code bugs were addressed, the site went live; and we celebrated with a well-deserved beer.
Post-Launch Performance.
Within the first few weeks of launch, the client began an email campaign through the CMS, optimised for both desktop and mobile, generating over 500 subscriptions. Whilst the client was largely able to update content independently, some challenges arose due to CMS limitations. To address this, I created a user guide outlining clear steps for updating the site without affecting the design, including precise coordinates and sizes for the elements most prone to issues, providing a practical reference that empowered the client to manage the site with confidence.
Following launch, we speculated whether repositioning the Instagram feed higher on the page could boost engagement. Upon reviewing the data, this proved to be a strong decision; Instagram became one of the top sources of traffic to the site, bringing real-life imagery and social proof to a prominent position on the page. Using the CMS analytics tools, I monitored a range of qualitative and quantitative metrics including page visits, traffic sources, user drop-off points, and ticket sales revenue across both in-season and out-of-season periods. A heat map was also set up to track user interaction patterns and identify behavioural trends across the site. These insights were compiled and shared with the client to help inform his business strategy and guide decisions around content, promotion, and seasonal planning.
SEO techniques were implemented throughout the CMS back-end, including relevant meta information on images and text, keyword optimisation, and content updates. Black Cat Cinema continues to rank on the first page of Google search results for both "open air cinema Lisbon" and "open air cinema Portugal", a strong indicator that the SEO foundations put in place at launch have had a lasting positive effect, though results may vary depending on individual search settings.
As the business evolved, the client approached me to collaborate on a new Private Events page, designed to promote Black Cat Cinema as a venue for private hire. We worked together on the content strategy, asset selection, and inclusion of testimonials, resulting in a new section that extended the site's commercial offering. This ongoing collaboration demonstrated the value of the working relationship established from the outset of the project.
Had I been able to continue the iterative improvement cycle, the next phase would have focused on:
-
Further UX testing of the payment process to identify and resolve friction in the purchasing journey
-
A/B testing of CTAs, including a dedicated booking button per film listing and a more prominent Book Tickets link in the header
-
A user survey to gather aesthetic feedback and assess whether the site was delivering a sufficiently engaging experience
At the time the client requested these improvements, the demands of my new role at PokerStars meant the time and resource required were no longer available to me. The client subsequently engaged another designer and developer to carry the site forward. However, valuing my insights and wanting me involved throughout, the client personally requested that I provide design consultancy and direction to the new team, ensuring the vision and standards established from the outset of the project were maintained.