Black cat cinema
TL;DR / Summary.
​
In 2021, Mr. Evans founded Black Cat Cinema, an open-air cinema in Lisbon, and needed a website to showcase films, sell tickets, enable newsletter subscriptions, provide location info, and allow easy content management. I mapped out project goals, researched cinema websites, and conducted user testing with eight participants to uncover pain points in navigation, ticket booking, subscriptions, and branding. Insights informed user profiles, site structure, and wireframes, which were refined through feedback.
​
The design incorporated a strong brand identity, clear CTAs, anchor links, a persistent header, a blog, social media feed, and a language selector, while accounting for CMS limitations and Portuguese text. Key user journeys—finding films, booking tickets, subscribing, and changing language - were storyboarded, tested, and optimised for usability and retention. Accessibility and responsive design were ensured.
​
The site was built on a blank CMS template, tested in staging, and launched successfully in English and Portuguese. Post-launch, analytics and heat maps monitored engagement, and moving the Instagram feed higher increased traffic. Ongoing improvements will focus on user feedback, A/B testing CTAs, refining the payment process, and updating content. Mr. Evans has expressed great satisfaction, and iterative updates will continue to enhance user experience and brand development.
The Brief.
​
In 2021, Mr. Evans founded Black Cat Cinema - an open-air cinema experience in Lisbon for both tourists and locals. To reach potential visitors, he needed a website that clearly explained what the cinema offers, how to attend, and where it takes place. From our first meeting, the core requirements became clear:
​
-
Showcase upcoming films
-
Allow users to book tickets
-
Enable newsletter subscriptions
-
Provide location and business details
-
Develop the brand identity
-
Give Mr. Evans the ability to update content himself
​
According to the Nielsen Norman Group, users typically stay on a webpage for only 10–20 seconds, but a clear value proposition can keep them engaged much longer. The site therefore needed to quickly communicate the unique open-air cinema experience while encouraging visitors to explore films, purchase tickets, and subscribe. It also had to be built in a way that allowed Mr. Evans to easily manage content without compromising the design or user experience.
Project Planning.
​​
Working closely with Mr. Evans, I developed a project map that outlined the goals, requirements, responsibilities, and key decisions needed for the website. This helped clarify the initial steps and break the overall process into manageable tasks. We applied the same structured approach to defining the site’s functionality, which made it easier to establish clear workflows and realistic timelines.
Exploration.
​
After confirming the scope, I researched a range of cinema websites - from major brands to 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. To validate these observations, I planned to test selected sites with users and gather feedback on their experiences.
Usability Testing.
​​
I conducted naturalistic observation with eight diverse participants, asking them to complete tasks such as finding a film, booking a ticket, and subscribing to a newsletter while thinking aloud. By analysing their navigation patterns and mouse movements, I identified key usability issues. Follow-up interviews explored what they liked, their pain points, and which functions mattered most. The insights 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, ensuring clear visibility of film listings and booking CTAs, a stronger brand presence, and accessible, but secondary, newsletter sign-ups.
User Personas.
​
From the research, I developed user profiles to better understand behaviours and needs. This helped inform key decisions, such as the optimal number of pages for clear navigation and designing interactions that provide intuitive feedback. The focus was on creating a straightforward, user-friendly experience without unnecessary features that could confuse or discourage repeat visits.
Wireframing.
​
Analyzing the data provided clear direction for the Black Cat Cinema website’s information hierarchy and user expectations. Aligning these insights with business goals helped define a page structure that is both useful and easy to navigate, informing the site’s navigation and page blueprints. Anchor links on the homepage and a persistent header were introduced to give users quick access to key information without loading new pages. Low-fidelity wireframes were created to illustrate content placement and presented to Mr. Evans for feedback.
​
In the follow-up meeting, we decided to add a blog and social media feed to boost engagement, increase film listings from two to four, and implement a language selector to make the site more accessible to local users. Research showed few cinema sites offered this feature, so a solution was integrated into the updated design, reflecting the feedback and additional requirements.
Early iteration of the wireframes
Revised versions of the wireframes
User Flows.
​
Once the amended wireframes were complete, we focused on key user journeys - finding film listings, booking tickets, subscribing to the newsletter, and changing the site’s language. The goal was to make these flows as seamless as possible to enhance user experience and retention. I also considered CMS limitations and recognised that some journeys would rely on integrated apps for more complex functionality. This required researching available applications and adapting the flows to work within these constraints.
Test and Test Again.
​​
After defining the user flows, I conducted further testing to refine the wireframes and storyboards. Using the same participant sample in a focus group, we had users complete the initial tasks while thinking aloud and provided feedback on information placement and task ease. Key findings included:
​
-
87.5% found film listings within 10 seconds
-
67.5% found subscribing easy
-
75% found ticket booking easier
-
75% could change the site’s language
​
The results were very positive, though we identified areas for improvement. 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 and conduct further testing during development.
UI Conceptualisation.
​
Using the research insights, I created an initial design inspired by Mr. Evans’s cinema in Nepal, demonstrating potential UI approaches with colour, typography, and imagery while considering CMS limitations. After receiving the Black Cat Cinema logo and two sketches from a local designer, a redesign was necessary to align with the available branding and technical constraints. The design also accounted for longer Portuguese text, ensuring readability and adequate content space. A concise brand guide was produced to support future design and development.
Early UI design
Brand style guide of updated design
Development.
​
After setting up Mr. Evans’s CMS account, I evaluated available templates with a SWOT analysis and chose a blank template due to inconsistencies in the frontrunners. I structured the page based on the information hierarchy, designing and testing elements from the header down through the homepage. Image and content effects were added to enhance engagement.
​
With limited initial content, I used stock images as temporary placeholders in the Subscribe section until Mr. Evans could provide originals. The site, including desktop and mobile versions, blog pages, and the booking system, was developed in both English and Portuguese. Functionality was fully tested in a staging environment, with feedback from Mr. Evans and three testers. They noted the site was clear and intuitive, though the fade-in effect was too slow, causing content to lag behind scrolling.
​
Accessibility checks ensured adequate colour contrast, legible font sizes on smaller screens, and clearly labeled form fields. After addressing minor UI tweaks and code bugs, the site was launched successfully.
Post Production.
​
A few weeks after launch, Mr. Evans began an email campaign through the CMS, optimised for both desktop and mobile, which has already generated over 500 subscriptions. While he has been able to update content with relative ease, 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 elements that were most prone to issues.
After the site went live, we moved the Instagram feed higher on the page to boost engagement, which proved successful as Instagram became one of the top traffic sources. I’m awaiting data on its impact on follower growth. Using the CMS, I also reviewed both qualitative and quantitative metrics, including page visits, traffic sources, user drop-off points, and ticket sales revenue, to monitor activity throughout the season. Additionally, I set up a heat map to track user interactions and identify behavioural patterns on the site.
I adopted various SEO techniques on the back end of the CMS. This included the implementation the relevant meta information on images and text, keywords, content updates, etc. Black Cat Cinema currently resides on the front page of Google search results for both main search criteria: 'Open air cinema Lisbon' and 'Open air cinema Portugal'.
Future updates and improvements will focus on gathering and prioritising user feedback to guide the next steps for the site. Additional testing is planned for the payment process to identify and resolve any pain points. Potential enhancements include adding dedicated CTAs for each film listing and emphasising the Book Tickets link in the header to boost engagement, with A/B testing used to measure impact. A survey will also be conducted to evaluate the site’s aesthetics and overall user experience. Content updates, particularly for accessibility and legal pages, are pending. In the meantime, Mr. Evans has expressed great satisfaction with the site, and ongoing communication and iterative improvements will continue to optimise both user experience and brand development.