Showcase Cinemas - Trailer Redesign
Timeline: October 8, 2023 - Present (on pause)
INTRODUCTION
Throughout the second course of the Google UX Design Professional Certificate program, I began my first UX project based on the prompt: “Design a trailer browsing app for a movie theater.” Initially, I conducted research without a specific movie theater in mind. While doing a competitive audit on Showcase Cinema’s app, I discovered their app was the only one that did not yet have trailers. From then on, I decided to reform my prompt to redesign the Showcase Cinemas app.
PROBLEM
Showcase Cinemas is a movie theater chain owned and operated in the United States. Their app design allows users to purchase movie tickets and concessions but lacks movie trailers to further engage the user.
ROLES
Product Designer and Researcher
Latest Prototype
This redesign is still a work in progress but focuses on applying visual design and user interaction to the revisions made from the usability testing feedback.
Process Overview
-
Timeline: October 9, 2023 - October 24, 2034
To begin, I needed to understand the user of a trailer app. I conducted virtual interviews with five individuals, supplemented by data derived from two authentic bios and two Coursera sample bios. I identified my assumption that users wouldn't find much value in an app solely dedicated to trailer browsing, and conducted research in a way that would reduce my bias. In the end, the research validated my assumption. All five interviewees expressed a lack of interest in a trailer app, mentioning the availability of trailers online or disinterest. Four out of five participants also offered suggestions for additional features that would increase interest in a trailer app which included discovering movies playing at specific theaters, purchasing movie tickets with seat reservations, and on-demand movie streaming
-
Timeline: October 31, 2023 - November 23, 2023
To understand the trailer-related apps within today's market, I researched both direct and indirect competitors. Direct competitors included American movie theaters and ticketing companies that likely already integrated trailer features into their platforms. Indirect competitors included streaming apps for various media content like movies and television. The competitors included in my analysis were chosen based on the level of access I had to their platforms. See my competitive audit.
A significant discovery from my analysis was that, at the time, the Showcase Cinemas was the only app which lacked the trailer feature. This discovery led me to shift the project direction to redesigning their app instead of a generic theater browsing app.
-
After gaining research insights, I created 3 personas and selected one of them to identify a problem statement to solve and guide the rest of my project. I then built a user journey map to further empathize by attempting to imagine the persona’s actions, feelings, and pain points while using a generic trailer browsing app. See below for the persona and journey map.
-
For every key screen in the user flow, I brainstormed 5 design layouts in Figma. I starred elements of each layout I found appealing and merged them into a single wireframe. In addition to introducing the trailer browsing feature, I updated the app navigation style from a sidebar to bottom icons. This approach is more user-friendly for thumb interaction and aligns with modern design. Another prominent change in the movie screen emphasized the size of the movie poster into a grid layout to better advertise and attract users to learn more about a movie. To better organize the app features while designing, I created an information architecture to provide a visual guide. See below for information architecture and low-fidelity wireframes.
-
Timeline: December 15, 2023 - January 9, 2024
After creating a low-fidelity prototype, I wanted to do early design testing to prove my design improved the user experience. Since I also didn't have any usability data for the current Showcase Cinemas app, I first tested the usability of the existing app and then followed up with my prototype. I conducted a moderated test on 4 participants. Each was scheduled in person and lasted about 30 minutes. Participants were asked to complete specific tasks while narrating their thoughts and then responded to follow-up qualitative questions. See below for usability tests.
If I were to conduct another usability test in the future, I would make sure to obtain KPIs to compare the usability of the existing Showcase Cinemas app with my prototype.
-
Paused: March 5, 2024
Following the insights gained from the usability tests, I redesigned the user flow. See below for mid-fidelity wireframes.
-
Shifting my project to redesign the Showcase Cinemas app, I noticed sometime later that Showcase Cinemas implemented the trailer feature. Even though my design might not be as necessary anymore, it validated my efforts had the potential to be useful. This experience taught me that any solution to a problem is worth exploring when framed in the right context. By focusing on a specific problem, I saw first-hand the value and impact that UI/UX research can lead to. While this project is not yet finished, I definitely want to do a design comparison in the future.
Building User Empathy
Persona
Journey Map
Low-Fidelity Wireframes
Prototype
Usability Tests
Showcase Cinema App (current)
AFFINITY DIAGRAM
INSIGHT RECOMMENDATIONS
1. Users struggled to add a cinema location.
2. Users were confused about the seating types and needed more information about the seat types to decide.
3. Users needed more information about the seating fees before they could confidently make a purchase.
4. Users who wanted to purchase concessions were confused about the process.
Prototype (redesign)
AFFINITY DIAGRAM
INSIGHT RECOMMENDATIONS
1. All users found it easier to add a cinema location, but the location icon wasn’t clickable
2. Users found it hard to read the full cinema location name.
3. Users wanted the movie poster to be more visible on the movie info screen.
4. Users noticed some components weren’t centered properly and the company logo looked different.