baphomet cinema

baphomet cinema app project

As part of my Google UX Design Course, I created a movie theatre app design from scratch in Figma. The project included a competitive audit, paper wireframes, low fidelity wireframes and prototypes, a usability study, and finally high fidelity mockups and prototypes in Figma. Wireframes, mockups, and prototypes were completed in Figma.


Design a movie trailer and ticketing app for Baphomet Cinema, a (fictional) cinemaplex in Santa Cruz, California.

revised project

Design a ticketing app for Baphomet Cinema, with trailers embedded from YouTube.


UX Designer, from conception to delivery.


June & July 2023


user research

Fragmentation in the movie theatre industry, alongside Fandango’s ticket vendor monopoly and YouTube’s movie trailer monopoly, create mediocre-to-poor user experiences for moviegoers.

Pain Points

  • Users have to navigate a fragmented environment for movie ticket sales and showings.
  • UX design quality is low among movie ticketing options, leading to user frustration.
  • YouTube’s monopoly on movie trailers subjects non-Premium or logged out users to excessive ads.

persona: simon

Simon is a working professional who needs a clean and painless movie ticketing app experience because he does not have the energy to spend navigating confusing apps in order to enjoy a relaxing movie.

Simon. Age: 39. Education: MA, Math. Hometown: Modesto, California. Family: Wife, no kids. Occupation: Financial analyst. "I'm not a big techie, but I like to use apps to buy tickets ahead of time so I don't run into frustrations right before sitting down to see a movie." Goals: Buying movie tickets for date nights with wife. Leaving nothing to chance when preparing for movie outing. Enjoy movie nights without any extra stress. Frustrations: Having to download several apps just to see one movie. Not knowing if a movie will be shown at one cinema or another. Lengthy menus and pages every time he buys tickets. Simon is a working professional with long workweeks. His time at home with his wife on weekends and holidays is precious and he doesn't like to be stressed or waste time when he's off the clock. He and his wife love seeing movies, but navigating the plethora of apps and websites required to see the movies they want is exhausting. Simon wants to be able to click/tap twice to get his tickets for movie night.


Screenshot 2023-08-15 at 12.53.14
Screenshot 2023-08-15 at 13.02.20
5 frames

I designed the home screen (above left, or top) to enable users to access all of the app’s main functions without needing to use the navigation menu. Throughout the app, I designed pages to be information dense without being illegible, so that users can find the information they need without hunting through the app (above center).

low-fidelity prototype

Screenshot 2023-08-15 at 13.21.39

Note: This prototype is not very sophisticated, because it was my first attempt at using Figma. Later iterations, including the high fidelity prototype below, make better use of Figma’s extensive masking and prototyping tools.

useability studies

Round 1 Findings (lofi prototype)

  1. Starting ticket purchase flow is ambiguous for many users.
  2. Changing location is difficult (deprecated).
  3. Many users commented on lack of theatre branding in the app.

Round 2 Findings (hifi prototype)

  1. The chosen teal color does not have enough contrast with the background.
  2. Some users request the option to increase text size.
  3. Users praised simplicity of flow and density of information.


Movie Page

In response to the useability studies, I replaced with teal color with a more accessible, higher contrast shade. I also eliminated shaded backgrounds behind text, which had reduced reading contrast and didn’t meaningfully contribute to the design.

Before (L) and after (R) the useability study

Screenshot 2023-09-20 at 12.49.07

On the payment page, I reorganized the information to more clearly show the user’s selection and to eliminate unnecessary elements. I also added a “change selection” button to make it easier for users to edit their choices.

Before (L) and after (R) the useability study

Screenshot 2023-09-20 at 12.49.30

high-fidelity prototype

Screenshot 2023-09-20 at 12.45.34

accessibility considerations

  1. Palette selected to maximize contrast and to meet WCAG AAA guidelines.
  2. Typographic hierarchy defined clearly by font, size, and weight.
  3. Higher information density to reduce the number of navigational steps in the user flow.

next steps

  1. Create dark mode and large text mockups & prototypes because these are important accessibility features.
  2. Do another round of useability studies to validate dark mode and large text prototypes with users experiencing disability.
  3. Redesign the app as a comprehensive ticking app for a range of cinemas in many locations, as a competitor to Fandango and other monopolists in the industry.