Alameda Theatre
A modern app experience for a historic movie palace 🎬🍿
The Alameda Theatre is a historic Art Deco movie palace built in the 1930s. Now, it has expanded to become the Alameda Theatre & Cineplex, catering to the small town's passionate moviegoers.
As a frequent patron myself, I set out to study the moviegoer's ticket buying experience. I reimagined their website as a straightforward and simple app that highlights their shows and their unique in-theatre dining experience.
Interact with the prototype below!
The Alameda Theatre is a historic Art Deco movie palace built in the 1930s. Now, it has expanded to become the Alameda Theatre & Cineplex, catering to the small town's passionate moviegoers.
As a frequent patron myself, I set out to study the moviegoer's ticket buying experience. I reimagined their website as a straightforward and simple app that highlights their shows and their unique in-theatre dining experience.
Research
Early brainstorming to dump all my ideas together.
I started brainstorming to gather my thoughts and to begin exploration. I looked at how big cinema companies designed their apps, comparing the scope of their features to see if any are applicable to Alameda Theatre's user flows.
Identifying the problem
In the research phase, I identified the biggest pain points in the theatre's current process. They use two separate websites for the Alameda Theatre and the Cinema Grill (In-Theatre Dining), even though they are housed together and users go through both to complete a process.
The hierarchy of the sites do not highlight the theatre's current showings—users need to scroll through the page and find these, which takes time. Additionally, the ticket purchase pages are not fully responsive, giving majority of users a hard time purchasing and displaying tickets once they are ready to pick up.
Goals
With the problem points in mind, my goals were to simplify the movie selection and ticket purchasing flow and to encourage moviegoers to avail of in-theatre dining.
Prototyping
Several iterations of rough sketching helped me identify the user flow and information architecture of the app. I determined 3 main actions a user intends to do, which determined the main sections:
- Movies - to find a movie and buy tickets
- In-Theatre Dining - to order food during a movie
- Tickets - to easily access tickets for physical confirmation
Once I locked down the app's general structure, I moved on to mid-fidelity prototyping on Sketch to focus on information hierarchy and to further reiterate the user flow.
High Fidelity
Movies + Dining
The primary flow of the app combines ticket purchasing and food ordering together to streamline the user's actions into one straightforward flow. This also encourages the user to add in-theatre dining to their experience.
For the home screen, I wanted the user to immediately see the theatre's current screenings, and have the option to scroll horizontally for future shows. Once the user selects an available screening, they are taken to the movie page that provides more info on the movie. Central to the screen, the user can select dates and times with quick selection.
Once the user selects tickets and seats, they have the option to add food items to their order. I formatted this page similar to the physical menu in the theatre, so the user is familiar with how the dishes are organized.
Tickets
With the old website, users received an email confirmation which they can show to the box office to claim their tickets.
I built the Tickets section as a "ticket wallet" so users can easily access their purchased tickets without having to dig into emails and browser tabs. A QR code is large and centered for quick scanning.
Next steps
I limited the scope of this study to the movie showing and in-theatre dining services of the theatre. Beyond that, the Alameda Theatre caters to different kinds of shows and events for the local community which are showcased on their current website as well. I would like to explore adding more formats of shows, while still keeping the main business of the theatre prioritized on the app.
Additionally, the theatre offers in-theatre dining for moviegoers without reserved seating as well. I started exploring an order pick-up flow during my iterations, but reserved it for a future study as this is a less known offering.
Next steps
I limited the scope of this study to the movie showing and in-theatre dining services of the theatre. Beyond that, the Alameda Theatre caters to different kinds of shows and events for the local community which are showcased on their current website as well. I would like to explore adding more formats of shows, while still keeping the main business of the theatre prioritized on the app.
Additionally, the theatre offers in-theatre dining for moviegoers without reserved seating as well. I started exploring an order pick-up flow during my iterations, but reserved it for a future study as this is a less known offering.