Black cat cinema
The Brief.
In 2021 Mr. Evans founded Black Cat Cinema - an open air cinema experience in Lisbon showing films for tourists and locals. To get the word out to would-be customers, a website would need creating to tell people what Black Cat Cinema is, how to attend and where. After our initial meeting, it was clear what the requirements were:
-
Showcase upcoming films
-
Allow users to book tickets online
-
Subscribe to an email newsletter
-
Location and business information
-
Develop the branding
-
Ability to add content himself
According the Nielsen and Norman Group, 'users stay on a page between 10-20 seconds but pages with a clear value proposition can hold people's attention for much longer..you must clearly communicate your value proposition within 10 seconds'. To be able to meet the requirements, an engaging experience must be created in order for visitors to spend time on the site, look at what the cinema had to offer and turn them from visitors into customers and subscribers. In addition the value proposition was the open air experience, so to sell this along with cinema tickets was essential. Further considerations were needed regarding the production of the site. It had be set up in a way that allowed Mr. Evans to update the site with new content but not have it affect the design.
Project Planning.
Working with Mr. Evans, I created a project map and outlined project goals and associative requirements. This revealed who would provide what and decisions that needed to be made. It also outlined what the first steps were going to be. Each of the various steps pertaining to the project processes and objectives were defined and broken down into smaller steps. The same approach was taken with regards to the website's functionality, this made it easier to define work flows and timescales.
Exploration.
After agreeing upon the scope topics I conducted research into the various cinema sites, ranging from larger companies to local ones around Lisbon. Assessing page structure, information hierarchy and user flows started to uncover a reoccurring theme about what kind of information and products were being shown and where. I wanted to test these websites on users and gather feedback on them.
Usability Testing.
I started gathering data on these websites, starting with naturalistic observation. I gathered a sample of eight people ranging in age, sex, technical ability and film interest. I had them share their screens and in turn asked them watched them complete a set of tasks such as 'find a film showing', 'book a ticket for tomorrow's showing', 'subscribe to the email listing', amongst a few others. I asked them to vocalise what they were doing as they were undertaking the task. I analysed where on the page the users moved their mouses and in what fashion.
This then lead to conducting a short interview with the same eight people, asking questions such as 'What do you like about the site?', 'What is a pain point for you?', 'What do you feel is the most important function?', 'Does the site feel immersive'. Analysing the data we collected across these sites we found that, on average:
-
33% struggled to find a film's showing
-
49% couldn't subscribe to a site's email
-
40% felt a lack of atmosphere / strong branding
-
35% couldn't book a ticket
-
51% didn't like the ticket booking journey
The numbers showed that there could be improvements made to cinema website design. I had to ensure that I didn't fall into the same pitfalls as other sites and maintained user-centred design throughout the site. The film listings and book ticket CTAs had to be shown in a clear, easy to find position on the site. The branding had to be strong to create an identity and an atmosphere within it. The email subscription location should also be clear and easy to find but was considered a secondary action by many in the sample, though felt it was better to be there than not.
User Personas.
Upon analysing the research I was able to create a range of user profiles. This was to help associate characteristics with a user and help in ascertaining the interactive behaviours. It also revealed some further considerations needed for the website such as, how many pages there should be for the website and how that would create effective navigation. Further to this, interactions between the user and website would have to create clear feedback loops without subjecting them to any unnecessary fancy bells and whistles that may confuse or deter them from reusing the site again in the future.
Wireframing.
Gathering and evaluating the data gave greater insight to what the information hierarchy of the Black Cat Cinema website should look like. It also showed us what kind of user to expect. Combining the results with the business goals made it easier to narrow down how the page structure should be built in order to provide a site that's both useful and usable. This would determine the navigation and create blueprints of the pages. Looking at the content and product placement, it felt appropriate to use anchor links to specific content on the home page and have the header follow the user down the page. This in turn meant always giving the user access to the information they may be intentionally looking for without having to load another page. For some users of the research sample, they wouldn't consider themselves in too much of a rush not to book tickets and engage with the content (on the basis that was easy to navigate). I produced low-fidelity wireframes to give a clear indication of what information would be shown where on the site. This was presented to Mr. Evans in a follow up meeting to gather feedback.
During the meeting we discussed the results of the user personas and upon review, thought it would be appropriate to implement additional features such as a blog and a social media feed to encourage user engagement. The number of film listings were to be increased from two to four, as it was at this time Mr. Evans was able to acquire more films to be shown. To be more local friendly, it was decided that the content's language should be changeable. I went back to the sites studied at the Exploration phase and found that there was very little sign of a dedicated language selector. Where applicable, I had to use the browser's language changer when prompted. As a result, an amended version was designed that catered for these requests and feedback.
Early iteration of the wireframes
Revised versions of the wireframes
User Flows.
After the amended wireframes were created, we looked at the most important user journeys and began to storyboard their flows. These consisted of finding the film listings, booking and purchasing a ticket, email subscription and changing the site's language. We aimed to make the user journeys as seamless as possible to establish good customer retention and user experience. I also had to be realistic over what I could and could not control on the CMS, of which certain user journeys could be hindered. Apps were going to be integrated with the site to carry out more of the complex functionality and there would be settings that were beyond my control. This meant I had to investigate available applications and adapt the flows accordingly.
Test and Test Again.
Once the user flows had been defined, more testing was required to gather feedback on them. I wanted to iron out any creases that may have been overlooked in the storyboarding process or indeed, the wireframes themselves. I presented these concepts to the same sample of people in the form of a focus group. We asked them to conduct the same series of tasks in the first testing phase and asked them to vocalise their thought process. We then asked what the sample liked and disliked about where information was placed and how easy or hard it was to perform the required tasks. We found that:
-
87.5% found the film listings within 10 seconds
-
67.5% found it easy it to subscribe
-
75% found the ticket booking process easier
-
75% found how to change the site's language
I was extremely pleased with the test results, though there were a few things we looked to improve on. We realised that the the payment system would be handled by a third party app within the CMS framework we set out to use. We could no longer give an accurate depiction of the payment process until it was implemented. This meant research into available ticketing systems would needed to be carried out and further testing done once the site was in development.
UI Conceptualisation.
Taking the information collected into account, an initial design was created. The initial branding I applied was based on Mr. Evans's other cinema business in Nepal. This was to give him a flavour of how I could approach the UI and give an indication as to how colour schemes, typography and imagery could be applied. I also had to take into consideration that the the design could be replicated using the CMS. I gained feedback on the design and soon after, I was sent the Black Cat Cinema logo, along with two sketches by a local graphic designer. I then felt a re-design was necessary as the resources available, in terms of branding and CMS capabilities, narrowed down the possibilities. I had to ensure the design also accommodated the Portuguese language as it's naturally longer in text, so having enough space for content length and legibility was incorporated into the conceptualisation. A small brand guide was created for future design and development reference.
Early UI design
Brand style guide of updated design
Development.
After setting up Mr. Evans's account on the CMS, I browsed through the available templates and performed a SWOT analysis on them to determine which could be used. I decided to opt for a blank template to build on as the template frontrunners had too many fluctuations in the results from the analysis. I looked at the information hierarchy and set out the appropriate building blocks for each section of the page. Starting with the header, I designed the necessary elements and links on the page and tested that they performed as expected. I worked my way down the home page in a similar fashion. Image and content effects were added after to enhance user engagement.
There was little in the way of content to begin with, so developing the Subscribe section, I had to use a stock image gallery for the background. Though this did run the risk of inconsistency, it would serve as temporary placeholders until Mr. Evans had more content at his disposal. Both desktop and mobile versions were developed in English and Portuguese languages as well as the additional blog pages and booking system. I set up all the remaining necessary functionality and tested it in a staging environment. I asked Mr. Evans and three other people to also test the site as a whole before going live. All four testers agreed that though the site had clear affordances and signifiers. However the fade-in effect placed upon the content lasted too long. This meant the users would scroll quicker than the content loaded and thus wasn't providing the desired result. The remaining feedback gathered pertained to the ease of use to the user. Regarding accessibility, I checked that the colours used passed the accessibility colour contrast test. Other accessibility checks pertained to the font sizes that were chosen were considered large enough to be legible at smaller screen resolutions and that the form fields had clear, readable labels. Once the minor UI tweaks and bugs in the code had been ironed out, I published the site and we celebrated the launch, with a beer.
Post Production.
A couple weeks after the site was live, Mr Evans started an email campaign via a CMS application. It was optimised for both desktop and mobile and has seen over 500 subscriptions. Further to Mr. Evans's role in updating content, he has been able to do so with relative ease but not without a couple of flies in the ointment. Though some of these issues are attributed to the constraints of the CMS that are beyond our control, I created a user guide to outline the steps involved in updating the site without breaking the design. I highlighted the path of least resistance for content updating by giving explicit coordinates and sizes for the problematic elements.
After the site was live, we speculated whether moving the Instagram feed further up the page could further promote user engagement and upon inspecting the data, this has proven to be a fruitful move as Instagram has turned out to be one of the most popular sources of traffic. I have requested the statistics to see what impact this has had regarding uptake in Instagram followers but I'm currently awaiting the data. The CMS also provides other types of qualitative and quantitive data, which I reviewed after the site went into production. I was able to assess parameters such as page visits to understand the activity amongst users when the cinema was both in an out of season. Further insights show a variety of information pertaining to things like where the most popular source of traffic comes from, where a jump of traffic originates, where people spend less time on the site and revenue generated over time due to ticket sales. Furthermore I set up a heat-map on the site to be able review how users are interacting with the site and whether a pattern of behaviour can be detected.
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, testing and ideas for continual improvement will focus around gathering reviews and feedback from users and categorising them into essentials and desirables. This helps prioritising the next steps on the website. I would like to carry out more testing, adopting a combination of naturalistic observation and interviews, on the payment process; reviewing whether the user journey has pain points and what we could do to rectify if necessary. One idea is to have a dedicated CTA for each film listing to gauge whether or not this allows users to complete the task of booking a ticket easier and more effectively. Moreover I'd like to test whether adding a border around the Book Tickets link in the header, to make it look more like a CTA, gathers more engagement. To measure whether these changes yield greater interaction amongst users, an A/B test would be set up and the results between the design before and after the changes would be analysed. Additionally I would like to conduct a survey to gather feedback with regards to the aesthetics of the site to determine what users thought of the look and feel and whether an engaging experience is currently being offered. Other content to be updated on the site relates to the accessibility and legal pages that I am currently waiting on the content for. In the meantime, I've been pleased to hear Mr. Evans's feedback on what I've built for him and that the main objectives in the initial brief have been met. Continual communication and ideas will hopefully pay dividends during the lifespan of Black Cat Cinema website in optimising user experience and brand development.