A banner with mockups of the Deco Cinema website.

Deco Cinema

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.

TLDR

Adobe XD prototypes of the desktop and mobile sites.

Project Overview

Project Duration

May 2022

Client

Personal

My Role

Lead Product Designer, UX Researcher

Responsibilities

User Research, Wireframing, Product Design, Prototyping, User Testing

The Problem

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.

The Goal

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?

Understanding the User

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.

Competitive Analysis

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.

Demographics

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.

Surveys

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.

Personas

Persona: Alison

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.

A portrait photo of "Alison."

“Recently, I’ve started to feel an appreciation for older movies.”

User Journey Map: Alison

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.

Persona: Winston

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.

A portrait photo of "Winston."

“Sometimes I just want to watch old films on a nice theatre screen”

User Journey Map: Winston

Analysing Winston’s user journey map showed how important it would be to consider usability by an older audience as well.

Starting the Design

Sitemap

Based on the previous research, I learned that the users of Deco Cinema’s site would expect the following features:

  • Movie details
  • Showtimes for specific movies
  • Theatre schedule
  • Ticket booking
  • Seat selection

This list informed the sitemap, informing how many pages and what features would be important for the site.

The sitemap for Deco Cinema.

Wireframes

Paper Wireframes

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.

Paper wireframes for Deco Cinema.
Rough sketch of the desktop website.
Rough sketch of the mobile and tablet websites.

Digital Wireframes (Desktop)

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.

Low fidelity mockups of the desktop website.

Digital Wireframes
(Mobile)

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.

Low fidelity mockups of the mobile website.

Low Fidelity Prototype

Interactive prototypes of the desktop and mobile sites were created to test. These prototypes include the main ticket booking flow.

Usability Study (Low Fidelity)

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.

Usability Study: Parameters

Tasks

  • Select a movie and check its details.
  • Select the showtime on Monday, March 25 at 9pm.
  • Select seats B3 and B4 and complete the order.
  • Check the schedule and book a ticket for 9pm.

Study Type

Moderated usability study

Location

Remote (Global)

Participants

10 participants

Length

5–10 minutes

Usability Study: Findings

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:

1. Unclear Confirmation

It was unclear when finishing booking how the user would recieve the tickets.

2. Booking Process Wasn’t Clear

Participants noted that they weren’t clear on if clicking a time would actually book a ticket.

3. Text Was Too Small

Many participants, specifically on mobile, mentioned that the text was too small.

4. Mobile Version Was Too Cluttered

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.

5. Seating Map Details

Some participants noted that usually seating maps have more detail, like accessibility services, where the screen is, and where the exits are.

6. Seating On Mobile Was Difficult

Due to the smaller screen size, users had a lot of trouble touching the exact seat they wanted on mobile.

Affinity map for Deco Cinema usability test results.

Refining the Design

Adjustments

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.

High Fidelity Mockups (Desktop)

Mockups of the final desktop website.

High Fidelity Mockups (Mobile)

Mockups of the final mobile website.

High Fidelity Prototype

Interactive prototypes of the desktop and mobile sites were created to test. These prototypes include the main flow and ticket booking flow.

Accessibility Considerations

1. Accessible Colour Contrast

Colour choices were checked with the WCAG standards to ensure a minimum of level AA contrast.

2. Viewable By Users With Colour Blindness

Colour choices were checked with colour vision checkers to ensure no elements of the designs were lost as a result of colour blindness.

3. Meaningful Sequence

Headings and content follow the order that a user would expect when browsing the content on the page.

4. Alt Text On Images

All images were ensured to have alt text.

5. Orientation & Size

Pages are not limited to orientation, and can be viewed at any size or on most devices without affecting content or functionality.

6. Text Zoom

Text can be zoomed up to 200% without losing content or functionality.

7. Accessible Seating Considerations

Accessibile seating is taken into account for the seat selection picker.

Takeaways

What I Learned

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.

Thank you!

See More Projects
Back to top