Laura

UX designer

Light House cinema

Improving the booking process on the website.

How it started...

This was a self directed project completed under the UX Tree mentorship programme.

The goal of the UX Mentorship Programme is to pair grads and early-stage designers with experienced professionals in the UX industry who share similar career journeys, to develop their professional skills and help bridge the gap between education and the workplace.

As a mentee, I was tasked with identifying a user need in an existing product or service and designing a suitable solution for the chosen target audience. For this project I decided to focus on the Light House cinema website.

This project duration was from September to December 2022. I was the sole UX researcher and designer on the project. Survey Monkey and Figma were the tools used.

Background

The Light House cinema is located in Dublin, Ireland. It is managed by the production company Element Pictures. It is known for its eclectic mix of films including art-house and Hollywood blockbusters, as well as regular classic screenings. The cinema also hosts quiz nights, book clubs and specially-hosted cult film screenings.

The cinema is built into the framework of an underground carpark. It has 4 screens, a cafe and subterranean bar. It has earned accolades from the likes of the Guardian Film Awards (Highly Commend Best Cinema) and ARTINFO (Coolest Cinema in the World).

Their aim, as stated on the website, "is to become a destination cinema in the minds of national & international visitors, not just those in [their] immediate catchment area".

Problem

When I started the project, it was hard to find information on the website about what movies were showing in the cinema that day or week and what was coming up soon.
The “What’s On” and “Coming Soon” sections were poorly maintained and practically identical lists with no sense of order that confused users.
Confusion was also caused by the language used on the site to describe different sections and features.
The navigability of the site was very poor and users were getting lost or getting irritated trying to find their way around on what should be the simple journey of finding a film and booking a ticket.
The Loyalty/ Membership programme was not functioning.

Solution

The goal of the primary user, to buy a ticket for a specific night that week, has been made much easier with 87% of users correctly identifying the new flow and getting to the payment page 59% faster than on the existing Light House website.

The goal of the secondary user, to see what is coming up and to plan ahead, has also been made easier.
The headings and features have been simplified and after “Our Programme” was changed to “Film Clubs”, 100% of users tested with the 2nd iteration correctly identified What’s On/ Seasons as the correct location for information about Christmas movies.

My Design Process

Exploring the problem

Four cinema websites examined in Competitive Analysis

Competitive analysis

For this competitive benchmarking exercise, I looked at the desktop websites for the Light House Cinema, the IFI, Omniplex Cinemas and the Rio Cinema in London.

The IFI is the Light House Cinema’s closest competitor in Dublin. Rio Cinema is based in London but would have a similar programming ethos to the Light House and IFI, with festivals/ seasons, older and arthouse movies as well as current releases. I also wanted to look at a large cinema company with a different programming ethos/ target market (mostly mainstream current releases) to see if aspects of their experience could improve the Light House website.

How much information about the movie does the user need to see to be persuaded to buy a ticket? The Light House and Omniplex used large images whereas the IFI and Rio Cinema focused more on text lists.

What aspects of the cinema experience does the user value most and want to see on the website? The Light House and IFI have packed primary navigation bars with links to their streaming services and cafes- is this necessary?

The Light House and IFI both have a large amount of seasons/ festivals/ film clubs that are described with varying degrees of success. In the IFI in particular, there is definite feature bloat- there is so much on that nobody will know what is going on! Trimming down the events that are offered could mean that what is happening becomes more visible.

Finally, I wanted to look at Loyalty programmes that cinemas run as the Light House is currently without a functioning one. The Rio membership programme is also under construction. The IFI enables the user to log in and check their balance but they can’t purchase items with loyalty points. Omniplex offers a monthly subscription service with benefits but not the option to earn points.

To see the full Competitive Analysis PDF, click here.

Surveys

I used Survey Monkey to send a 10 question survey to 23 people who are mostly in their early 30s and go to the cinema.

For this survey, I asked about general cinema going habits. What are the main reasons for a user to visit a cinema? What aspects of the cinema experience does the user value most?

55% of respondents say that the Lighthouse is their preferred cinema, citing the interesting film selection and the proximity to bars/ restaurants in the area- this could imply that going to the cinema is an event, part of a night out, that there is more to the experience than just watching the movie.

The main goal of a cinema goer would appear to be an immersive experience where you can switch off for a few hours, not look at your phone and discuss it with friends afterwards. The majority buy cinema tickets on their phones and go to the cinema between twice a month and a few times a year.

Interviews and usability tests

During this phase of the project, I conducted user interviews alongside usability tests for the current Light House website and two other cinemas to build new personas and to inform the design. I prepared a test script with questions about the users' cinema going habits and behaviours and tasks to complete on the three cinema websites. I interviewed three users in person (one retired non Dublin resident and two Dublin residents in their early thirties) and recorded the tests using Screenflow.

Insights

The older retired user visits the Light House website to see what’s Coming Soon. He doesn’t live in Dublin so likes to plan ahead. The two users in their thirties who live close to the Light House, their primary goal is to see what’s on that day or the next day and they both find that difficult at the moment.

The What's On and Coming Soon sections on the Lighthouse site are not alphabetical, chronological or accurate- this caused frustration with the three users.

All users struggled with flowery, unclear terminology used on the site.

“Calling them Monthly Strands…that kind of language is for people who go to the marketing meetings”

Visually, posters and images are important. All users had moments in the tests where titles or posters for something unexpected caught their eye and made them want to learn more- balancing this potential for discoverability with concise information display that will not overwhelm the user will be important.

Deciding what to fix

Affinity diagram

I wrote all findings from the competitive analysis, online survey and user interviews on Post Its and arranged them into groups that roughly corresponded to the journey of a typical cinema goer. I did this exercise alone.

The groups were "General cinema insights", "Planning the trip", "The trip and afterwards", "Looking for a movie on the site", "Terminology & visual appeal" and "Navigability & pain points".

To see the full Affinity diagram PDF, click here.

Main findings from affinity diagram

Personas

I created two personas to guide the main flows that the website redesign needed to address. Sophie is the (primary) user who wants to know what is on that day/week and Peter is the (secondary) user who wants to plan ahead and browse the selection of films showing in the future. These personas were based on findings from the online survey and user interviews.

The focus of each persona is their goal, what they want to achieve when they use the Light House website. I chose to focus more on Sophie as the primary user because her goal of finding out what is screening that day/week was the main goal of two out of the three users interviewed before the usability tests in the research phase.

Primary Persona. Wants to know what is screening that day/week.
Secondary persona. Wants to know what's screening soon and plan ahead.

Customer Journey

I created a customer journey map to build a better understanding of how the primary user, Sophie, interacts with the current website and to discover opportunities for improvement. The task documented in the map is to go to the cinema on a Saturday for a date; she's not sure what she wants to see yet so is willing to discover and be persuaded. The map revealed many user problems and opportunities at the homepage, Now Showing, Times and Booking stages of the customer journey.

The journey map revealed that the site is very poor at providing the user with information that they do not already have (i.e. what is showing that day, what day of the week is this screening, what is this movie about?). Once/if they identified the daily schedule, it was a neutral experience with the posters and film names providing the information they needed at that stage.

To see the full user journey map, click here.

Condensed user journey map on the current Light House website.

Empathy Map

I created an empathy map to categorise and make sense of the the qualitative research and aid in the further development of the primary persona, Sophie, to prioritise her needs.

I divided the map into statements she had made, actions she performed, thoughts she had highlighted and feelings she expressed during her journey on the current Light House website.

Problem statements

The user doesn't know how to find out what is on today when they land on the homepage.
How might we make it easier for users to do that?
The user is confused by the Now Showing page. It is not alphabetical or chronological.
How might we make the Now Showing page easier for users to understand?
The user does not know what day of the week October 21st is and has to leave the site to check.
How might we ensure that all the information to make a decision about a screening is present?
The users are confused by the language used on the site. Now Showing and Coming Soon appear to be the same lists. What is Event Cinema? What are Signature Strands? How might we make the site easier to understand?
The user is confused when selecting a seat. Is it the back or front row? Is that seat available?
How might we make it easier for users to select seats quickly and confidently?

Testing potential solutions

Information architecture

Before starting to design a solution, I looked at the information architecture for the current website. The primary and secondary navigation bars were bloated, unclear and repetitive as well as having links that did not work.

I trimmed the links in the primary navigation bar, moving several to the secondary navigation footer. For example, "Eat and drink" did not need to be in both the primary and secondary navigation bars.

The Light House website information architecture.
The Light House website information architecture with repetition highlighted.
The proposed information architecture for my prototype.

User flowcharts

Before starting to sketch the screens, I made a user flow chart for the primary user and the secondary user to keep the journey concise.

The primary user flow, for the user in a hurry, has four screens.
The secondary user flow, for the user who has more time to browse, has six screens.

Sketches

I sketched a low fidelity prototype before starting work on Figma. I went through several versions of the homepage and experimented with login options near the end of the flow.

Comparing the layout of the homepages/ landing state on existing cinema sites .
Homepage layout ideas for the prototype.
A second interation of the homepage.
Layout ideas for Now Showing/ What's On.
A layout for a specific film page.
Ticket and seat selection ideas.
Playing with the option to login or create an account before checkout.
Trying to incorporate the option to pay with loyalty points into the payment page.

Moodboard

I wanted to establish a new brand identity for the final prototype. I looked at the websites for NTS (an online radio station) and Mubi (a movie streaming service) for how they display a large amount of content, The Gentlewoman for the clean graphic layout and cultural institutions like MAK Vienna and The Barbican.

Medium fidelity prototype: First iteration

Using Figma, I translated my first sketches into a clickable medium fidelity prototype. I tested it on eight users, asking them to perform two tasks. I had asked them to perform the same tasks on the Light house website beforehand and timed both tests.

1) You want to go to the cinema on Saturday with a friend. You're not sure what you want to see yet. You want to sit in the back row. Show me what you would do.

2) You've heard the Light House are screening some Christmas movies. Where would you find information about that?

Usability Testing Results

87% of users clicked the "Saturday" button on the prototype homepage to see movies for that day. On the Light House website, 87% of users clicked "Now Showing" in the primary navigation, which took longer.
On average, the testers got to the payment page on my prototype 1 minute 20 seconds faster than they did on the Light House website performing the same task, an improvement of 59%.
100% of users quickly identified the back row.
100% of users opted to continue as guest at the option to login/ create account before payment.
0% of users clicked "read more" to learn more about the film; they just went straight to tickets.
50% of users clicked "Our Programme" in the primary navigation to find out about Christmas movies- this heading is unclear and should be changed.

87% of users clicked the Saturday button to find out what was screening on Saturday.
100% of users correctly identified the back row.
100% of users opted to "continue as guest" before the payment page. What could be changed to make them sign in or sign up?
0% of users opted to read more about the films, choosing to go straight to ticket selection.
50% of users clicked on "Our Programme" to find information about Christmas movies, thinking it means "a programe of what's on now". This heading should be changed to something clearer.
50% of users clicked on "What's On/ Seasons" for Christmas movies, which was the intended flow.
When asked to find out what was screening on Saturday, 87% of users clicked Now Showing on the Light House website, taking 1minute 20 seconds longer than the prototype test to reach payment.

Refining the final solution

Light House website prototype: Iteration 2

For this iteration, I improved the interactions and UI design and changed the "Our Programme" heading to "Film Clubs". After this amendment, 100% of users correctly identified "What's On/ Seasons" as the location for information about Christmas movies.

Primary use case: The user clicks on Saturday, scrolls down and chooses Three Colours: Red at 20.15. They then choose 2 tickets, back row seats and opt to sign in before payment.

Secondary use case: The user clicks on What's On/ Seasons to find information about upcoming movie seasons.

Problem statements revisited

The user doesn't know how to find out what is on today when they land on the homepage.
How might we make it easier for users to do that?
87% of users tested identified the daily schedule buttons easily.
The user is confused by the Now Showing page. It is not alphabetical or chronological.
How might we make the Now Showing page easier for users to understand?
Now Showing and Coming Soon have been replaced by “What’s On”.
The subsections are Films, Seasons, Theatre and Exhibition.
Films is further categorised by name and by date. Listings are alphabetical and chronological.
The user does not know what day of the week October 21st is and has to leave the site to check.
How might we ensure that all the information to make a decision about a screening be present?
The user can easily see the day of the week beside the date.
The users are confused by the language used on the site. Now Showing and Coming Soon appear to be the same lists. What is Event Cinema? What are Signature Strands? How might we make the site and the nomenclature easier to understand?
The section descriptions have been simplified. “Our Programme” has been replaced with “Film Clubs”. “Event Cinema” has been replaced by “Exhibition” and “Theatre” .
“Signature Strands” has been removed.
The user is confused when selecting a seat. Is it the back or front row? Is that seat available?
How might we make it easier for users to select seats quickly and confidently?
The seat map is more intuitive. 100% of users tested correctly identified the back row quickly.

Next steps

Mobile website

60% of respondents to the online survey said they buy cinema tickets primarily on their phones. With an identity established for the desktop website, I can use these elements to improve the mobile site experience.

Loyalty/ membership programme

100% of the users tested with the prototype chose to “Continue as guest” instead of signing in or creating an account.
Even users who go to the cinema weekly said that they always opt to continue as guest, they don’t want the hassle. Some didn’t even read the text detailing the incentive, they just automatically skipped it.
How could this loyalty/ membership programme be made more enticing?

Learnings

I would have done the usability tests and interviews first, before the competitive
analysis and online survey.
There were so many problems on the desktop website to fix that I had somewhat decided which ones to focus on from my own thoughts after the competitive analysis.
Had I spoken to users first before starting the research, I would have realised that:
Most users buy tickets on their phones close to the screening so it would have made more sense to design a mobile website.
The majority of users don’t care about a functioning loyalty/ membership programme as much as I do.

The online survey (which had general questions about why people like going to a cinema as opposed to specifically the Light House experience) could have been a lot more focused on how users buy tickets, how long before a cinema trip they decide, what information they want to see on a site to help them make this decision, etc and led to more quantitative data to back up my ideas.

Conclusion

The goal of the primary user, to buy a ticket for a specific night that week, has been made much easier with 87% of users correctly identifying the new flow and getting to the payment page 59% faster than on the Light House website.

The goal of the secondary user, to see what is coming up and to plan ahead, has also been made easier.
The headings and features have been simplified and after “Our Programme” was changed to “Film Clubs”, 100% of users tested with the 2nd iteration correctly identified What’s On/ Seasons as the correct location for information about Christmas movies.

Thank you for reading my case study!

Want to work with me? Feel free to email me or reach out on Linkedin!