ABC Movie Theater Movie Trailer App

ABC Theaters

The Challenge

A movie theater chain seeks to establish a strong online presence to attract more customers to their theaters.

The Goal

Design a mobile app that enables users to watch movie trailers, purchase tickets for upcoming theater showings, and share their experiences with others.

My Role

Sole UI/UX Designer

My Responsibilities

User research, conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability study, and iterating on designs

Scope

4 Months
This project was designed by using:
Figma logo
Figma

Case Study

1

User Research

Empathize
I began with thorough research online to discover the demographics of customers who frequently visit movie theaters. Through this research, I found that individuals aged 25-34, living in metropolitan and suburban areas and belonging to the working class, are the most frequent moviegoers, visiting theaters at least once a month on average.

To gain deeper insights, I conducted interviews with 10 working-class individuals aged 25-34, who live in metropolitan and suburban areas, including 3 in-person and 7 over the phone. The participants were asked the 5 following questions:
1
Please describe your current schedule and how you balance your schedule with watching movies?
2
How often do you go to the movie theaters, and what motivates you to do so?
3
What factors might discourage you from going to movie theaters?
4
How do you discover new movies, and what criteria do you consider when doing so?
5
What is your process behind purchasing movie tickets?
From my research, I identified 4 critical pain points that these individuals face:
1
Time
Working adults often struggle to find time to visit movie theaters due to their busy schedules.
2
Cost
Going to the movies can be costly considering tickets and concessions, especially compared to streaming at home.
3
Social
People desire to share the content they discover and engage in discussions with others about it.
4
Stay Informed
It is challenging to stay updated on future movies, and find all the information on one centralized platform.
2

Define

Goal
I then crafted a goal statement to cover what the product lets users do, who the action affects, why the action positively affects users, and how the effectiveness of a product is measured.
The goal for this project can now be clearly defined as follows:

Design a mobile app that enables users to watch movie trailers, purchase tickets for upcoming theater showings, and share their experiences with others.
3

Ideation

Value Proposition
To summarize why a consumer would benefit by using this movie theater app, I created an affinity diagram to define its value proposition by compiling a comprehensive list of its features. Afterward, I categorized these features into five groups based on accessibility and user pain points. The remaining features were set to the side as optional.
Information Architecture
I created a big picture storyboard to capture the user's journey in ordering movie tickets and sharing the experience with their family. This helped me understand the entire user experience, including the different challenges, potential pain points, and types of interactions the user will encounter.
Next, I created a close-up storyboard to visualize the practical steps a user would take to purchase movie tickets from start to finish. This process helped me identify and resolve any potential issues with the order flow, ensuring a smooth user experience.
I then constructed a user flow chart to show the path a typical user takes on the app, from start to finish, to complete a task. The goal was to map how users find and purchase movie tickets as they navigate through the app. This approach provides a clear overview of the product's functionality before the design process begins, ensuring a smooth and efficient user experience.
To finalize the information architecture, I drafted a sitemap as a blueprint for the app's structure. It organized the content hierarchy and navigation paths, ensuring all sections were logically arranged and easily accessible, enhancing user experience with clear navigation.
Wireframes
Keeping the end user and problem statement in mind, I used the Crazy Eights method to sketch eight ideas for the app's home screen, dedicating 60 seconds on each design. This approach pushed me to think creatively and quickly, resulting in a variety of unique and nontraditional solutions to consider without initial judgment.

After completing this exercise, I marked stars and added descriptions next to the features I planned to keep. These features were chosen as they offered the best solutions to address the users' pain points.
I took the elements marked in the Crazy Eights exercise and combined them into paper wireframes. These wireframes helped inform design elements, catch problems early, map out page elements and navigation, save time and effort by guiding the project, and allow for low-cost, rapid iteration and exploration of design ideas.
After receiving peer feedback, I converted the paper wireframe designs into digital wireframes. This provided a more realistic view of the product and facilitated seamless sharing for better collaboration and feedback.

I applied Gestalt Principles to ensure consistent visual organization, effective communication, aesthetic appeal, and increased user engagement.
4

Prototyping

UX Research
The goal of the UX research study was to use a structured approach to gather valuable insights, identify user needs, and make informed design decisions, ultimately leading to a more effective and user-friendly product.

I included 10 participants in an unmoderated study, asking them to record themselves using the app at home. This method provided a more genuine user experience, resulting in more honest feedback.

The UX research study covered the project background, research goals, detailed research questions, key performance indicators (KPIs), methodology, participants, and the script or questions for the participants.
As a result of the UX research study, I modified the design based on valuable insights. By analyzing user feedback, I identified areas needing improvement and made data-driven changes to address pain points, enhance functionality, and improve usability. This iterative approach ensured the design evolved to meet user needs effectively, resulting in a more user-friendly experience.

The following notes are based on the study feedback, categorized by patterns and themes identified in the research data:
High-Fidelity
Using the feedback from the UX research study, I iterated changes based on the identified patterns and themes. I did this by creating mockups that incorporated visual elements such as typography, color, and iconography. This approach ensured that the design revisions were not only user-centered but also visually cohesive and appealing.
To create a polished high-fidelity prototype, I linked the mockup screens together with interactive elements and fine-tuned animations. It was important to ensure the app's accessibility, so I included features like text compatible with screen readers for users with visual impairments, ensured clear color contrast for readability, and maintained consistent navigation throughout. These efforts were aimed at enhancing usability and ensuring that everyone can easily navigate and enjoy using the prototype.
5

Test

Takeaways
Completing this project from start to finish has been an incredible learning experience in UI/UX design. My biggest takeaway is that everything truly revolves around the end-user. I’ve realized how crucial it is to design with both accessibility and user pain points in mind. No matter how visually appealing an app is, focusing on the user’s needs and journey is essential for resolving issues and ensuring the overall success of the design. This project has reinforced the importance of always keeping the user at the heart of the design process.
What's Next?
The next step for this project is to conduct further user research through another usability study to verify the app's ease of use, test accessibility options, and find ways to enhance the user experience addressing user pain points. Based on the study results, I would iterate on the designs to improve the user experience for everyone and continue this cycle.

More UI/UX Design Projects

BizStart app preview

Got Questions? Let’s connect

Are you looking for an exceptional design for your next project?
Get in touch with me today to discuss your ideas and requirements.
Designed by Chad King using Photoshop, Figma, and Webflow