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.
project
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.
role
UX Designer, from conception to delivery.
timeframe
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.
wireframes
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
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)
- Starting ticket purchase flow is ambiguous for many users.
- Changing location is difficult (deprecated).
- Many users commented on lack of theatre branding in the app.
Round 2 Findings (hifi prototype)
- The chosen teal color does not have enough contrast with the background.
- Some users request the option to increase text size.
- Users praised simplicity of flow and density of information.
mockups
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
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
high-fidelity prototype
accessibility considerations
- Palette selected to maximize contrast and to meet WCAG AAA guidelines.
- Typographic hierarchy defined clearly by font, size, and weight.
- Higher information density to reduce the number of navigational steps in the user flow.
next steps
- Create dark mode and large text mockups & prototypes because these are important accessibility features.
- Do another round of useability studies to validate dark mode and large text prototypes with users experiencing disability.
- 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.