Deco Cinema is a fictional small independent retro-style theatre in Toronto that needed a website for their venue. The website needed information on movies screening, screening times, and the ability to book tickets online.
This case study was done as part of the Google UX Design Professional Certificate.
May 2022
Personal
Lead Product Designer, UX Researcher
User Research, Wireframing, Product Design, Prototyping, User Testing
Deco Cinema is a small independent retro-style theatre that did not have a web presence. The theatre needed a site to show users information on movies currently screening, screening times, and the ability to book movie tickets and seats online.
To create a website for Deco Cinema to view information on movies currently screening, screening times, and the ability to book movie tickets and seats online.
How might we help users book tickets for the theatre?
The goal of my research was to find out the demographic of retro cinema-goers in Toronto, and learn what features users would expect on a theatre website.
I began by conducting a competitive analysis on the websites of a number of other theatres in Toronto, the main one being Revue Cinema to inform what features they had on their websites. This helped create a list of required features which informed my designs.
As a result of the competitive analysis, I was also able to discover that the target market for retro cinemas in Toronto was surprisingly broad, with cinephiles ranging broadly in age depending on the movies being screened. This meant that the site would have to be easily usable by both an older and a younger audience.
To find further information before designing, I conducted surveys to find what features users typically expected from a movie theatre website. As a result of the survey, I found out that users expected movie details, ticket bookings, and a theatre schedule. However, I also found that seating selection was important to users, as users would want to be sure they got a good seat.
Alison is a young film connoisseur who needs to find movie details and showtimes and book a movie ticket online because they want to watch a movie at the retro theatre.
“Recently, I’ve started to feel an appreciation for older movies.”
Analysing Alison’s user journey helped show how important having a website would be, and how important it would be to have the movie details available on the site.
Winston is a retired retro movie fan who needs to find a screening schedule and book a movie ticket for Friday night because they want to watch a movie at the retro theatre on Friday night.
“Sometimes I just want to watch old films on a nice theatre screen”
Analysing Winston’s user journey map showed how important it would be to consider usability by an older audience as well.
Based on the previous research, I learned that the users of Deco Cinema’s site would expect the following features:
This list informed the sitemap, informing how many pages and what features would be important for the site.
Using the Crazy Eights exercise, I sketched a number of rough ideas for the site, then went into further sketches to finalise a design for the main screen.
The initial digital wireframes had each movie as its own separate card, to emulate the feel of looking at a wall of posters at the theatre. A schedule was added on the lefthand side to give a quick overview of the day's screenings, with buttons to easily book tickets for those movies.
The movie details screen featured a large video trailer, echoing the experience of the big screen for the user’s device. In addition, a schedule of the theatre’s showtimes of the selected movie was available, showing when the user could view the movie.
If the user didn’t have a specific movie they wanted to see and just wanted to see what was playing at the theatre at certain dates and times, a theatre schedule screen was also created to allow the user to browse all available times and movies.
As informed by my research, users also expected a detailed seat selection, so this was designed and added into the ticket booking flow as well.
The mobile version was adapted from the desktop version, with changes to accomodate the decrease in screen real estate. The schedule was moved to a button in the top right to show/hide the schedule, and cards were changed to take the full width of the device. On mobile, the movie info screen was changed to a tabbed layout to make finding information quicker.
A usability study was carried out on both of the initial low fidelity prototypes to gather insight on what worked and what could be improved. A group of 10 participants, 5 fitting the Alison persona and 5 fitting the Winston persona were chosen to run a usability study on the website prototype. A moderated usability study was chosen as it was important to see how the Winston group would interact with the website.
Moderated usability study
Remote (Global)
10 participants
5–10 minutes
Results of the usability study were recorded and organised in an affinity map, grouped by desktop and mobile tests. These results were then refined into 6 actionable insights:
It was unclear when finishing booking how the user would recieve the tickets.
Participants noted that they weren’t clear on if clicking a time would actually book a ticket.
Many participants, specifically on mobile, mentioned that the text was too small.
The mobile version didn’t make a good use of the screen space, and participants felt that it was difficult to use. Many participants got lost and were not able to find information.
Some participants noted that usually seating maps have more detail, like accessibility services, where the screen is, and where the exits are.
Due to the smaller screen size, users had a lot of trouble touching the exact seat they wanted on mobile.
The results of the usability study showed that upon a completed booking, it was unclear how the user would actually receive the tickets, so this was adjusted to add a note that the user would receive the tickets by email.
Participants also weren’t immediately clear on the booking process. For the high-fidelity mockup, the wording was adjusted to make it clearer that clicking a time would book a ticket.
Some participants also noted that the text was too small, and that the mobile version was too cluttered with content. This was adjusted by increasing the font size, and having long descriptions truncate to reduce the vertical size the movie details on the main screen.
The usability study also made it clear that the seating plan was not fully featured enough to make a proper seating decision, so additional details such as accessibility seating, exits, and screen location were added to help the users make a more informed seat choice. To solve the issue of the mobile seating plan not being too usable, a zoom in was added when selecting an area, allowing the user to select any seat with much more ease.
Colour choices were checked with the WCAG standards to ensure a minimum of level AA contrast.
Colour choices were checked with colour vision checkers to ensure no elements of the designs were lost as a result of colour blindness.
Headings and content follow the order that a user would expect when browsing the content on the page.
All images were ensured to have alt text.
Pages are not limited to orientation, and can be viewed at any size or on most devices without affecting content or functionality.
Text can be zoomed up to 200% without losing content or functionality.
Accessibile seating is taken into account for the seat selection picker.
I learned the importance of running user tests and gathering the feedback, as testing can uncover valuable insights from participants that you wouldn’t have thought of on your own.
It was also challenging to design for such a wide audience, especially for an older audience. Looking back at the finalised design, there are definitely aspects of it that I would do differently now, as I feel like there’s still a lot in the design that could be improved for older audiences.
This project was done to help me become more fluent in Adobe XD, and though I still prefer Figma overall, I do enjoy using Adobe XD as well. That said, I would like to revisit this project using Figma, as well as the new knowledge I gained throughout the process.